使用React Native的记事本

2 年 ago
新, 韵
1 minute

使用React Native(http://facebook.github.io/react-native/)时的一些备忘录。
我知道可能已经有类似的文章了，但这只是为了自己参考。
会不断更新。

React Native 反应性原生

    • JavaScriptとReactでNativeアプリの開発・ビルドができるフレームワーク

 

    • learn once, write anywhere.

 

    要するにReact知っていればどのプラットフォームでの開発も効率的にできるようになるよーってこと(だと思う)

开始的方法 de

请参考这个链接：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重新加载。

本地iOS组件

可以使用类似UITabBar这样的iOS原生组件。

例如，当使用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>
    );
  }
});
screenshot_react.png

我想要把它们都一起读

 

bannerAds