android - 模拟器中的 React Native run-android 错误“无法获取 BatchedBridge,请确保您的捆绑包已正确打包”
问题描述
我正在使用 Android Studio Emulator 并react-native-web
根据此文档配置支持。但是每当我运行npm run android
它时都会出现以下错误:
“无法获取 BatchedBridge,请确保您的捆绑包已正确打包”
我尝试了许多解决方案,例如:
- 删除
node_modules
并重新安装 - 清除缓存
react-native start --reset-cache
- 运行
react-native start
前run-android
- 查看
.npmrc
但还没有解决办法。metro
终端也没有错误。
下面是我的package.json
{
"name": "shipdemo",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start --reset-cache",
"test": "jest",
"lint": "eslint .",
"web": "webpack serve -d source-map --mode development --config \"./web/webpack.config.js\" --inline --color --hot",
"build:web": "webpack --mode production --config \"./web/webpack.config.js\" --hot"
},
"dependencies": {
"react": "17.0.1",
"react-dom": "^17.0.2",
"react-native": "0.64.2",
"react-native-web": "^0.16.5"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"babel-plugin-module-resolver": "^4.1.0",
"babel-plugin-react-native-web": "^0.16.5",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.64.0",
"react-test-renderer": "17.0.1",
"url-loader": "^4.1.1",
"webpack": "^5.39.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"jest": {
"preset": "react-native-web"
}
}
更新:
启用Pause on Caught Exception后,我在开发工具中得到了以下信息。
同时,现在我在地铁上也遇到了错误
解决方案
我有修复,但它背后的原因,发布这个答案是为了提高解决方案的可见性,这相当于这个 commit。
所以我删除.babelrc
了文件并将模块解析器设置移动到 webpack 配置中,babel.config.js
因此现在 web 相关设置不会干扰 App 相关的 babel 设置。
我也更新了提到的文章。
.babelrc
:
<已删除>
babel.config.js
:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
web/webpack.config.js
:
...
...
...
// The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
presets: ['module:metro-react-native-babel-preset'],
// Re-write paths to import only the modules needed by the app
plugins: [
'react-native-web',
[
'module-resolver',
{
alias: {
'^react-native$': 'react-native-web',
},
},
],
],
...
...
...
推荐阅读
- ajax - Spring,Thymeleaf &fragmens: 加入篮子
- python - 在数组中存储复数
- java - 哈希图还是成熟的缓存?
- dbt - 如何设置 dbt 配置文件以连接到 Qubole/Hive 我已经尝试过 http 方法,可以这样做吗?
- c# - 如何识别 iTextSharp 找到的 PDF 上的注释/链接位置
- c++ - 测试模板到内存位置以替换嵌入式系统中的定义
- java - 如何以编程方式确定 jdk.http.ntlm.transparentAuth 的设置
- javascript - 从两个不同的状态添加/删除类
- vba - VBA 仅导出部分记录集
- javascript - 反应firebase auth无法识别用户何时登录