ユーザ用ツール

サイト用ツール


reactnative:textinput

差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
reactnative:textinput [2019/02/11 10:38]
ips
reactnative:textinput [2019/02/11 11:34] (現在)
ips
ライン 3: ライン 3:
 [[https://​facebook.github.io/​react-native/​docs/​textinput|TextInput]] [[https://​facebook.github.io/​react-native/​docs/​textinput|TextInput]]
  
-====== textAlignVertical(入力開始位置) ​======+===== textAlignVertical(入力開始位置) =====
 <​code>​ <​code>​
 textAlignVertical:'​top'​ textAlignVertical:'​top'​
 </​code> ​ </​code> ​
  
-====== numberOfLines(行数) ​======+===== numberOfLines(行数) =====
 hightを設定したら機能しない。 hightを設定したら機能しない。
 初期表示されるhightが変わるだけで、行数を制限するわけではない。 初期表示されるhightが変わるだけで、行数を制限するわけではない。
ライン 33: ライン 33:
    ↓    ↓
 {{:​reactnative:​pasted:​20190211-100333.png}} {{:​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.1549849115.txt.gz · 最終更新: 2019/02/11 10:38 by ips