Facebook在九月中旬就开源了React Native Android，我一直想尝试一下它，毕竟自己不想被新技术甩地太远，保持对新技术的好奇与热情很重要。有点遗憾的是，我的笔记本系统是windows,而React Native的官方文档中声明，React Native目前仅支持在Mac OSX上进行开发，还好喜欢折腾的大有人在，已经有人成功在windows上配置好React Native Android开发环境了。接下来，我就站在这些大神的肩膀上，假装自己是大神，将我自己在windows上进行环境配置的过程分享出来。
安装JDK
先到 Java 官网下载并安装，注意是X86还是X64版本，成功安装后，把JDK的安装目录添加到系统的Path环境变量中。
安装Android SDK
Android SDK可以单独安装，也可以通过Eclipse ADT或者Android Studio一并安装，推荐使用google官方推出的Android开发工具Android Studio与Android SDK一并安装。
首先到官方下载页面 Android Studio ，下载并安装（要记住SDK的安装目录，默认安装在C:\Users\Administrator\AppData\Local\Android\sdk目录下）。
然后进入到 SDK 的安装目录,把SDK安装目录以及platform-toos子目录路径添加到系统的Path环境变量中：
双击 SDK Manager.exe ，选择需要安装的Android版本，然后点击 install packages,安装完成后的界面如下图所示：
到这一步，Android SDK已安装完成。
安装Node.JS
进入Node官网 下载 页面，点击符合你的计算机系统的版本进行下载并安装：
然后进入命令行，输入 node -v 并回车，如果返回以下结果，表明node.JS安装成功。
安装react-native命令行工具
在命令行执行以下命令：
npm install -g react-native-cli
初始化 HelloWorld 应用
在命令行执行以下命令：
react-native init HelloWorld
由于npm的版本问题，在windows下存在bug,会报错，解决办法是，进入到github上React-Native项目的 首页 ，点击右下角的 Download zip,并解压到硬盘上。
从命令行进入到解压目录，然后再进入到 react-native-cli 子目录，执行以下命令：
npm -g install
然后再重新执行 react-native init HelloWorld ，初次创建React Native Android 项目会比较慢。
运行packager
从命令行进入到 HelloWorld 项目目录，然后执行以下命令：
node node_modules/react-native/packager/packager.js
创建AVD
打开SDK的安装目录，双击 AVD Manager.exe ，然后在弹出的AVD管理窗口中，点击create开始创建AVD，设置好参数后，点击OK；
然后在AVD管理窗口中，选中Android5.1.1,再点击start,之后等待模拟器开启。
执行 react-native run-android
保持packager开启的状态，新开一个命令行窗口，进入到 HelloWorld 项目目录，然后执行以下命令：
react-native run-android
这时，在开启packer的窗口会报以下错误：
解决这个问题的办法是：在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)) {
修改为
for (let currDir = path.dirname(fromModule.path);
path.dirname(currDir) != currDir;
currDir = path.dirname(currDir)) {
然后重新开启packer,并在另一个窗口重新执行 react-native run-android 命令，
如果运行 react-native run-android命令的窗口返回如下结果，表明HelloWorld应用在虚拟机上安装成功，
但这时出现了另外一个问题，内容不能渲染出来，空白一片。
如果使用的是真机调试（以及Android5.0以下），则可能还会出现 Unable to download JS bundle的错误，解决这个问题的方法如下（来自stackoverflow）：
* MORE INFO FOR RUNNING/DEBUGGING ON A DEVICE *
You might find that if you deploy your app to your Android device rather than an emulater you get a red screen of death with an error saying Unable to load JS Bundle. You need to set the debug server for your device to be your computer running react...either its name OR IP address.
1. Press the device Menu button
2. Select Dev Settings
3. Select Debug server host for device
4. Type in your machine's IP and Reload JS
More info: http://facebook.github.io/react-native/docs/running-on-device-android.html
另外解决内容不能渲染出来的方法如下：在node_modules/react-native/packager/react-packager/src/DependencyResolver/Module.js的getName()方法中，将
return path.join(name, path.relative(p.root, this.path));
修改为：
return path.join(name, path.relative(p.root, this.path)).replace(/\\/g, '/');
然后重新开启 packer,并在另一个窗口重新执行 react-native run-android 命令,这时将能成功在虚拟机上运行HelloWorld:
转载请注明本文链接： http://xiaoweihuang.github.io/2015/10/05/hello-reactnativeandroid/