React-native 完美解决 Unable to load script from assets “index.android.bundle” 和 JS server not recognize

前言：

React-Native的第一个HelloWorld工程，大多数人都能跑起来，可也有一部分人卡在第一个工程，就是难以跑出正确的界面，干着急…

我这里给出我遇到的坑，希望能够帮助你，首先，给出我现在的开发环境版本：

版本声明：

Node.js : v8.9.4

React-native: 0.53.3

Android studio 2.2.3(gradle自带的版本是2.14.1)

 

如果你也是React-native 0.48以后的新版本，那么恭喜你，我解决的问题可能就是你需要的

1.版本差异：

现在网上在给出接入环境报错的大多数都是0.48以前的版本解决方案，0.48以前的版本根目录下还有index.android.js和index.ios.js两个js文件，而在0.48以后就只有一个App.js这个文件了

 

2.问题出现：

         可能大多数人第一次跑起工程时就会遇到下面的经典错误：

 

看到这里大家各种百度，应该搜索到的解决方案最多的是类似于下面这种：

http://blog.csdn.net/sinat_34380438/article/details/77648476?locationNum=9&fps=1

但是，按照方法来并没有卵用，因为它是0.48以前的版本解决方案，我们只需要新init一个项目，按照我的解决方法来，应该就能解决你的问题（不能解决的请给我留言）

3.分析问题：

其实0.48以后工程项目结构是完整的，不可能出现第一种错误index.android.bundle找不到的问题，所以真正的问题只能是后半句：make sure you are running a packager server

3.问题分析：

我们给张模拟的react-native运行的原理图看一下：

如图，我们可以看出问题可能出现在：

（1）	电脑react-native 服务器根本没起来，或者没有被recognized识别到
（2）	手机配置的IP、端口与电脑服务器的IP、端口不一致

4.问题解决

问题解决分为两大步骤：

第一步，检查JsServer是否正确开启

判断服务器是否开启，当我们执行 react-native run-android 命令时，分两种情况：

(a)当前命令窗口提示startingjs service ，并自动弹出一个启动service的窗口，提示js service成功run在 8081端口，那么恭喜你，这一步你成功了，可以直接进行第二步 ；
(b)当前命令窗口不能自动弹出一个启动service窗口，需要自己先执行react-natvie start 命令手动开启一个服务窗口，再另启动一个窗口执行react-native run-android命 令；
(i)如果提示JsService already started，那么恭喜你，你也可以进入第二步了；
(ii)如果你的命令窗口提示黄色字体JS server not recognized , continuing with build

那么，恭喜你，赶紧关掉窗口吧，你的js server 都没有成功开启，你可以提前终止任务了

JSserver not recognized解决：

         这种问题出现，说明你的8081端口被其他程序占用了，你可以在命令行输入netstat -aon|findstr "8081"，你会发现一堆程序占用8081端口，我的就是被java.exe程序顽固占用，杀死又重启占用，没办法我只能react-native 服务器换端口，解决方法如下：

(1)    新开一个窗口，例如运行react-native start --port 9043 --reset-cache 换一个没有程序在用的端口（你可以运行netstat -aon|findstr "9043"看有没有程序在用 这个端口 ）
(2)    新开一个窗口，运行react-native run-android --port 9043
(3)    打开手机或者模拟器的dev setting 设置IP端口，IP为计算机IP，端口为9043
(4)    再次运行react-native run-android --port 9043

第二步，检查手机和电脑IP端口是否一致

         这里调试分为两种情况：

(1)    run在真机上要保证电脑和手机处在同一局域网wifi中，手机能够ping通电脑，并设置电脑的IP和端口，真机上就是摇晃手机，可以出现设置弹窗（注意手动开启应用悬浮窗权限），点击DEV setting ，选择debug server host&port for device 选项，设置IP端口为电脑的IP端口（这里的端口是前面说的JsService 开启的端口，默认是 8081，如果你重设了Js Service 端口，例如9043，那么你要改成ip:9043）
(2)    run在模拟器上，如果是原生模拟器，默认的IP是10.0.2.2这个不用改的，端口改成你Js Server对应的端口就行了，如果run在genymotion上，你可以设置成localhost:8081（你自己Js Server的端口） 

参考 ： https://stackoverflow.com/questions/47341120/js-server-not-recognized-continuing-with-build