Window RN 踩坑之旅—环境搭建

一、什么是RN

RN 是React Native 的简称，是由 FaceBook 推出的一款跨平台开发框架，在2014年年底开源出 IOS 版本，2015年9月15又推出 React Native for Android 版本，至此可以说是真正的成为跨平台的客户端框架

随着跨平台的流行，RN 自然而然就火爆了起来，FaceBook 推出时官方说法 learn once, run everywhere ,即除了移动的 Android 、IOS ，在 Browser 中都可以运行，因为 RN 这套框架可以用JS来构建跨平台应用，JS在运行时可以动态加载，从而理论上是可以做到，wirte once, run everywhere, 既然是理论，那就免不了可能还要做一些适配工作，RN 就介绍这么多吧，那些啥高大上原理咱也不太懂，毕竟我也刚玩，这篇主要就是介绍如何在 window 搭建 Android 的 RN 运行环境，想详细了解的话，网上一搜一大堆，还比我写的好。

二、环境配置和参考资料

RN 的官方地址
RN 的 Github 地址
RN 的中文社区地址

2.1、我自己的系统环境

• OS : win7
• JDK 8
• AndroidStudio 2.2

2.2、所需软件或工具

• Node.js
• Python (注意按照官方提示请安装 Python 2.x 系列的)
• AndroidStudio 2.x版本及以上
• Android SDK （16以上越多越好，嫌费事就下载 23.0.1 及以上的版本其中主要下载SDK ，SDK-tools 还有最底部的 Android Support Repository，这里我多说两句，因为在这吃了不少亏，首先最新版 RN 是 0.56 ,所需要的SDK 版本是 26，这个版本很闹心，我试了很多次就是无法运行，最后将 RN 降级到 0.50.0 才成功，0.50.0 所需的 SDK 版本是23）
• JDK 1.8 暂时不支持更高版本而且 Studio 也需要 1.8 版本
• Git 版本控制（可选）

除了这些，运行的时候你还需要一个Android手机要不然怎么玩？ 没有的话也没关系，你可以用 AndroidStudio 自带的模拟器，或者安装 SAMSUNG 的 Genymotion,教程网上有。

2.3、环境变量配置

• adb 环境变量这个一般配置到 SDK目录下的 platform-tools 路径即可
• JDK 环境变量，这个我就不多说了
• SDK 环境变量，就是将 SDK 全路径配置到系统中
  

至于 Python，Git, Node,一般情况都是安装过程中自动配置好环境变量的，如果没有就手动配置一下。除了这些还有一些需要注意，由于众所周知的原因，建议安装完 node 以后，设置下国内镜像，当然你有能力出去，那就无所谓了！ 在 cmd 使用以下命令就可以进行国内镜像了。

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

配置完镜像后还需要配置 RN 的命令行工具用来构建RN，在 cmd 窗口输入以下命令

• npm install -g react-native-cli

三、 运行 RN

3.1、吐槽

说实话，写这篇博客实属无奈之举，因为踩了好多坑，网上的RN环境搭建博客基本都是按照官网进行翻译的，这也让我遇到了一些问题，首先官网和网上的博客都是基于重新搭建一遍的方式指导的，但上面的环境说实话我都有，也就是说以前安装好了，你让我重头再来一遍我是不愿意的 ，所以在运行 RN 项目的时候错误百出，虽然 百度 Google 后有类似问题，但基本无法解决我的错误，这让我很无奈，甚至出现了重新装一遍环境的想法当然最终我还是没有放弃，而且我担心就算重新安装一遍如果还是报错，那估计我得气疯了不可。无奈加了个 RN 群，问了几个群友后才发现 RN 最新版 0.56 很坑，运行出问题的比比皆是，于是听从建议降级到 0.50 ，经过一番捣鼓，总算是运行起来了，谢天谢地！ 最后我想对 FaceBook 说一句 mmp 什么鬼东西，搭建个环境没把我累死, fuck!

