使用 react-navigation 抽屉在 iOS 上 React Native 崩溃答案

【问题标题】：React Native crashing on iOS with react-navigation drawer使用 react-navigation 抽屉在 iOS 上 React Native 崩溃
【发布时间】：2018-12-14 16:04:27
【问题描述】：

我只在 iOS 上遇到错误：

TypeError: undefined is not an object (evaluating 'this._callListeners.bind')

This error is located at:
  in DrawerLayout (at DrawerView.js:161)
  ...

项目依赖：

"dependencies": {
    "@babel/runtime": "7.2.0",
    "@babel/plugin-proposal-async-generator-functions": "7.2.0",
    "@babel/plugin-proposal-class-properties": "7.2.1",
    "@babel/plugin-proposal-object-rest-spread": "7.2.0",
    "babel-preset-expo": "5.0.0",
    "expo": "31.0.2",
    "expo-cli": "2.5.0",
    "native-base": "2.8.1",
    "react": "16.6.3",
    "react-native": "0.57.8",
    "react-redux": "6.0.0",
    "react-navigation": "3.0.8",
    "react-native-vector-icons": "6.1.0",
    "redux": "4.0.1"
  }

这从我开始使用 react-navigation 开始；但在 Android 上运行良好。

这是我们使用 react-navigation 的代码，这是导入的主应用程序，包括 Home 和 Settings 屏幕：

//imports...

const routes = {
  Home: Home,
  Settings: Settings
};

const AppNavigator = createDrawerNavigator(routes);

const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {
  state = {}

  render() {
    if (this.state.isReady) {
      return (
        <AppContainer/>
      );
      }
      else {
        return (<Container><Spinner/></Container>);
      }
  }

  componentWillMount() {
    this._loadAssets();
  }

  async _loadAssets() {
    await Expo.Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf")
    });

    this.setState({ isReady: true });
  }
}

【问题讨论】：

使用版本 2。版本 3 仍然有问题。
以前有用吗？这是一个新项目还是您更新了依赖项？
您似乎没有安装react-native-gesture-handler，您是否遵循本指南：reactnavigation.org/blog/2018/11/17/react-navigation-3.0.html
@RobbieMilejczak 它正在使用 Expo - 根据这些说明，不需要 react-native-gesture-handler。
@HelmerBarcos 在添加 react-navigation 之前它在 iOS 上工作。

标签： android ios react-native react-navigation

【解决方案1】：

我通过对我的.babelrc 进行以下更改来修复了同样的错误

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
-    ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }]
+    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]
}

我的package.json：

"dependencies": {
    "axios": "^0.18.0",
    "mobx": "^5.8.0",
    "mobx-react": "^5.4.3",
    "react": "16.6.3",
    "react-native": "0.57.8",
    "react-native-device-info": "^0.24.3",
    "react-native-elements": "^1.0.0-beta5",
    "react-native-haptic-feedback": "^1.3.0",
    "react-native-svg": "^8.0.10",
    "react-native-vector-icons": "^6.0.2",
    "react-navigation": "^3.0.9",
    "rollbar-react-native": "^0.4.0"
  },
"devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-decorators": "^7.2.3",
    "babel-eslint": "^10.0.1",
    "babel-jest": "23.6.0",
    "eslint": "^5.12.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.12.3",
    "eslint-plugin-react-native": "^3.5.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3"
  }

【讨论】：

【解决方案2】：

在对可能的解决方案进行大量迭代之后，我终于能够让它工作。

看起来我遇到了一些问题 - 包版本冲突和 .babelrc 配置。

有了这些，我就可以启动并运行了..

package.json 部门：

"dependencies": {
    "@babel/plugin-proposal-async-generator-functions": "7.2.0",
    "@babel/plugin-proposal-class-properties": "7.2.1",
    "@babel/plugin-proposal-decorators": "7.2.0",
    "@babel/plugin-proposal-object-rest-spread": "7.2.0",
    "@babel/plugin-transform-runtime": "7.2.0",
    "@babel/runtime": "7.2.0",
    "@react-navigation/core": "3.0.2",
    "@react-navigation/native": "3.1.0",
    "babel-preset-expo": "5.0.0",
    "expo": "31.0.6",
    "native-base": "2.10.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
    "react-native-vector-icons": "6.1.0",
    "react-navigation": "3.0.9",
    "react-navigation-drawer": "1.0.5",
    "react-redux": "6.0.0",
    "redux": "4.0.1"
  }

还有 .babelrc 在我的根目录中：

{
  "presets": ["babel-preset-expo"],
  "plugins": [
    ["module-resolver", {
      "root": ["./"],
      "alias": {
        "_framework": "./framework",
        "_apps": "./apps"
      }
    }]
  ]
}

【讨论】：