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

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

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

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

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

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

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

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "",
    };
  }
}

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

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

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

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

確認用コード全文

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

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>
    );
  }
}

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