windows下配置React-native

首先看下配置成功后的效果图：

第一步，安装JDK

这一步略过，大家都懂。

第二步，安装Android SDK

注意SDK环境变量要按如下方式配置，否者后续步骤会报错：

1 新建系统变量，ANDROID_HOME，它的值为SDK的路径，我的SDK在C:\Users\liuliu\AppData\Local\Android\Sdk下。

2在Path中加入，%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

cmd命令行，键入adb命令，如下图的话，就说明sdk配置成功了。

第三步，去官网下载node.js安装包

node.js官网，根据32位还是64位系统，选择下载，写本篇博客时最新版本是v6.11.0。安装时，默认安装即可，一路next。

第四步，下载react-native源码

利用git下载react-native源码，如下：

git clone https://github.com/facebook/react-native.git

第五步，安装npm

cd切换到react-native\react-native-cli目录，然后安装npm，如下：

npm install -g

第六步，创建项目

react-native init testRN 

这一步时间较长，我用了大约10分钟，耐心等待，创建成功后如下图：

第七步，运行packager

此时要另起一个cmd窗口，然后输入如下命令，启动packger。

react-native start

启动成功后，可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本（看到很长的js代码就对了），第一次访问通常需要30几秒，并且在packager的命令行可以看到形如[====]的进度条。

第八步，运行APP

手机连接电脑上，开启调试模式，并确保adb正常运行。

再开启一个命令行，输入如下命令：

react-native run-android

大约两分钟过后，APP会启动，但是报错，如下：

此时：

1 进入目录，react-native\react-native-cli\testRN\android\app\src\main，新建assets目录

2 依次输入如下命令

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

重新启动APP：

react-native run-android

第九步，调试APP

打开AndroidProject\react-native\react-native-cli\testRN\index.android.js，更改标题为"React native 探索之路"，如下：

点击手机的菜单按钮，会弹出下图：

选择Dev Settings/Debug server host&port for device，输入 编译机器的IP地址、端口号（8081），注意，确保手机与编译环境在同一WIFI环境下（IP段相同）。我的无线局域网ipv4地址是：192.168.191.1，我的手机连接我电脑的WiFi，我的配置是：192.168.191.1：8081.

重新点击菜单按钮，选择reload js，界面就会刷新。

配置react-native过程中，可能会遇到一些小问题，只要根据error提示，不难解决问题。

参考：

https://stackoverflow.com/questions/44446523/unable-to-load-script-from-assets-index-android-bundle-on-windows（解决上述红色报错问题）

http://blog.csdn.net/u011068702/article/details/49448043

http://www.cnblogs.com/jone-chen/p/6248465.html