3.2、 RN 常用命令

• react-native init projectName 创建 RN 项目
• react-native init projectName –version 0.50.0 创建指定版本的RN项目
• react-native start 或 npm start 启动 RN 服务
• react-native run-android 运行android项目
• react-native run-ios 运行 ios 项目
• react-native –version 版本查看
• react-native -v 项目版本查看
• react-native –help 查看react-native 的帮助信息

3.3、踩坑之旅——官方指导

踩坑之前我先说一句，每个人的情况不同，所以我踩的坑可能并不会发生在你身上，这篇文章主要是记录下我自己搭建 RN 的过程，所以仅供参考，就好比 0.56 版的 RN 我可能死活跑不起来，但可能你全程绿灯一气呵成就运行成功了呢。。。，就说这么多不比比了，下面开始踩坑！

首先让我们按照官方指导的方式来创建一个 RN 项目，执行以下命令

• react-native init AwesomeProject

在经过一行行英文闪过之后，创建完毕！

目录结构，其中 android 目录就是一个标准的 android 项目，可以直接导入 AndroidStudio 运行

接下来进入 AwsomeProject 目录，执行以下命令来启动 RN 的 JS 服务，

• react-native start 或 npm start

启动成功

激动人心的时刻到来了，让我们运行起来，执行以下命令运行 android 项目

• react-native run-android

嗯？ 竟然报错了，仔细看看，哦，大致意思是我没有 26.0.3 版本的SDK ，我记得我下了啊（你的记忆有的时候会欺骗你），抱着怀疑的态度，我将 android 目录导入了 AndroidStudio 预编译一下，然后嘛。。。

在 AndroidStudio 下载完 26.0.3 版本之后，我又执行了一下 react-native run-android 命令，成功安装 Apk

打开 Apk 摇一摇手机，在弹出的窗口中点击 Dev setting，进入以下界面，选择箭头位置，配置启动的JS服务IP地址和端口，IP 地址通过 ipconfig 就可以查看，端口为 8081

配置地址和端口

配置完成后返回上一界面，重新摇一摇手机，然后点击 Reload ,如果你运气不错，可能会直接出现如下界面这就代表运行成功了，看看你是多么的优秀这是一次完美 RN 之旅

当然啦我运气一直不太好，所以出现了如下界面，啧啧，看看这满江红，虽然有点膈应但我也不是吓大的，有错就改嘛，于是我陷入了疯狂的 百度+Google 模式

在游走于百度和Google 许久之后我也试过了好多解决方案，但经常出现在我眼前无非就是错误中提示的那样，清除缓存啦，删除 node_modules ,再重新安装啦，然并卵，统统没用，但还是放出来吧，也许对别人有用呢吗，我就试了下以下两个命令，

• npm start – –reset-cache
• npm install ( 先删除 node_modules 目录再执行 )

毕竟刚接触，门门道道不清楚，于是我加入了一个 RN 讨论群，在群里咨询一段时间后才慢慢了解到一点情况，群里大部分使用 Mac 本，而且大多为 IOS 开发，这让我一个 Android 开发有点无奈，因为我是 window 本，所以我的情况他们未必遇到过，但死马当作活马医，经过一番问答，原来 RN 的 0.56 版本确实不太好跑起来 IOS 那边也是，然后有一位群员推荐我降级试试，他推荐的版本是 0.50.0，我一琢磨也是，既然最新版本不好跑，我也就不必跟自己过不去了，先跑起来再说，于是我进入了下一阶段，降级运行。

3.4、踩坑之旅——非官方指导方式

老样子，首先用命令初始化一个 RN 项目，不过这次的初始化命令跟以前稍微有点不一样，–version 后面可以输入你想要初始化的 RN 版本，这里我选择 RN 的 0.50.0 版本 , 这个版本所需要的 SDK 版本为 23，最新版 0.56 所需的 SDK 版本为 26 ，剩下的就跟以前一样了，我就不多赘述了。

