React Nativeのメモ

9078 ワード
React JavaScript JavaScript テキストリンク

React Native(http://facebook.github.io/react-native/) を触ってみた時のメモ。
似たような記事はあると思うが、あくまでも自分用。
随時更新。

React Native

  • JavaScriptとReactでNativeアプリの開発・ビルドができるフレームワーク
  • learn once, write anywhere.
    • 要するにReact知っていればどのプラットフォームでの開発も効率的にできるようになるよーってこと(だと思う)

はじめ方

http://facebook.github.io/react-native/docs/getting-started.html　
を参照してね

必要な物はMacでXcodeが動いている必要があること(iOSの開発だから当然)
あとhomebrew とかで node.jsとflowをいれておく
あとは

$ npm install -g react-native-cli
$ react-native init hello

みたいにやってXcodeのプロジェクトを生成し、
XCodeを開いてcmd+R で実行。
index.io.jsを編集したら Cmd+Rでリロードできる

Native iOS Components

UITabBarのようなiOSのNativeコンポーネントも使える

例えばTabBarを使った時はこんな感じ

var hello = React.createClass({
  getInitialState: function() {
      return {
          selectedTab: 'hello'
      };
  },
  render: function() {
    return (
      <TabBarIOS selectedTab={this.state.selectedTab}>
        <TabBarIOS.Item 
          name="Hello" 
          selected={this.state.selectedTab === 'hello'} 
          icon={{uri:'favorites'}} 
          onPress={() => {
              this.setState({
                  selectedTab: 'hello',
              });
          }}>
          <View style={styles.container}>
            <Text style={styles.welcome}>
              Hello World.
            </Text>
          </View>
        </TabBarIOS.Item>
        <TabBarIOS.Item 
          name="top" 
          selected={this.state.selectedTab === 'top'}  
          icon={{uri:'favorites'}}
            onPress={() => {
                this.setState({
                    selectedTab: 'top',
                });
            }}>
          <View style={styles.container}>
            <Text style={styles.welcome}>
               Welcome to React Native!
            </Text>
            <Text style={styles.instructions}>
               To get started, edit index.ios.js{'\n'}
               Press Cmd+R to reload
            </Text>
          </View>
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  }
});

合わせて読みたい

JSオブジェクト
Dockerはlinuxシステムのインストールをインストールします(自分でテストして検証しました)