React Native从零到一搭建开发环境
ReactNative环境搭建
- 安装Homebrew
- 安装rvm
- 安装nvm
- 安装node
- 安装react-native-cli
- 安装watchman
iOS
- 安装xcode
- 安装ruby
- 安装cocoaPods
Android
- 安装jdk
- 安装 Android Studio
1、Xcode
直接在App Store下载即可
2、RVM
安装命令：
$ curl -L https://get.rvm.io | bash -s stable
注意： 安装RVM前需要你先安装好Xcode环境
期间可能会问你sudo管理员密码，以及自动通过homebrew安装依赖包，等待一段时间后就可以成功安装好RVM
载入RVM环境（新开 Termal 就不用这么做了，会自动重新载入的）
$ source ~/.rvm/scripts/rvm
检查一下是否安装正确
$ rvm -v
2.1 用RVM安装Ruby环境
列出已知的ruby版本
$ rvm list known
可以选择现有的rvm版本来进行安装（下面以ruby 2.3.3版本的安装为例）
$ rvm install 2.3.3
等待下载，编译过程，完成以后，Ruby, Ruby Gems 就安装好了
注意： 如果之前没有安装过Homebrew, 则上面的安装命令 rvm install xxx 会自动帮忙安装Homebrew
2.2Ruby版本设置
将该版本的Ruby设置为系统默认版本
$ rvm 2.3.3 --default
这个时候你可以测试是否正确
img
2.3替换源
Ruby的默认源使用的是cocoapods.org，国内访问这个网址有时候会有问题，网上的一种解决方案是将远替换成淘宝的，替换方式如下：
$ gem source -r https://rubygems.org/
$ gem source -a https://ruby.taobao.org
想验证是否替换成功了，可以执行：
$ gem sources -l
替换成功后的输出结果：
CURRENT SOURCES
http://ruby.taobao.org/
到这里就已经把Ruby环境安装成功
3、cocoaPods
安装命令：
$ sudo gem install -n /usr/local/bin cocoapods
当显示下面的 gems installed 再进行下一步操作
img
当上一步安装成功后，在终端中输入如下命令：
$ pod setup
这个过程可能比较漫长，需要20+分钟的时间，需要耐心的等待安装完成，当出现Setup completed的时候说明pod已经安装成功了，后面就可以使用pod了
CocoaPods的使用
我们输入下面的命令来尝试搜索一个三方库试试能否搜索出结果：
$ pod search AFNetworking
当出现下面的结果表示我们安装的pod是可以正常使用了
img
4、Homebrew
Homebrew是Mac OSX上的软件包管理工具，能在Mac中方便的安装软件或者卸载软件，相当于linux下的apt-get、yum神器；Homebre可以在Mac上安装一些OS X没有的UNIX工具，Homebrew将这些工具统统安装到了 /usr/local/Cellar 目录中，并在 /usr/local/bin 中创建符号链接
安装命令：
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
卸载命令：
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"
当显示 Installation successful 表示安装成功
img
brew如何使用
- 安装软件，如：
$ brew install oclint - 卸载软件，如：
$ brew uninstall oclint - 搜索软件，如：
$ brew search oclint - 更新软件，如：
$ brew upgrade oclint - 查看安装列表， 如：
$ brew list - 更新Homebrew，如：
$ brew update
5、nvm
目前主流的node版本管理工具有两种，nvm和n，下面我们就以nvm来管理我的node
5.1 安装
安装命令：
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash
下载完成后nvm就被安装在了~/.nvm下
5. 2设置环境变量
- 如果你也使用了zsh的话，就需要在~/.zshrc这个配置文件中配置
- 如果使用brew安装的nvm，需要在 ~/.bashrc文件中修改
- 否则就找找看/.bash_profile或者/.profile中修改
打开 ~/.zshrc
$ open $HOME/ .zshrc
在最后一行加上下面两行代码
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
这一步的作用是每次新打开一个bash，nvm都会被自动添加到环境变量中了
完成后输入下面命令重新启动一下配置
$ source ~/.zshrc
终端输入nvm可以看到如下信息，即表示nvm安装成功：
$ nvm
img
6、node
这里安装nodejs我们建议使用nvm来安装和管理node版本
使用nvm ls-remote查看一下有哪些node版本可以被安装
$ nvm ls-remote
img
安装node，现在我们以8.9.4的版本号为例，目前weex中使用的也是8.9.4版本
$ nvm install v8.9.4
通过nvm ls命令查看当前已安装好的所有node版本，这里我安装了两个node版本，一个6.5.0，一个8.9.4，这两个版本号后面可以任意切换使用
$ nvm ls
img
接下来我们可以使用nvm use <version>来切换node版本
$ nvm use v8.9.4
img
注意：这时如果你新打开一个bash，输入nvm current会发现显示为null，这是因为使用nvm use命令只会在当前bash里生效，重新打开一个bash你会发现$PATH的值已经不包含刚才的node目录了，要解决这个问题也很简单，使用nvm alias default <version>命令来指定一个默认的node版本就行了，这里我使用了v8.9.4作为默认版本：
$ nvm alias default v8.9.4
img
到此，node环境就搭建完毕了
7、react-native-cli
全局安装react-native 指令
安装命令：
$ npm install -g yarn react-native-cli
8、Watchman
安装命令：
$ brew install watchman
9、JDK
去JDK官网下载安装即可
img
10、android Studio
Android开发工具，直接网上下载即可
创建项目
初始化创建一个项目并运行项目分两步：
- 创建项目
- 运行项目
10.1 创建项目
React Native 创建项目非常简单，我们只需要输入下面的命令即可创建一个React Native 项目
$ react-native init ReactNativeDemo
10.2 运行项目
运行项目也有两种方式：
$ react-native run-ios$ npm start
10.2.1 react-native run-ios
等项目创建完成后，我们执行 cd ReactNativeDemo 进入到项目根目录(有packjson文件的目录即为项目根目录)，然后执行下面的命令即可开启一个npm 服务并启动模拟器运行iOS平台项目
$ react-native run-ios
项目运行成功效果如图：
img
10.2.2 npm start
当然，我们也可以先开启一个npm服务，先执行$ cd ReactNativeDemo 进入项目根目录，然后执行 $ npm start 命令来开启一个npm 服务
npm 服务启动成功如下图：
img
服务启动成功后，我们打开Xcode工程，直接运行模拟器即可
img
运行成功效果图：
img
福利时间
- 作者React Native开源项目OneM地址(按照企业开发标准搭建框架完成开发的)：https://github.com/guangqiang-liu/OneM：欢迎小伙伴们 star
- 作者简书主页：包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 欢迎小伙伴们：多多关注，多多点赞
- 作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
- 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢大家支持！
