2017-01-16 20 views
11

react-nativeのテキストエリアコンポーネントが組み込まれていますか?私はこれらのものを実装することを試みた:反応ネイティブのテキストエリアの代替手段は何ですか?

https://github.com/buildo/react-autosize-textarea

https://github.com/andreypopp/react-textarea-autosize

が、「コンポーネントクラスは、オブジェクトのオブジェクトを持って期待」エラーを取得します。

答えて

22

はいあります。これはTextInputと呼ばれ、通常のTextInputコンポーネントは複数行をサポートします。あなたがこれを持っている必要があり

ちょうど終わりに、あなたのTextInputコンポーネント

multiline = {true} 
numberOfLines = {4} 

にプロパティを次のように割り当てる:それは自動的に拡張さ https://www.npmjs.com/package/react-native-autogrow-textinput

:私は、このコンポーネントを使用しています

<TextInput 
    multiline={true} 
    numberOfLines={4} 
    onChangeText={(text) => this.setState({text})} 
    value={this.state.text}/> 
2

- テクスチャー成長。私は、コンポーネント内にそのように見えた、それの一部として自動拡張-のTextInputと私自身の再利用可能なコンポーネントを作成しました:

<AutoGrowingTextInput 
    minHeight={40} 
    maxHeight={maxHeight} // this is a flexible value that I set in my 
    component, where I use this reusable component, same below, unless 
    specified the other 
    onChangeText={onChangeText} 
    placeholder={placeholder} 
    placeholderTextColor='#C7C7CD' 
    style={inputStyle} 
    value={value} 
/> 
0

だけ反応し、ネイティブコンポーネントを使用している場合は、あなたのオプションはTextInput

として "ですfunkysoulは」説明:

はちょうどあなたのTextInputコンポーネント

multiline = {true}に次のプロパティを割り当てます numberOfLines = {4}

あなたは、古典的なtextarea(インラインテキスト入力よりも大きい)として、このコンポーネントを表示する場合は、通常heightスタイルプロパティを追加する必要があります。次の例を参照してください:

<TextInput 
    multiline={true} 
    numberOfLines={10} 
    style={{ height:200, backgroundColor:'red'}} 
/> 

私はheight役割をより良く理解するためのbackgroundColorを追加しました。あなたのプロジェクトでは使わないでください;)

関連する問題