博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
React Native Cannot read property 'bindings' of null (null)) 解决!
阅读量:6206 次
发布时间:2019-06-21

本文共 3592 字,大约阅读时间需要 11 分钟。

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))错误,必现!

Simulator Screen Shot - iPhone X - 2018-07-18 at 09.48.52.png

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-native4.0.0版本,确实是很低的,现在都是5.0.2了,于是乎:

npm install --save babel-preset-react-native@5

重新安装了babel-preset-react-native5.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。

d. 重新运行。

转载地址:http://jrqca.baihongyu.com/

你可能感兴趣的文章
Red Hat 8.0中设置光盘为软件源
查看>>
wiki常用语法
查看>>
Hinton神经网络公开课10 Combining multiple neural networks to improve generalization
查看>>
linux-shell面试题 之二
查看>>
10 进制转 2 进制、16 进制
查看>>
Wordpress中显示页面当前位置
查看>>
HTML比较常用的标签
查看>>
【Spring】使用Spring和AMQP发送接收消息(下)
查看>>
SQL注入
查看>>
iOS UITableView 移除单元格选中时的高亮状态
查看>>
java中单例模式的3种实现
查看>>
openssl创建私有ca
查看>>
为什么我从 Git Flow 开发模式切换到了 Trunk Based 开发模式?
查看>>
mysql 数据库授权(给某个用户授权某个数据库)
查看>>
使用curl登陆上网账号
查看>>
将博客搬至CSDN
查看>>
Java技术中的三大特性
查看>>
Cloud Native 介绍
查看>>
linux下添加用户并赋予root权限
查看>>
linux 内核配置过程中遇到的问题
查看>>