• react-native init projectName —version 0.50.0

react-native run-android 回车，在经过前面的官方折磨后，我觉得这回总归得成功了吧，呵呵，事实证明，我想多了，如图

你这特么报的哪门子空指针？ 无奈我只好再次 百度+Google 经过一段时间搜索，发现这个问题比比皆是，大致两种解决方式

• 删除 android 目录下的 .gradle 文件，但我找了半天并没有发现这个文件，这个文件只有在导入 AndroidStudio 中才会生成，问题我都导入到 AndroidStudio 中了，还用得着命令行？
• 对 npm 降级，因为 npm5.x 版本及以上存在安装新库时会删除其他库的问题，导致项目无法正常运行。我查了下我的 npm 是 4.6 ，然并卵，该空指针还是空指针

很明显此路不通或者说我道行不够，那怎么办？ 凉拌呗，开个玩笑，最终我将项目导入 AndroidStudio 运行，虽然我很想用命令行的方式运行，但老是报各种报莫名其妙的错，让我觉得没必要跟自己过不去，毕竟我不想砸电脑，讽刺的是用命令行虽然错误百出，但导入 AndroidStudio 后我连一个 warning 都没看到，这种剧烈的反差不禁让我觉得，偏执的用命令行的我像个傻逼一样。

导入后我直接开始运行，那熟悉的感觉让我终于回想起我特么是个 Android 开发，安装，启动 Apk ，一气呵成，都不用我动，就是这样……….嗯？ 好像哪里不对，等了四五秒怎么一直白屏？ 等了一会还是白屏，然后控制台给我报了一堆这个玩意！

轻呼一口气，我对自己说要淡定，你是一个有修养的人，你是一个有责任心的人，你是一个高素质的人，所以不要轻易闹情绪，嗯，此时此刻我只想对 FaceBook 说一句话

只能再次百度+Google ——终于我找了一个解决方案，首先在 android\app\src\main 目录下创建 assets 文件夹，然后在命令行执行以下命令

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

成功后会在 assets 目录生成两个文件夹，如下所示

接下来重新在 AndroidStudio 中运行项项目，神奇的一幕发生了， Q N M D F B　终于特么的成功了，功了，了！！！！！

至此，搭建环境的踩坑之旅暂时告一段落，而且这只是万里长征的第一步而已！　还有，RN 的搭建是真的费劲！ 希望 FB 能慢慢改进吧，当然也可能是我太菜了！

四、结语

总算写完了，写博客有的时候还真是个体力活，不过能把这些错误记录下来还是值得的，不仅自己以后方便查阅，也能让别人少走点弯路，所以感觉还不错，不过说到这里我在补一个小插曲

• unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server

上面这个异常是在 RN 0.50.0 版本时 apk白屏的时候报的 意思是无法加载 js 脚本，于是我就想最新版 0.56 的满江红的时候控制台是不是也报这个错？然后我打开了 RN 0.56 版本的 Apk 在 AndroidStudio 控制台查看 log 信息，果不其然还真的报了这个错误，当时我内心一动，这岂不是说如果我用 3.4 小节中的那个很长的命令行是不是也能解决这个问题，于是我兴致勃勃的试了一下，然并卵，一点用都没有，还报了一堆错。不过我已经懒得查了，留给有缘人吧，我真的被最新版坑的精疲力尽了。

而且这个错误的出现是有原因的引用另一位博主的话吧

这个index.android.bundle毫无疑问就是用来调用原生控件的js脚本，每次当你改变了 index.android.js，你都需要使用上面的代码片段，来及时的更新index.android.bundle，然后打包才可以把新的index.android.js应用上，所以当没有index.android.bundle文件时，RN是无法运行的.

参考博客
https://blog.csdn.net/u014175342/article/details/73823904