本文以mac环境为例，快速搭建react执行环境：

前置条件：

node

xcode

我使用的环境为:

$node -vv6.11.2$xcodebuild -versionXcode 9.0Build version 9A235复制代码

准备环境

如果这些都有了，那么执行如下命令：

brew install yarnyarn global add create-react-native-appyarn add  watchmancreate-react-native-app AwesomeProjectcd AwesomeProjectyarn run ios复制代码

官方文档中，使用了npm（而不是yarn），但是，我跑不起来。

然后可以看到模拟器运行起来。现在修改下工程目录下的app.js,保存后刷新下模拟器，就可以看到效果。

今天发现还有更加简单的方法，补充 2017年11月28日:

yarn global add react-native-clireact-native init myprojectcd myproject复制代码

打开目录内的xcode工程，修改bundle name，保证可以编译，然后按cmd+R运行。

因为有很多依赖工程，并且还有构建脚本，所以需要漫长的等待。税后，可以看到应用启动完毕。可以修改app.js文件，然后模拟器内直径按cmd+R查看修改效果。

发布

首先把编写好的js代码和资源文件打包：

mkdir release_ios/react-native bundle --entry-file App.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/复制代码

可以看到release_ios/目录内有新创建的文件。这些文件会作为资源放入xcode project，和其他一般的iOS应用一样，发布此产品到模拟器，手机和App Store即可。工程就是使用react-native init 创建的工程。

快速参考

显示图片：

import React from 'react';import {AppRegistry, Image } from 'react-native';export default class App extends React.Component {    render() {      let pic = {        uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'      };      return (              );    }复制代码

}

自定义组件：

import React, { Component } from 'react';import {Text, View } from 'react-native';class Greeting extends Component {  render() {    return (      
    
     Hello {this.props.name}!
        );  }}export default class LotsOfGreetings extends Component {  render() {    return (      
            
           
        );  }}复制代码

设置和使用状态：

import React, { Component } from 'react';import { AppRegistry, Text, View } from 'react-native';class Blink extends Component {  constructor(props) {    super(props);    this.state = {showText: true};    setInterval(() => {      this.setState(previousState => {        return { showText: !previousState.showText };      });    }, 1000);  }  render() {    let display = this.state.showText ? this.props.text : ' ';    return (      
    
     {display}
        );  }}export default class BlinkApp extends Component {  render() {    return (      
            
           
        );  }}复制代码

使用样式表：

import React, { Component } from 'react';import {StyleSheet, Text, View } from 'react-native';export default class LotsOfStyles extends Component {  render() {    return (      
            
     
      just bigblue
           
        );  }}const styles = StyleSheet.create({  bigblue: {    color: 'blue',    fontWeight: 'bold',    fontSize: 30,  }});});复制代码

使用flex排版：

import React, { Component } from 'react';import { AppRegistry, View } from 'react-native';export default class FlexDirectionBasics extends Component {  render() {    return (      // Try setting `flexDirection` to `column`.      
            
             
             
           
        );  }};复制代码

网络请求：

import React, { Component } from 'react';import { ActivityIndicator, ListView, Text, View } from 'react-native';export default class Movies extends Component {  constructor(props) {    super(props);    this.state = {      isLoading: true    }  }  componentDidMount() {    return fetch('https://facebook.github.io/react-native/movies.json')      .then((response) => response.json())      .then((responseJson) => {        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});        this.setState({          isLoading: false,          dataSource: ds.cloneWithRows(responseJson.movies),        }, function() {          // do something with new state        });      })      .catch((error) => {        console.error(error);      });  }  render() {    if (this.state.isLoading) {      return (        
              
             
          );    }    return (      
            
      
      
       {rowData.title}, {rowData.releaseYear}
      }        />      
     
        );  }}复制代码

文本输入和按钮联动：

import React, { Component } from 'react';import {Alert, Button, Text, TextInput, View } from 'react-native';export default class PizzaTranslator extends Component {  constructor(props) {    super(props);    this.state = {text: 'something to say you'};  }  render() {    return (      
            
     
       this.setState({text})}        />