React Native 开发环境部署

一、准备

npm 设置

因为环境部署涉及非常多的包安装，而国内的 npm 速度并不理想，所以建议安装 nrm 选择最快的 npm 国内镜像，推荐 taobao，虽然设置了国内镜像但有时候还是需要配合 VPN。

npm install -g nrm
nrm ls
nrm use taobaouse taobao

二、Android 配置步骤

1、安装配置 SDK

1. 安装最新的 JDK
2. 安装 Android SDK
3. 修改环境变量 .bash_rc、.bash_profile export ANDROID_HOME=<sdk目录>/android-sdk
4. 在终端中运行 android 开启 Android SDK Manager 
   为了加快下载速建议设置下 Android SDK Manager 的代理： 
   这里选用的是东软：mirrors.neusoft.edu.cn，端口80，注意勾选使用 http 协议 

   

5. 安装以下包： 

   

    

   

2、配置 Android 模拟器

上步的包安装已经包含了模拟器，所以这里只用进行写设置

A、配置 HAXM

HAXM 是基于 Intel(R) Virtualization Technology (VT) 的硬件加速，可以在/extras/intel/Hardware_Accelerated_Execution_Manager/IntelHAXM.dmg 目录中找到安装包进行安装。

安装完成后在终端执行 kextstat | grep intel 命令，成功的话会看到以下信息：

<span style="color:#008080">com.intel.kext.intelhaxm</span>

B、启动模拟器

在终端中执行 android avd 命令，点击 Create… 新建一个模拟器；

注意勾选 Use host GPU。

完成后点击 Start… 即可启动 Android 模拟器。

3、构建一个 react-native 应用

安装 react-native-cli， npm install -g react-native-cli 
初始化应用， react-native init flipped 
初始化完成后会生成这样一个目录结构：

4、运行、修改 Android 应用

使用终端在初始化的目录中执行命令 react-native run-android ，即可安装并启动 React Native 应用。

修改 index.android.js，在模拟器中点击 F2 调出菜单，Reload JS 就可以看到修改效果了。

如果在遇到以下类似错误，请核对 SDK Manager 中的包是否安装完整。

Gradle Build Android Project “Could not resolve all dependencies” error…Could not resolve all dependencies for configuration ‘:app:_debugCompile’…

至此，Android 配置就已经完成。

三、 iOS 配置步骤

1、环境配置

iOS 安装步骤相对简单一些：

1. 安装 Xcode 6.3 或更高版本；
2. 安装 Homebrew 包管理器，方便之后安装 nvm、watchman、flow；
3. 安装 Node.js 4.0 或更高版本的 node；
4. 安装 watchman 文件监视器， brew install watchman （可选）；
5. 安装 flow 静态检查工具， brew install flow （可选）；
6. 最后更新下本机的所有包， brew update && brew upgrade （可选）。

2、构建一个 react-native 应用

同 Android 一致：

安装 react-native-cli，  npm install -g react-native-cli 

初始化应用， react-native init flipped

3、启动、修改 iOS 应用

通过 Xcode 打开 ios/flippedProject.xcodeproj 文件并执行运行

在编辑器中修改 index.ios.js，然后在 iOS 模拟器中点击 ⌘-R 进行刷新：

4、可能遇到的问题

A、环境：

OS X  Yosemite 10.10.5 (14F27)

Xcode 7.0 (7A220)

react-native: master

B、错误：

warning is not a function. (In \’warning(\n!customBubblingEventTypes[directTypeName], \n\’Event cannot be both direct and bubbling: %s\’, \ndirectTypeName)\’, \’warning\’ is an instance of Object)’

从报错信息看就是缺少 warning 包，Github 中有人曝出了同样的问题 issues 2234

C、解决方法：

回复中提供了几种解决方法：

• 升级 Node 版本到 4.0 或更高版本（无效）
• 删除 node_modules/react-native/node_modules/react-tools/docs/js/react.js 文件（有效）

• 手动安装 warning 包，进入 /node_modules/react-native 目录执行 npm install warning（无效）

延伸阅读

---

▶ Walkthrough007