猫型iPS細胞研究所

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== 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>

猫型iPS細胞研究所

ユーザ用ツール

サイト用ツール

ページ用ツール