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
作者简书主页：包含60多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5欢迎小伙伴们：多多关注，多多点赞
作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢大家支持！