本文以Mac环境搭建React Native环境
一、必须的软件
Homebrew
Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
在Max OS X 10.11（El Capitan)版本中，homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复：
sudo chown -R `whoami` /usr/local
Node
使用Homebrew来安装Node.js.React Native目前需要NodeJS 5.0或更高版本。Homebrew默认安装的是最新版本，一般都满足要求。
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、React Native的命令行工具（react-native-cli）
Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。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
如果你看到EACCES: permission denied这样的权限报错，那么请参照上文的homebrew译注，修复/usr/local目录的所有权：
sudo chown -R `whoami` /usr/local
Xcode -- 运行iOS程序
React Native目前需要Xcode 8.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。
Android Studio -- 运行Android程序
React Native目前需要Android Studio2.0或更高版本。
Android Studio需要Java Development Kit [JDK] 1.8或更高版本。你可以在命令行中输入
javac -version
来查看你当前安装的JDK版本。如果版本不合要求，则可以到官网上下载。
Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。
除非特别注明，请不要改动安装过程中的选项。比如Android Studio默认安装了 Android Support Repository，而这也是React Native必须的（否则在react-native run-android时会报appcompat-v7包找不到的错误）。
安装过程中有一些需要改动的选项：
选择Custom选项：
图片.png
勾选Performance和Android Virtual Device
图片.png
安装完成后，在Android Studio的启动欢迎界面中选择Configure | SDK Manager。
图片.png
在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
图片.png
在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须是这个版本）。然后还要勾选最底部的Android Support Repository.
图片.png
ANDROID_HOME环境变量
确保ANDROID_HOME
环境变量正确地指向了你安装的Android SDK的路径。具体的做法是把下面的命令加入到~/.bash_profile
文件中：(译注：~表示用户目录，即/Users/你的用户名/
，而小数点开头的文件在Finder中是隐藏的，并且这个文件有可能并不存在。请在终端下使用vi ~/.bash_profile
命令创建或编辑。如不熟悉vi操作，请点击这里学习）
# 如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚。
export ANDROID_HOME=~/Library/Android/sdk
然后使用下列命令使其立即生效（否则重启后才生效）：
source ~/.bash_profile
可以使用echo $ANDROID_HOME检查此变量是否已正确设置。
二、推荐的安装工具
Watchman
Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。
brew install watchman
如果之前安装了watchman,建议更新到最新版本
brew upgrade watchman
Flow
Flow是一个静态的JS类型检查工具。
brew install flow
如果之前安装了flow,建议更新到最新版本
brew upgrade flow
Nuclide
Nuclide（此链接需要科学上网）是由Facebook提供的基于atom的集成开发环境，可用于编写、运行和调试React Native应用。
点击这里阅读Nuclide的入门文档。更推荐使用WebStorm或Sublime Text来编写React Native应用。
使用Nuclide，有以下几个作用：
（1）配合flow进行静态语法检查，自动补全
（2）方便的debug
（3）进行版本控制，方便diff
（4）iOS模拟器Log
Atom
Atom也是一款推荐使用的IDE，如果习惯WebStorm或Sublime Text，这部分可以忽略
在Atom中安装Nuclide
点击菜单栏：Atom->Preferences,或者可以”Command+,”快捷打开
然后，在Install Packets的输入框中，输入nuclide，出现的第一个就是我们想要安装的，点击install
图片.png
默认安装nuclide之后，会安装一大堆的依赖包，安装完成后
图片.png
安装完成
图片.png
可以看到，红色部分是额外的Toolbar可以快捷打开一些选项，小的红色框里多了一个nuclide选项。
如果没有默认安装这些依赖包，可以选中,Packages->Settings View->Manage Packets
图片.png
然后，搜索nuclide，再nuclide package上双击，进入设置
图片.png
勾选Install recommended packets on startup
图片.png
退出Atom，再打开，会发现自动安装这些依赖包
Atom IDE下在Nuclide运行项目
第一步，运行react native packager
点击 command + shift + p打开command palette（打开终端选项），然后输入react native start
图片.png
然后，选择
Nuclide React Native :Start packager
第二步，终端运行项目
cd到项目目录，执行
react-native run-ios
react-native run-android
Atom IDE下在Nuclide中调试
执行完上面一步后，你应该会看到这样的模拟器界面
图片.png
然后，在Nuclide中，点击 command + shift + p打开command palette（打开终端选项），输入react native debug
图片.png
接着，点击模拟器，Command+D，选择Enable Remote JS debugging
图片.png
这时候，你会看到，Nuclide中，加载了debug窗口
图片.png
Element Inspector
像网页调试，你可以再浏览器里动态修改网页的HTML代码，在React Native中调试你也可以
Command + shift + p然后打开如下图
图片.png
接着，你就会发现像HTML的Element Inspector出现了，你可以看到视图的布局和对应的属性
图片.png
将Android SDK的Tools目录添加到PATH变量中
你可以把Android SDK的tools和platform-tools目录添加到PATH变量中，以便在终端中运行一些Android工具，例如android avd或是adb logcat等。具体做法仍然是在~/.bash_profile中添加：
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
Git
Git版本控制。如果你已经安装过Xcode，则Git也已经一并安装了。如若没有，则使用下列命令安装：
Genymotion
比起Android Studio自带的原装模拟器，Genymotion是一个性能更好的选择，但它只对个人用户免费
(1)下载和安装Genymotion（genymotion需要依赖VirtualBox虚拟机，下载选项中提供了包含VirtualBox和不包含的选项，请按需选择）。
(2)打开Genymotion。如果你还没有安装VirtualBox，则此时会提示你安装。
(3)创建一个新模拟器并启动。
(4)启动React Native应用后，可以按下⌘+M来打开开发者菜单。
Gradle Daemon
开启Gradle Daemon可以极大地提升java代码的增量编译速度。
touch ~/.gradle/gradle.properties && echo "org.gradle.daemon=true" >> ~/.gradle/gradle.properties
三、本人配置过程中遇到的问题
（1）node的版本太低,运行以下命令更新
sudo npm cache clean -f
sudo npm install -g n
sudo n stable
（2）Flow安装出问题
在Atom中安装Nuclide之后应该能够有代码提示和报错检测，但是安装好之后并在Demo实例中写上错误代码发现Atom并没有提示错误，重新将flow更新到最新版本
brew upgrade flow
之后，命令行显示
error:flow 0.44.0 already installed, it's just not linked.
也就是说nuclide根本没有连上flow 这时候在Atom中的Nuclide中先将flow的位置填上
命令行拿到flow的位置
which flow
显示位置
/usr/local/bin/flow
配置路径.png
查看项目中引入reactnative依赖的flow版本发现是0.42.0版本
图片.png
而通过命令行发现更新到的最新版的flow是0.46.0
查看安装的flow版本
brew info flow
显示
flow: stable 0.46.0 （bottled）,HEAD
也就是说安装的flow版本比项目中的flow版本要高，因此要保证安装的flow版本和项目中的flow版本一致，这样的话就需要对flow版本进行降低版本
npm install flow-bin@0.42 -g
图片.png
这样就设置好了 Atom重新启动这时候就有了代码检测
图片.png
四、注意事项
1、需要注意的点
（1）当程序运行起来之后是在RN的本地服务器上运行起来的
（2）当运行安卓程序的时候，安装Android Studio之前先要安装JDK
（3）genymotion也是用来跑安卓程序的，是国外网站提供的一个模拟器，安装之前需要先安装一个虚拟机，就是下图中的VirtualBox
图片.png
图片.png
2、React Native更新是非常快的，因此需要管理React Native库的版本
（1）查看本地的React Native的版本：命令行输入
react-native --version
（2）更新本地的React Native的版本: 命令行输入
npm update -g react-native-cli
（3） 查询react-native的npm包最新版本
NPM的全称是Node Package Manager ，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。命令行查询
npm info react-native
（4）升级或者降级npm包的版本
npm install --save react-native@0.18
（5）更新项目templates文件（可选）
新的npm包会包含更新在运行react-native init命令生成的一些动态文件，例如init创建项目的时候会生成iOS和Android的子项目，我们可以通过以下的命令进行获取最新的代码：命令行查询
react-native upgrade
3、WebStom设置React Native代码提示
(1) 从gitHub上下载xml插件
git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
(2) 安装
将ReactNative.xml复制到 ~/Library/Preferences/WebStorm10/templates ，然后重启 WebStrom。
网友评论