reactnative:textinput
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
|
reactnative:textinput [2019/02/11 10:03] ips |
reactnative:textinput [2019/02/11 11:34] (現在) ips |
||
|---|---|---|---|
| ライン 1: | ライン 1: | ||
| ====== TextInput ====== | ====== TextInput ====== | ||
| - | ====== textAlignVertical(入力開始位置) ====== | + | [[https://facebook.github.io/react-native/docs/textinput|TextInput]] |
| + | |||
| + | ===== textAlignVertical(入力開始位置) ===== | ||
| <code> | <code> | ||
| textAlignVertical:'top' | textAlignVertical:'top' | ||
| </code> | </code> | ||
| - | ====== numberOfLines(行数) ====== | + | ===== numberOfLines(行数) ===== |
| hightを設定したら機能しない。 | hightを設定したら機能しない。 | ||
| 初期表示されるhightが変わるだけで、行数を制限するわけではない。 | 初期表示されるhightが変わるだけで、行数を制限するわけではない。 | ||
| ライン 18: | ライン 20: | ||
| /> | /> | ||
| </code> | </code> | ||
| + | ↓ | ||
| {{:reactnative:pasted:20190211-100254.png}} | {{:reactnative:pasted:20190211-100254.png}} | ||
| <code> | <code> | ||
| <TextInput multiline = {true} | <TextInput multiline = {true} | ||
| - | numberOfLines = {2} // 2 | + | numberOfLines = {4} |
| style={{textAlignVertical:'top', borderColor: 'gray', borderWidth:1 , backgroundColor:'white',fontSize:20,borderRadius:5,margin:10}} | style={{textAlignVertical:'top', borderColor: 'gray', borderWidth:1 , backgroundColor:'white',fontSize:20,borderRadius:5,margin:10}} | ||
| onChangeText={(text) => this.setState({question:text})} | onChangeText={(text) => this.setState({question:text})} | ||
| value={this.state.question} | value={this.state.question} | ||
| /> | /> | ||
| - | </code> | + | </code> |
| + | ↓ | ||
| + | {{:reactnative:pasted:20190211-100333.png}} | ||
| + | |||
| + | ===== 高さを固定する方法 ===== | ||
| + | デザインの関係上マルチラインにしたいが、改行することで高さが変わるのは望ましくない場合がある。 | ||
| + | その場合は<html>autogrow={false}</html>と<html>maxHeight={99}</html>を設定する。 | ||
| <code> | <code> | ||
| <Text style={{fontSize:20}}>問題</Text> | <Text style={{fontSize:20}}>問題</Text> | ||
| <TextInput multiline = {true} | <TextInput multiline = {true} | ||
| - | numberOfLines = {4} | + | scrollEnabled={true} |
| + | numberOfLines={4} | ||
| + | autogrow={false} //セットで設定しないと効かない | ||
| + | maxHeight={60} //セットで設定しないと効かない | ||
| style={{textAlignVertical:'top', borderColor: 'gray', borderWidth:1 , backgroundColor:'white',fontSize:20,borderRadius:5,margin:10}} | style={{textAlignVertical:'top', borderColor: 'gray', borderWidth:1 , backgroundColor:'white',fontSize:20,borderRadius:5,margin:10}} | ||
| onChangeText={(text) => this.setState({question:text})} | onChangeText={(text) => this.setState({question:text})} | ||
| ライン 39: | ライン 51: | ||
| </code> | </code> | ||
| - | {{:reactnative:pasted:20190211-100333.png}} | ||
reactnative/textinput.1549847035.txt.gz · 最終更新: 2019/02/11 10:03 by ips
