今回はユーザーログイン時のメールアドレス・パスワードなどの入力など、幅広く使われるテキスト入力フォームをReactNativeで実装するTextInputコンポーネントの使い方を紹介する。

TextInputコンポーネントのインポート

今回はTextInputのほか、stateの確認用としてTextコンポーネントも合わせてインポートする。

1
2
import React, { Component } from 'react';
import { View, Text, TextInput } from 'react-native';

入力値はstate変数で管理する

TextInputコンポーネントでは、基本的にユーザーからの入力値をstate変数で管理する。

まずはconstructor()でstateを初期化する。

1
2
3
4
5
6
7
8
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "",
    };
  }
}

入力に合わせてstateを更新する

TextInputコンポーネントには、onChangeTextイベントが用意されており、ユーザーがテキストを入力するとイベントに設定した処理が実行される。

今回は最も一般的な処理として、先ほど初期化したstate変数をユーザーが入力した値に更新する例を紹介する。

1
<TextInput onChangeText={(text) => this.setState({text}) />

確認用コード全文

最後にサンプルとして作ったアプリのコード全文を紹介する。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React, { Component } from 'react';
import { View, Text, TextInput } from 'react-native';
 
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "",
    };
  }
 
  render() {
    return(
    <View style={{
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: '#F5FCFF'
    }}>
      <TextInput
        style={{
          width: "100%",
          borderBottomWidth: 1,
          borderBottomColor: "#ccc"
        }}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      />
      <Text>{this.state.text}</Text>
    </View>
    );
  }
}

アプリを実行すると、画面真ん中に線が表示される。
線をタップするとテキストを入力することができ、入力された値が入力フォームの下にも表示されるはずだ。