背景
React Native(以后简称RN）是Facebook2015年4月开源的跨平台移动应用框架。口号是：Learn once，write anywhere. 主要使用JavaScript、React、ES6、JSX等语法，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
特性
优点
1.跨平台
2.热更新
3.代码复用
4.节省开发人力
4.……etc.缺点
1.学习成本
2.安装包大
3.首次运行耗时
4.……ect.说那些都没用，就问你要不要用吧
开始干吧
1.搭建环境
安装Homebrew
Homebrew是Mac下的系统安装包工具，相信很多iOS开发同学都已经装过这个了，装过的可以跳过此步。没有的使用下面代码就行
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
其中如果碰到读写权限问题可以修改权限之后重新安装
sudo chown -R`whoami`/usr/local
安装Node
使用Homebrew安装Node.js，安装最新版就完了
brew install node
使用过Cocoapods的同学都知道在安装完之后要修改下镜像地址的，至于为啥相信大家心里都有点B数的。同样Node也需要
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
安装Yarn、react-native-cli
Yarn是Facebook提供的替代npm的工具用来加速node下载。react-native-cli是RN的命令行工具，主要执行创建、初始化、更新、运行、打包等任务。
npm install -g yarn react-native-cli
当然大家都懂的
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
Xcode
这玩意相信大家都有安装了，有一点就是需要8.0及以上版本。大家可以去App Store下载安装最新版的使用。最好不要去其他三方地方下载，去年那一拨ghost相信大家也都知道。
到这里必须工具基本安装完了，足够进行开发了。但是本着简单省力的原则还是安装下面这些：
2.推荐安装
Watchman
Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。
一句话就是：开发的时候，修改代码之后不用重新编译运行整个程序了，只需要cmd+R就可以马上刷新了。没错，就是有这种操作。
安装最新版watchman:
brew install watchman
Webstorm
Webstorm,装这个干嘛？当然是用来编写RN了！什么，用Xcode？额。。。你还可以用txt。
Webstorm是收费软件，大家可以支持正版，也可以***，恩恩。
3.测试项目
构建项目
我们需要利用命令来创建项目，并不是传统的利用XCode直接创建
首先命令进入到目标文件夹，我们假如工程放在首页
cd ~/Desktop
然后就可以执行RN命令了
react-native init RNProj注：首次有可能会比较慢，还是耐心等吧，毕竟我们都得用到新版本。
react-native init RNProj
react-native init RNProj结果
这里RN项目就创建成功了，文件结构如下：
RN项目目录结构
运行项目
从上图
react-native init RNProj结果中可以看到要运行对应的项目可以有两种方式：
- 命令运行
cd /Users/xxx/Desktop/RNProj也就是cd到RN项目文件夹
react-native run-ios运行RN项目的iOS版本- 直接到RN项目文件夹->iOS->xxx.xcodeproj，用XCode打开像传统的运行一样点击RUN按钮就可以
首次运行会比较慢，可以通过命令行看到都进行了哪些操作
运行成功后会另打开一个终端窗口来运行packager在8081端口，如下：
packager window.png
iOS模拟器会启动并运行，显示如下：
首次运行RN-iOS.png
Hello World
选择自己稀罕的IDE打开
index.ios.js文件：
index.ios.js内容截图.js内容截图
图中标注部分与模拟器上显示内容对应。那我们就在这个基础上对其进行修改。
- 首先我们需要为
Hello World定制一个Style。在index.ios.js文件下部分的styles里面添加：hello: { fontSize: 30, textAlign: 'center', margin: 20, marginBottom: 50, color: '#54FF54', },
- 然后我们在上面截图位置添加：
<Text style={styles.hello}> Hello Wrold! </Text>Hello World 修改
- 最后我们选择iOS模拟器，
cmd + Rbingo！模拟器就刷新啦，显示结果如下：
Hello World 运行惊不惊喜，刺不刺激，意不意外
注：我们可以在选择iOS模拟器时使用
cmd + D来打开开发者界面进行Reload等操作
开发者界面
真机调试
除了在XCode中进行正常的
Bundle identifier、Version、Provisioning Profile、Certificate等配置之外，需要以下操作：
- 设备必须通过USB连接电脑
- 设备和电脑处于同一WiFi网络
- XCode选择设备，点击运行按钮即可
如果你需要在真机上启用调试功能，则需要打开RCTWebSocketExecutor.m文件(位置RNProj/node_modules/react-native/Libraries/WebSocket/RCTWebSocketExecutor.m)，然后将其中的"localhost"改为你的电脑的IP地址，最后启用开发者菜单中的"Debug JS Remotely"选项。
完事
到这里我们已经成功的创建了一个基于RN的工程，并实现了运行，修改。后续会继续跟进RN的持续开发。
