React-Nativeで遊んでみる その１ ~<Text>と<TextInput>を使ってみる~

React-Nativeで遊んでみる

ここではReact-Nativeで遊んでみる 導入編で作成したsampleProjectをいじってオリジナルアプリを作っていきます！
ちなみに自分はSwiftが嫌でReact-Nativeを始めましたがReact.jsでうんざり．．って人はReact-Nativeはうーんって感じです

フォルダ構成

なんか色々入ってますがiOSアプリを実装するのに実際に触るのは以下のファイルとフォルダです

sampleProject
- index.js
- App.js
- ios

コンポーネント

React-Nativeではhtmlで使えるようなdivタグやinputタグは使えません(たぶん..)代わりによく使うようなコンポーネントが公式で用意されています
大体はhtmlのタグと同じ名前で実装されているので直感的にわかりやすくなっています

今回実装するもの

今回はTextとTextInputというコンポーネントを使って入力した文字列を画面に表示させてみようと思います．
ソースコードは以下のようになります．以下で順を追って説明していきます．
なお，今回はスタイルのことは流します．

App.js

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

type Props = {};
export default class App extends Component<Props> {

  constructor() {
    super()
    this.state = ({
      dispString: ""
    })
    this.changeText = this.changeText.bind(this)
  }

  changeText(text) {
    this.setState({
      dispString: texta
    })
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput onChangeText={this.changeText} placeholder="aaa"/>
        <Text>{this.state.dispString}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

上から順に説明していきます．
流れとしては，以下のようになっています

1. stateに空の文字列を持たせる(あとで画面に表示させる文字列)
2. TextInputコンポーネントでユーザの文字入力を取得
3. TextInputコンポーネントの持っているメソッドでonChangeTextによって入力時に随時stateを書き換え
4. Textコンポーネントに変数をレンダリングして文字列を表示

onChangeTextでは入力された文字列が引数にくるのでtextで受け取ってそのままstateに渡してます．

Viewコンポーネントはhtmlでいうdivタグのような役割を果たします．スタイルはテキトーに中央寄せを指定しています．

ざっと簡単にカスタムしましたが，まだ用意されているコンポーネントの1%も使えてないので次回からもっと登場人物が増えます！