从零到一搭建React Native开发环境

ReactNative环境搭建

• 安装Homebrew
• 安装rvm
• 安装nvm
• 安装node
• 安装react-native-cli
• 安装watchman

iOS

• 安装xcode
• 安装ruby
• 安装cocoaPods

Android

• 安装jdk
• 安装 Android Studio

一、Xcode

直接在App Store下载便可

二、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

这个时候你能够测试是否正确

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环境安装成功

三、cocoaPods

安装命令：

$ sudo gem install -n /usr/local/bin cocoapods

当显示下面的 gems installed 再进行下一步操做

当上一步安装成功后，在终端中输入以下命令：

$ pod setup

这个过程可能比较漫长，须要20+分钟的时间，须要耐心的等待安装完成，当出现Setup completed的时候说明pod已经安装成功了，后面就可使用pod了

CocoaPods的使用

咱们输入下面的命令来尝试搜索一个三方库试试可否搜索出结果：

$ pod search AFNetworking

当出现下面的结果表示咱们安装的pod是能够正常使用了

四、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 表示安装成功

brew如何使用

• 安装软件，如：$ brew install oclint
• 卸载软件，如：$ brew uninstall oclint
• 搜索软件，如：$ brew search oclint
• 更新软件，如：$ brew upgrade oclint
• 查看安装列表， 如：$ brew list
• 更新Homebrew，如：$ brew update

五、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

六、node

这里安装nodejs咱们建议使用nvm来安装和管理node版本

使用nvm ls-remote查看一下有哪些node版本能够被安装

$ nvm ls-remote

安装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

接下来咱们可使用nvm use <version>来切换node版本

$ nvm use v8.9.4

注意：这时若是你新打开一个bash，输入nvm current会发现显示为null，这是由于使用nvm use命令只会在当前bash里生效，从新打开一个bash你会发现$PATH的值已经不包含刚才的node目录了，要解决这个问题也很简单，使用nvm alias default <version>命令来指定一个默认的node版本就好了，这里我使用了v8.9.4做为默认版本：

$ nvm alias default v8.9.4

到此，node环境就搭建完毕了

七、react-native-cli

全局安装react-native 指令 安装命令：

$ npm install -g yarn react-native-cli

八、Watchman

安装命令：

$ brew install watchman

九、JDK

去JDK官网下载安装便可

官方下载地址

十、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

项目运行成功效果如图：

10.2.2 npm start

固然，咱们也能够先开启一个npm服务，先执行$ cd ReactNativeDemo 进入项目根目录，而后执行 $ npm start 命令来开启一个npm 服务

npm 服务启动成功以下图：

服务启动成功后，咱们打开Xcode工程，直接运行模拟器便可

运行成功效果图：

小福利

• 做者React Native开源项目OneM地址(按照企业开发标准搭建框架完成开发的)：github.com/guangqiang-…：欢迎小伙伴们 star
• 做者简书主页：包含60多篇RN开发相关的技术文章www.jianshu.com/u/023338566… 欢迎小伙伴们：多多关注，多多点赞
• 做者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
• 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也按期更新最新的RN学习资料给你们，谢谢你们支持！