简介

官方链接：http://facebook.github.io/react-native/

搭建开发环境

Homebrew

Homebrew 是MacOS的包管理器，用于安装Nodejs和其他工具包。我们将使用Homebrew来安装Nodejs，安装命令：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

如果在安装过程中提示/usr/local目录权限不可写时，使用以下命令修复：

sudo chown -R 'whoami' /usr/local

Node

使用Homebrew安装Nodejs：

brew install node

React Native Cli

Yarn 是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。Node自带npm，我们使用npm来安装：

npm install -g yarn react-native-cli

如果遇到类似EACCES: permission denied的权限问题，参考以上安装Homebrew时目录权限问题解决方法：

sudo chown -R 'whoami' /usr/local

安装好yarn后就可以使用yarn代替npm了，例如用yarn代替npm install命令，使用yarn add 第三方库名代替npm install --save 第三方库名。

创建应用程序

使用React Native命令行创建工程HelloWorld：

react-native init HelloWorld

生成的目录结构如下：

.
├── App.js
├── android                    // android工程文件夹
│   ├── app
│   ├── build.gradle
│   ├── gradle
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── keystores
│   └── settings.gradle
├── app.json
├── index.js                  // 项目入口文件
├── ios                       // iOS工程文件夹，可以直接用xcode打开
│   ├── Build
│   ├── HelloWorld
│   ├── HelloWorld-tvOS
│   ├── HelloWorld-tvOSTests
│   ├── HelloWorld.xcodeproj
│   ├── HelloWorldTests
│   └── Index
├── node_modules             // 依赖模块，包含官方和第三方
├── package.json             // 工程信息
└── yarn.lock

默认是使用React Native最新版本，如果要使用其他版本，可以在命令后使用--version参数，例如react-native init HelloWorld --version 0.51。

切换到工程目录，使用react-native run-ios运行。

cd HelloWorld
react-native run-ios

我在测试时无法正常运行，出现以下提示信息：

xcrun: error: unable to find utility "instruments", not a developer tool or in PATH

Command failed: xcrun instruments -s
xcrun: error: unable to find utility "instruments", not a developer tool or in PATH

解决方法是在终端执行以下命令：

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/

或者直接用Xcode打开工程目录的ios文件夹的Xcode项目，然后按Command+R运行,成功运行后ios模拟器显示如下：

这样就完成了第一个React Native应用。

参考

http://facebook.github.io/react-native/docs/getting-started.html