React Native基礎

TextInputコンポーネント

TextInputコンポーネントとカスタマイズ

アプリでテキスト入力を受け付けるにはTextInputコンポーネントを使用します。valueプロパティで「現在の入力内容」を指定します。また、onChangeTextプロパティで入力されたテキストをstateに反映するイベントハンドラを指定します。
※TextInputはonChangeText以外にonChangeというプロパティがありますがイベントハンドラに渡される引数が異なるので注意してください。

<TextInput
  style={styles.textInput}
  value={this.state.name}
  onChangeText={text => this.setState({name: text})}
/>

なお、TextInputはスタイルとしてborderWidthなどを指定しないと枠線が描画されないので注意してください。また、TextInput自体やそれを囲むViewでwidthを指定しないと「適切な長さ」の要素として描画されない点も注意が必要です。

TextInputで指定できるプロパティは以下のURLで説明されています。以下では利用頻度の高いと思われるプロパティに絞って説明を行います。
https://reactnative.dev/docs/textinput

keyboardTypeプロパティ

表示されるソフトウェアキーボードの種類を指定するにはkeyboardTypeプロパティを使います。Android・iOSどちらでも有効なもの、Androidのみ有効なもの、iOSのみ有効なものがあります。通常はどちらでも有効なものを使うことになります。

• default：制御しない
• number-pad：数値キーボード（number-pad、decimal-pad、numericは通常同じキーボードが表示される）
• decimal-pad：数値キーボード
• numeric：数値キーボード
• email-address：アルファベットキーボード
• phone-pad：電話番号用のキーボード

multilineプロパティ

複数行の入力が行えるようにするにはmultilineプロパティでtrueを指定します。
複数行入力のTextInputを適切に描画するには他にスタイルでtextAlignVertical（指定しないと縦方向が「中寄せ」になります）とheightを指定する必要があります。なお、TextInputにはnumberOfLinesというプロパティが指定できますがこのプロパティはAndroidでしか有効ではなく、指定した行数以上に入力するとそれに応じてコンポーネントが伸びていくことになります。

secureTextEntryプロパティ

パスワードを入力させる（入力内容を伏せる）にはsecureTextEntryプロパティをtrueにします。表示されるキーボードも適切なものになります。