使用React-Navigation抽屉在iOS上发生React Native崩溃

时间:2018-12-14 16:04:28

标签: android ios react-native react-navigation

仅在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"
  }

这是从我开始使用反应导航开始的;但可以在Android上正常工作。

这是我们使用react-navigation的代码,这是导入的主要应用程序,包括“主页”和“设置”屏幕:

//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 个答案:

答案 0 :(得分:0)

经过反复的可能的解决方案,我终于能够使它工作。

似乎我遇到了一些问题-软件包版本冲突和.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"
      }
    }]
  ]
}

答案 1 :(得分:0)

我通过对我的action进行了以下更改来解决了相同的错误

.babelrc

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

package.json