先上图
reactnative红屏.png
没错，就是这个异常：
could not get batchedbridge, make sure your bundle is packaged correctly
网上搜索了很久，试了很多的方法，但是都没有完成，其中有一个博文写的很全面，地址是：
http://www.cnblogs.com/LiuZhen/p/5971176.html。
经过思考和实现，我也终于填了这个坑，耗费了我四个多小时，值得我把它的具体原因和解决思路写出来，做个笔记。
出现bug的原因：
当我们写完一些js界面之后，通过执行npm start命令，也就是package.json里面的js脚本命令，从而生成一个以bundle为后缀名的文件。而app运行的时候，程序会检查android项目的assets文件夹中是否有这个bundle文件，如果有，则会继续运行项目显示结果，如果没有，则会通过指定路径下载这个文件并放到assets文件夹中，然后继续运行。而问题就出在这，这个路径没法下载到指定的bundle文件。
解决方案：
1）改ip。有些人能解决，有些人不能解决的问题在于一般都出在电脑和手机设备没有处于同一个wifi环境下。
Paste_Image.png
顺便放一张传说中的开发者菜单
开发者菜单.png
2）加一个脚本，把生成的bundle文件直接放到assets文件夹中，具体操作看我推荐的那个博文。
这个一定要先执行npm start命令 然后再执行 npm bundle-android命令，然后再运行项目。
在项目中，找到package.json文件，在里面的scripts下添加一个bundle-android标签
{
"name": "Demo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"bundle-android":"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/"
},
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.0"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "1.9.2",
"jest": "20.0.3",
"react-test-renderer": "16.0.0-alpha.6"
},
"jest": {
"preset": "react-native"
}
}
3）执行npm start命令之后，把链接放到浏览器中，可以下载这个bundle文件，然后放到android项目的 assets文件夹中，然后运行项目。
下载bundle文件.png
正常运行的项目.png
网友评论