React Native在iOS模擬器上運(yùn)行加載文件時(shí)出現(xiàn) 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))錯(cuò)誤，必現(xiàn)！
package.json文件內(nèi)容如下：
{
"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"
}
}
通過(guò)網(wǎng)上查找，找到了出現(xiàn)同樣問(wèn)題的相關(guān)連接：
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
經(jīng)過(guò)閱讀理解，說(shuō)是跟babel-preset-react-native有關(guān)，可能是版本太低，檢查發(fā)現(xiàn)我的babel-preset-react-native是4.0.0版本，確實(shí)是很低的，現(xiàn)在都是5.0.2了，于是乎：
npm install --save babel-preset-react-native@5
重新安裝了babel-preset-react-native的5.0.2版本，重新運(yùn)行，結(jié)果還是下面這樣：
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.
沒(méi)辦法，只好在試下面，刪除整個(gè)模塊，重新安裝：
rm -rf node_modules && npm install
然后：
1. 重新運(yùn)行，還是不行；
2. Xcode上點(diǎn)擊Product => Clean清除后再運(yùn)行還是不行；
3. 第2步再加上刪掉模擬器上的APP，再運(yùn)行還是不行。
最后想到自己再在終端用react-native init RNtest新建一個(gè)項(xiàng)目，運(yùn)行成功后查看它的package.json文件，檢查依賴模塊devDependencies發(fā)現(xiàn)不一樣，然后果斷把出問(wèn)題的項(xiàng)目依賴"devDependencies"換成：
{
"babel-jest": "23.4.0",
"babel-preset-react-native": "5.0.2",
"jest": "23.4.1",
"react-test-renderer": "16.4.1"
}
然后再通過(guò)上面的三步驟進(jìn)行嘗試，還是紅屏，差點(diǎn)崩潰??。
最后放大超：點(diǎn)擊Xcode的Product再按鍵盤上的【option】鍵，然后出現(xiàn)Clean Build Folder并點(diǎn)擊，再?gòu)椏螯c(diǎn)擊Clean，清理結(jié)束后，并且刪掉模擬器上舊的APP，運(yùn)行，通過(guò)了。
總結(jié)
-
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"
}
- 刪除React Native所有模塊重新安裝
rm -rf node_modules && npm install
- 點(diǎn)擊Xcode的
Product再按鍵盤上的【option】鍵，然后出現(xiàn)Clean Build Folder并點(diǎn)擊，再?gòu)椏螯c(diǎn)擊Clean，清理結(jié)束后，并且刪掉模擬器上舊的APP。 - 重新運(yùn)行。
