React Native 开发环境部署

本文介绍内容包含 OSX 系统下 React Native 的 iOS、Android 开发环境部署,以及 Windows 环境下 Android 开发环境部署。并且会记录部署过程中遇到的问题和解决方法。

一、准备

npm 设置

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

npm install -g nrm
nrm ls
nrm use 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 协议
    a1
  5. 安装以下包:
    a2
    a3

2、配置 Android 模拟器

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

A、配置 HAXM

HAXM 是基于 Intel(R) Virtualization Technology (VT) 的硬件加速,可以在/extras/intel/Hardware_Accelerated_Execution_Manager/IntelHAXM.dmg目录中找到安装包进行安装。
安装完成后在终端执行kextstat | grep intel命令,成功的话会看到以下信息:

com.intel.kext.intelhaxm

B、启动模拟器

在终端中执行 android avd 命令,点击 Create… 新建一个模拟器;
a4
注意勾选 Use host GPU。

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

3、构建一个 react-native 应用

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

a5

4、运行、修改 Android 应用

使用终端在初始化的目录中执行命令 react-native run-android,即可安装并启动 React Native 应用。
a6
修改 index.android.js,在模拟器中点击 F2 调出菜单,Reload JS 就可以看到修改效果了。
a7

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

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

5、Android 真机调试 2015.09.21 更新

对于 Android 应用而言,在真机环境下调试往往更方便一些,设置也很简单:

  1. 通过 USB 链接手机;
  2. 在「系统设置」中进入「开发者选项」开启「USB 调试」,如果找不到开发者选项,一般在「关于本机」中点击「版本号」7次就会出现;
  3. 通过 react-native run-android 命令启动应用,应用会自动安装并启动;
  4. 启动后会显示 react native android failed to load JS bundle,需要摇动手机调出菜单(如果无法调出菜单,请检测应用是否有显示悬浮窗权限),选择Dev Settings > Debug server host for device,填入开发机的 ip 地址,最后刷新应用即可。

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

三、Windows 环境下搭建 React Native Android 开发环境 2015.09.22 更新

1、安装配置 SDK

与 OSX 一致,请参考上面的步骤。
不同点:Windows 下的环境变量配置,我的电脑属性》高级系统设置》高级》环境变量,在用户变量中添加:

ANDROID_HOME=<安装目录>\android-sdk-windows
PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

2、配置 Android 模拟器

与 OSX 一致,请参考上面的步骤。
不同点: HAXM 配置可能需要在 BIOS 中修改,具体的请 google;

3、构建一个 react-native 应用

与 OSX 一致,请参考上面的步骤。

4、修复 packager BUG

在windows下运行packager,有两处 BUG 需要修复:

1、在 node_modules/react-native/packager/react-packager/src/DependencyResolver/Module.jsgetName() 方法中,将

return path.join(name, path.relative(p.root, this.path));

修改为

return path.join(name, path.relative(p.root, this.path)).replace(/\\/g, '/');

注意,如果你在修改此行代码之前运行过 packager,那你可能需要去C:\Users\你的用户名\AppData\Local\Temp中找到并删除所有 react-packager-cache 开头的文件。

2、在 node_modules/react-native/packager/react-packager/src/DependencyResolver/DependencyGraph/ResolutionRequest.js_resolveNodeDependency(fromModule, toModuleName) 方法中,将

for (let currDir = path.dirname(fromModule.path);
   currDir !== '/';
   currDir = path.dirname(currDir)) {
searchQueue.push(
  path.join(currDir, 'node_modules', realModuleName)
);
}

修改为

for (let currDir = path.dirname(fromModule.path);
   //currDir !== '/';
   path.dirname(currDir) != currDir;
   currDir = path.dirname(currDir)) {
searchQueue.push(
  path.join(currDir, 'node_modules', realModuleName)
);
}

然后在打开 CMD,进入工程目录,运行:

node node_modules\react-native\packager\packager.js

执行 packager 任务,正常的话会看到以下信息:
a10

保持 packager 进程,新开一个 CMD 工程目录下运行命令:

react-native run-android

a11

这时就可以在 Android 模拟器或真机中看到我们的 React Native 应用了,具体的操作就与 OSX 一致了,请参考上面的步骤。

四、 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 文件并执行运行
a8
在编辑器中修改 index.ios.js,然后在 iOS 模拟器中点击 ⌘-R 进行刷新:
a9

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)’

a10
从报错信息看就是缺少 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(无效)

1 comment

  1. 我修改了index.android.js,结果悲剧了,运行后,是白板了,博主这是怎么回事,也没报错,改成这样了

    android

发表评论

电子邮件地址不会被公开。 必填项已用*标注