javascript - 无法读取 Reactnative 中 null 错误的属性 'bindings'

Question

从 react-native 运行应用程序时，我在模拟器/设备上收到以下错误消息。

** ERROR **

  The development server returned response error code: 500

URL: http: //10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false

  Body: {
    "type": "TransformError",
    "lineNumber": 0,
    "errors": [{
      "description": "/Users/admin/Documents/PULSE/Phase II/Projects/pulse-mobile-common-rn/App.js: Cannot read property 'bindings' of null",
      "lineNumber": 0
    }],
    "name": "SyntaxError",
    "message": "/Users/admin/Documents/PULSE/Phase II/Projects/pulse-mobile-common-rn/App.js: Cannot read property 'bindings' of null",
    "stack": "TypeError: Cannot read property 'bindings' of null\n    at Scope.moveBindingTo (/Users/admin/Documents/PULSE/Phase II/Projects/pulse-mobile-common-rn/node_modules/@babel/traverse/lib/scope/index.js:867:13)\n    at BlockScoping.updateScopeInfo (/Users/admin/Documents/PULSE/Phase II/Projects/pulse-mobile-common-rn/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17)\n    at BlockScoping.run (/Users/admin/Documents/PULSE/Phase II/Projects/pulse-mobile-common-rn/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12)\n    at PluginPass.BlockStatementSwitchStatementProgram (/Users/admin/Documents/PULSE/Phase II/Projects/pulse-mobile-common-rn/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24)\n    at newFn (/Users/admin/Documents/PULSE/Phase II/Projects/pulse-mobile-common-rn/node_modules/@babel/traverse/lib/visitors.js:193:21)\n    at NodePath._call (/Users/admin/Documents/PULSE/Phase II/Projects/pulse-mobile-common-rn/node_modules/@babel/traverse/lib/path/context.js:53:20)\n    at NodePath.call (/Users/admin/Documents/PULSE/Phase II/Projects/pulse-mobile-common-rn/node_modules/@babel/traverse/lib/path/context.js:40:17)\n    at NodePath.visit (/Users/admin/Documents/PULSE/Phase II/Projects/pulse-mobile-common-rn/node_modules/@babel/traverse/lib/path/context.js:88:12)\n    at TraversalContext.visitQueue (/Users/admin/Documents/PULSE/Phase II/Projects/pulse-mobile-common-rn/node_modules/@babel/traverse/lib/context.js:118:16)"
  }
processBundleResult
BundleDownloader.java: 296
access$200
BundleDownloader.java: 37
onResponse
BundleDownloader.java: 174
execute
RealCall.java: 153
run
NamedRunnable.java: 32
runWorker
ThreadPoolExecutor.java: 1162
run
ThreadPoolExecutor.java: 636
run
Thread.java: 764

Package.json

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>{
  "name": "pulsemobile",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "pretty": "prettier --semi true --print-width 120 --arrow-parens always --single-quote --trailing-comma all --write \"src/**/*.js\"",
    "precommit": "lint-staged",
    "offline-android": "react-native bundle --dev false --platform android --entry-file index.js --bundle-output ./android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest ./android/app/build/intermediates/res/merged/debug",
    "offline-ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/playmaker/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'"
  },
  "lint-staged": {
    "*.js": [
      "eslint --fix",
      "yarn pretty",
      "git add"
    ]
  },
  "dependencies": {
    "@babel/runtime": "^7.0.0",
    "axios": "^0.18.0",
    "dateformat": "^3.0.3",
    "native-base": "^2.7.1",
    "prop-types": "^15.6.2",
    "react": "16.5.0",
    "react-native": "0.57.1",
    "react-native-device-settings": "^1.2.0",
    "react-native-extra-dimensions-android": "^0.21.0",
    "react-native-fused-location": "^0.2.1",
    "react-native-geocoding": "^0.2.0",
    "react-native-iphone-x-helper": "^1.1.0",
    "react-native-permissions": "^1.1.1",
    "react-native-vector-icons": "^5.0.0",
    "react-navigation": "^v1.3.2",
    "react-navigation-redux-helpers": "^1.0.2",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.5",
    "babel-jest": "23.6.0",
    "babel-preset-react-native": "4.0.0",
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.4.0",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-plugin-flowtype": "^2.49.3",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.10.0",
    "husky": "^0.14.3",
    "eslint": "^5.0.1",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.46.0",
    "react-test-renderer": "16.5.0",
    "lint-staged": "^7.2.0",
    "prettier": "^1.13.6",
    "react-dom": "^16.4.2",
    "redux-mock-store": "^1.5.3"
  },
  "jest": {
    "collectCoverage": true,
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(realm)/"
    ],
    "setupTestFrameworkScriptFile": "./test/setupJest.js",
    "moduleDirectories": [
      "node_modules"
    ],
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    },
    "unmockedModulePathPatterns": [
      "promise",
      "source-map"
    ]
  },
  "rnpm": {
    "assets": [
      "./src/app/assets/fonts/"
    ]
  }
}</code></pre>
</div>
</div>

App.js这是 App.js 文件中的内容

 

   /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     *
     * @format
     * @flow
     */

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import store from './src/lib/Store';
import Root from './src/components/Root';

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Root />
      </Provider>
    );
  }
}

Index.js 文件内容

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/** @format */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);</code></pre>
</div>
</div>

**.babelrc::**

{ “预设”:[ “ native react ” ]

我已尝试使用以下链接解决方案，但这些解决方案均未解决此问题

1. Upgrade to babel 7: Cannot read property 'bindings' of null
2. react-native cannot read property 'bindings' of null
3. https://github.com/babel/babel/issues/8575
4. https://github.com/storybooks/storybook/issues/3937

Answer 1

1. 在“.babelrc”文件中:

{ “预设”:[ “模块:metro-react-native-babel-preset” ]

1. 在终端“npm install”上。
2. 在终端“react-native run-android”上。

这对我有用。