window配置React+Native 安卓开发环境

近期React+Native掀起热潮。用于开发ios、安卓、web【据说能用同一语言开发，极大降低了学习成本】

1、安装jdk、sdk、安卓studio【由于这是基本工作，这里就不赘述了】
注意：这里需要api 23

2、配置C++环境。这里我选择了VC 6.0提供C++环境【由于React+Native是基于node.js的，编译node.js是需要C++环境的。】
VC6.0：点击下载
并将VC6.0目录下的bin加到path环境变量中：

新建环境，变量名为lib，变量值为该目录下的lib文件夹

新建环境，变量名为include，变量值为该目录下的include文件夹

检验C++环境：
在cmd中，执行以下命令：

cl

3、安装msysgit
下载地址为：点击下载
并将安装目录下的bin文件夹加到path环境变量中

4、安装Python
下载地址为：点击下载
将安装目录下的bin和Scripts文件夹加到path环境变量中

5、安装node.js
下载地址为：点击下载
安装好后，会自动将node.js加到path环境变量中。
然后打开cmd，执行以下命令：

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

建议设置npm镜像以加速后面的过程。

6、安装react-native命令行工具
打开cmd，执行以下命令：

npm install -g react-native-cli

这说明已经安装好了。

7、创建工程
在自己想要创建工程的目录下，打开cmd，并执行以下命令：

react-native init MyProject

其中MyProject为工程名
这里可能需要花不少时间【大概在十分钟左右】

发现报错了，不用慌张，再执行一下刚刚的命令

这样就成功了，不过也不知道为什么，需要执行两次。

8、运行packager
进入工程，并执行：

react-native start

看到node.js已经开启了8081端口了，我们可以在浏览器中访问：http://localhost:8081/index.android.bundle?platform=android 页面看看效果，可以看到

出错了，我们进入工程目录下的`\node_modules\react-native\node_modules\react-transform-hmr\node_modules\react-proxy\node_modules\react-deep-force-update 目录，将.babelrc.stage文件删除。

再重新执行
react-native start
重新访问http://localhost:8081/index.android.bundle?platform=android
会出现以下情况：

说明运行成功啦。
注意这个cmd窗口不能关闭，这相当于是开启这8081端口，等下手机真机调试的时候需要连接8081端口

9、执行命令

adb reverse tcp:8081 tcp:8081

发现不会报错，即可。

10、运行安卓
用安卓studio打开工程目录下的android目录

然后连接手机，选择手机运行app

在手机中，打开app，发现以下错误：

轻轻摇晃手机，等手机弹出窗口
[外链图片转存中…(img-ZSpbojNS-1615874971955)]
选择“Dev Settings”，勾选“Animations FPS Summaries”
然后点击“Debug server host & post for device”，填写电脑的ipv4地址【一定要保证手机与电脑在同一网段，手机与电脑连接同一wifi即可】。【ipv4地址可通过在cmd中输入ipconfig 查看】
[外链图片转存中…(img-w7Sw8lK0-1615874971956)]
填写：192.168.31.135:8081注意一定要加上端口号

重启app，就会出现以下界面：

这样就配置成功了

若还是出现了unable to download js bundle的界面，可以参考博文：点击参考