最近在学习React Native相关知识，写下这篇文章记录如何在Mac上搭建基于Atom + Nuclide的React Native的开发环境，以及需要用到的工具。
必须安装软件
-
Homebrew - Mac系统的包管理器
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
如果安装过程中，遇到
/usr/local目录不可写的权限问题。可以使用下面命令修复:
sudo chown -R `username` /usr/local
-
Node.js - React Native需要NodeJS 5.0或更高版本。
brew install node
因为国内环境的问题，node安装完成后建议配置npm镜像以提高下载安装速度(或者使用梯子上网)。设置镜像命令如下：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
-
Yarn - 一款用于替代npm的工具。
react-native-cli - React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
npm install -g yarn react-native-cli
设置Yarn镜像
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
iOS开发环境搭建
Xcode - 苹果提供的用于进行包括iOS、MacOS、WatchOS等开发的IDE，可以通过App Store下载;
注意
Xcode安装完成后，检查一下Command Line Tools命令行工具是否安装成功。方法：启动Xcode，并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。
Android开发环境搭建
Android Studio 需要JDK1.8或者更高的版本，首先确保本地JDK版本正确，如果版本不符合要求可以到官网下载安装。
- 安装Android Studio(PS:因为补寄原因无法截图)
. 在安装面板中选择custom
. 然后勾选Performance和Android Virtual Device
. 安装完成后打开Android Studio，在Welcome面板右下角选择Configure | SDK Manager
. 在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDKPlatform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
. 在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须是这个版本）。然后还要勾选最底部的Android Support Repository.
. ANDROID_HOME环境变量设置
vi ~/.bash_profile
# 这里是SDK存储路径
export ANDROID_HOME=~/Library/Android/sdk
source ~/.bash_profile
配置完成后，可以使用echo $ANDROID_HOME检查环境变量是否配置成功
IDE安装(Atom + Nuclide)
注意：
Atom和Nuclide的官网都需要科学上网访问
-
安装Atom
下载地址 ,下载完成后直接双击安装即可。 -
安装Nuclide
未安装Nuclide前的Atom界面如下：
这里，我们通过Atom图形界面进行安装。
点击菜单栏：Atom->Preferences,或者可以”Command+,”快捷打开。
然后，在Install Packets的输入框中，输入nuclide，出现的第一个就是我们想要安装的，点击install。
默认安装nuclide之后，会安装一大堆的依赖包，下图是安装完成后的页面。
可以看到，红色部分是额外的Toolbar可以快捷打开一些选项，小的红色框里多了一个Nuclide选项。
如果没有默认安装这些依赖包，可以选中,Packages->Settings View->Manage Packets：
然后，搜索nuclide，再nuclide package上双击，进入设置：
勾选Install recommended packets on startup
退出Atom，再打开，会发现自动安装这些依赖包。
以上基于Atom + Nuclide的开发环境搭建完成，下面我们可以新建一个工程验证是否安装正常。
- 用react-native-cli的
init命令创建一个工程(PS:这里时间稍微有点长)
react-native init AwesomeProject - 运行iOS工程
cd AwesomeProject/
react-native run-ios
网友评论