reactnative:textinput

差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

--- reactnative:textinput [2019/02/11 09:03]
ips 作成
+++ reactnative:textinput [2019/02/11 11:34] (現在)
ips
@@ ライン 1: / ライン 1: @@
 ====== TextInput ======
-====== 入力開始位置 ======
+[[https://facebook.github.io/react-native/docs/textinput|TextInput]]
+===== textAlignVertical(入力開始位置) =====
 <code>
 textAlignVertical:'top'
 </code>
+===== numberOfLines(行数) =====
+hightを設定したら機能しない。
+初期表示されるhightが変わるだけで、行数を制限するわけではない。
+改行すればどんどん入力スペースは下に拡張していく。
+<code>
+             <TextInput multiline = {true}
+             numberOfLines = {2}　//　2
+             style={{textAlignVertical:'top', borderColor: 'gray', borderWidth:1 , backgroundColor:'white',fontSize:20,borderRadius:5,margin:10}}
+             onChangeText={(text) => this.setState({question:text})}
+             value={this.state.question}
+             />
+</code>
+　　　↓
+{{:reactnative:pasted:20190211-100254.png}}
+<code>
+             <TextInput multiline = {true}
+             numberOfLines = {4}
+             style={{textAlignVertical:'top', borderColor: 'gray', borderWidth:1 , backgroundColor:'white',fontSize:20,borderRadius:5,margin:10}}
+             onChangeText={(text) => this.setState({question:text})}
+             value={this.state.question}
+             />
+</code>
+　　　↓
+{{:reactnative:pasted:20190211-100333.png}}
+===== 高さを固定する方法 =====
+デザインの関係上マルチラインにしたいが、改行することで高さが変わるのは望ましくない場合がある。
+その場合は<html>autogrow={false}</html>と<html>maxHeight={99}</html>を設定する。
+<code>
+           <Text style={{fontSize:20}}>問題</Text>
+             <TextInput multiline = {true}
+             scrollEnabled={true}
+             numberOfLines={4}
+             autogrow={false} //セットで設定しないと効かない
+             maxHeight={60} //セットで設定しないと効かない
+             style={{textAlignVertical:'top', borderColor: 'gray', borderWidth:1 , backgroundColor:'white',fontSize:20,borderRadius:5,margin:10}}
+             onChangeText={(text) => this.setState({question:text})}
+             value={this.state.question}
+             />
+</code>

reactnative/textinput.1549843422.txt.gz · 最終更新: 2019/02/11 09:03 by ips