React Nativeの基本事項

React Nativeの基本的な事柄です。

基本の基本

プロジェクトを新規作成して起動します

react-native init hogehoge
cd hogehoge
npm install
react-native run-ios

Hello, World

React Nativeにおける描画の基本単位はコンポーネントです。 アプリケーションは、最も単純には、Viewコンポーネントを作成して登録することです。

HelloWorldという名前のアプリケーションを作成して、画面に”Hello, World!”と表示するには、例えばindex.ios.jsに以下のようにします。

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

class HelloWorld extends Component {
  render() {
    return (
      <View>
        <Text>Hello, World!</Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

なお、アプリケーション名はプロジェクトのルートディレクトリにあるapp.jsonに定義されています。

画面にいろいろ表示する

文字

文字を表示するには上にも見た通り、<Text>タグを利用します。

画像

画像を表示するには<Image>タグを利用します。

サンプル

class Sample1 extends Component {
  render() {
    return (
      <View>
        <Text>Text tag is used to show text</Text>
        <Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}} style={{width: 193, height: 110}}/>
      </View>
    );
  }
}

　コンポーネントを作る

自作のコンポーネントを作ることで画面部品を再利用することができます。 以下の例からわかるように、コンポーネントを継承したクラスの名前をそのままタグ名にすることで呼び出しが可能になります。

サンプル

class BananaImage extends Component {
  render() {
    return (
      <Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}} style={{width: 193, height: 110}}/>
    )
  }
}

class Sample2 extends Component {
  render() {
    return (
      <View>
        <Text>Text tag is used to show text</Text>
        <BananaImage />
      </View>
    );
  }
}

フォーム要素を利用する

例えば、入力欄は<TextInput>タグを利用して作ることが可能です。

class Sample3 extends Component {
  render() {
    return (
      <View>
        <TextInput style={{height: 40}} placeholder="Type here!" />
      </View>
    );
  }
}

複雑な設定

スタイルの調整

コンポーネントの見た目は、Stylesheetという疑似CSSによって調整されます。 詳しくは、Styleを参照。

スクロールするビュー

画面内でスクロールさせるには、<ScrollView>タグを利用します。

class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
  render() {
      return (
        <ScrollView>
          <Text style={{fontSize:96}}>Scroll me plz</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>If you like</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>Scrolling down</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>Whats the best</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>Framework around?</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:80}}>React Native</Text>
        </ScrollView>
    );
  }
}

上のサンプルのように、ローカルに保持する画像を表示する場合には、requireを利用します。 画像の格納場所は任意ですが、相対パスはそれが記述されているjsファイルからの相対パスになります。

リストビュー

リストビューは、<ListView>タグで配置できます。格納されるデータは、ListView.DataSourceとして定義した上で与えることになります。

class ListViewBasics2 extends Component {
  render() {
    let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

    return (
      <View style={{flex: 1, paddingTop: 22}}>
        <ListView
          dataSource={
            ds.cloneWithRows([ 'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin' ])
          }
          renderRow={(rowData) => <Text>{rowData}</Text>} />
      </View>
    );
  }
}

その他

この辺の書き方については、概ねReactを踏襲しているので、Reactを勉強するのが近道かもしれません。 Reactについては、例えば、5分で理解する React.js – Qiitaとかがわかりやすいですね。 また、React Nativeそのものが吸収してくれるハードウェアの違いは主としてUI部品に関して（しかもその一部だけ）なので、データの永続化のやり方などについては別途考察が必要になります。例えばReact Nativeにおけるローカルデータベースの考察 | Waza Labという記事もありますね。

参考

• Tutorial
• 5分で理解する React.js – Qiita