React Native在iOS模拟器上运行加载文件时出现 Failed to load bundle(:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(/Users/dp/Documents/React Native/SHRControl/App.js: Cannot read property 'bindings' of null (null))错误,必现!
package.json文件内容如下:
{ "name": "SHRControl", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "eslint": "^4.19.1", "lodash": "^4.17.10", "react": "^16.4.1", "react-native": "^0.56.0", "react-native-accordion": "^1.0.1", "react-native-animatable": "^1.3.0", "react-native-collapsible": "^0.11.3", "react-native-elements": "^0.19.1", "react-native-vector-icons": "^4.6.0", "react-navigation": "^1.5.12", "react-redux": "^5.0.7", "redux": "^3.7.2", "redux-logger": "^3.0.6", "redux-persist": "^5.10.0", "redux-saga": "^0.16.0", "redux-thunk": "^2.3.0" }, "devDependencies": { "babel-jest": "22.4.3", "babel-preset-react-native": "4.0.0", "jest": "22.4.3", "react-test-renderer": "16.3.1" }, "jest": { "preset": "react-native" }}
通过网上查找,找到了出现同样问题的相关连接:
经过阅读理解,说是跟babel-preset-react-native
有关,可能是版本太低,检查发现我的babel-preset-react-native
是4.0.0
版本,确实是很低的,现在都是5.0.2
了,于是乎: npm install --save babel-preset-react-native@5
重新安装了babel-preset-react-native
的5.0.2
版本,重新运行,结果还是下面这样:
error: bundling failed: TypeError: Cannot read property 'bindings' of null at Scope.moveBindingTo (/Users/dp/Documents/React Native/SHRControl/node_modules/@babel/traverse/lib/scope/index.js:978:12) at BlockScoping.updateScopeInfo (/Users/dp/Documents/React Native/SHRControl/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17) at BlockScoping.run (/Users/dp/Documents/React Native/SHRControl/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12) at PluginPass.BlockStatementSwitchStatementProgram (/Users/dp/Documents/React Native/SHRControl/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24) at newFn (/Users/dp/Documents/React Native/SHRControl/node_modules/@babel/traverse/lib/visitors.js:237:21) at NodePath._call (/Users/dp/Documents/React Native/SHRControl/node_modules/@babel/traverse/lib/path/context.js:65:20) at NodePath.call (/Users/dp/Documents/React Native/SHRControl/node_modules/@babel/traverse/lib/path/context.js:40:17) at NodePath.visit (/Users/dp/Documents/React Native/SHRControl/node_modules/@babel/traverse/lib/path/context.js:100:12) at TraversalContext.visitQueue (/Users/dp/Documents/React Native/SHRControl/node_modules/@babel/traverse/lib/context.js:142:16) BUNDLE [ios, dev] ../../index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
没办法,只好在试下面,删除整个模块,重新安装:
rm -rf node_modules && npm install
然后:
1. 重新运行,还是不行; 2. Xcode上点击`Product => Clean`清除后再运行还是不行; 3. 第2步再加上删掉模拟器上的APP,再运行还是不行。
最后想到自己再在终端用react-native init RNtest
新建一个项目,运行成功后查看它的package.json文件,检查依赖模块devDependencies
发现不一样,然后果断把出问题的项目依赖"devDependencies"换成:
{ "babel-jest": "23.4.0", "babel-preset-react-native": "5.0.2", "jest": "23.4.1", "react-test-renderer": "16.4.1" }
然后再通过上面的三步骤进行尝试,还是红屏,差点崩溃?。
最后放大超:点击Xcode的Product
再按键盘上的【option】键,然后出现Clean Build Folder
并点击,再弹框点击Clean
,清理结束后,并且删掉模拟器上旧的APP,运行,通过了。
总结
a. babel-preset-react-native
更新到最新,例如:
{ "babel-jest": "23.4.0", "babel-preset-react-native": "5.0.2", "jest": "23.4.1", "react-test-renderer": "16.4.1" }
b. 删除React Native所有模块重新安装
rm -rf node_modules && npm install
c. 点击Xcode的Product
再按键盘上的【option】键,然后出现Clean Build Folder
并点击,再弹框点击Clean
,清理结束后,并且删掉模拟器上旧的APP。