React Native在iOS模拟器上运行加载文件时出现Cannot read property 'bindings' of null (null))错误解决方法

React Native在iOS模拟器上运行加载文件时出现 Failed to load bundle(http://localhost: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"
  }
}

通过网上查找,找到了出现同样问题的相关连接:
https://stackoverflow.com/questions/51220030/react-native-cannot-read-property-bindings-of-null
https://github.com/facebook/react-native/issues/20074#issuecomment-403048203
https://github.com/facebook/react-native/issues/19827
经过阅读理解,说是跟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,运行,通过了

总结

  1. 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"
  }
  1. 删除React Native所有模块重新安装
rm -rf node_modules && npm install
  1. 点击Xcode的Product再按键盘上的【option】键,然后出现Clean Build Folder并点击,再弹框点击Clean,清理结束后,并且删掉模拟器上旧的APP。
  2. 重新运行。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,658评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,482评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,213评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,395评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,487评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,523评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,525评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,300评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,753评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,048评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,223评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,905评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,541评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,168评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,417评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,094评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,088评论 2 352

推荐阅读更多精彩内容