React Nativeの公式ドキュメントを和訳してみる 8 - Handling Text Input

注意

• 当記事はReact Native 0.51の公式ドキュメントの独自和訳です。間違いなどあればご指摘ください。
• バージョン0.51のドキュメントに準拠します。
• 参照リンク先は基本的に元サイトです。リンク先サイトを和訳したらそのページに差し替えます。
• 本家サイトではシミュレータがあり、コードを編集しながら実行でき便利です。
• Facebook社に無断なので怒られたら消します。

元サイト
facebook.github.io

TextInputは基本コンポーネントの一つであり、ユーザーからのテキスト入力を可能にします。propにonChangeText を指定すれば文章が変更するたびに呼ばれる関数を設定でき、propにonSubmitEditing を指定すれば文章が投稿されたタイミングで呼ばれる関数を設定できます。

例えば、ユーザーが文字を打つ時、入力した単語を別の言語に変換させてみましょう。この新しい言語では、すべての単語はそれぞれ全く同じ🍕で記述されます。従って、”Hello there Bob”という文章は"🍕🍕🍕"に変換されます。

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

export default class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
      </View>
    );
  }
}

// Create React Native Appを使っている時はこの行を飛ばす
AppRegistry.registerComponent('AwesomeProject', () => PizzaTranslator);

この例の中ではtextをstateに保存していますが、これは時間とともに変わっていく値だからです。

文章入力に関してやりたいことはもっとたくさんあるでしょう。入力中の文章内のバリデーションなどですね。より詳細な例はReactのドキュメント内の"コントロールされたコンポーネント"の項、またはTextInputのレファレンスを参照してください。

文章の入力はユーザーをアプリの間でやり取りする一つの方法です。次は、他のインプット方法を見てタッチ動作の処理方法を学びましょう。