搜索
您的当前位置:首页正文

初学ReactNative开发,据说80%的新手都会遇到的坑的解

来源:二三娱乐

先上图

reactnative红屏.png

没错,就是这个异常:
could not get batchedbridge, make sure your bundle is packaged correctly

出现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
Top