DrawerNavigator 抛出未知错误

DrawerNavigator Throwing unknown error

我有以下 React-Navigator 配置:

export default class App extends React.Component {
    render() {
        const MainNavigator = StackNavigator({
            signin: { screen: SigninScreen },
            signup: { screen: SignupScreen },
            home: {
                screen: DrawerNavigator({
                    home: { screen: MapScreen },
                    about: { screen: AboutScreen }
                },
                    { drawerWidth: 200 }
                )
            },
        }, {
                headerMode: 'none'
            })
        return (
            <View style={styles.container}>
                <MainNavigator />
            </View>
        );
    }
}

当我删除行时:

{ drawerWidth: 200 }

然后就可以了,当我把它放回去时,出现以下错误:

TypeError: undefined is not an object (evaluating 'route.routeName')

This error is located at:
    in DrawerView (at DrawerNavigator.js:127)
    in Unknown (at createNavigator.js:52)
    in Navigator (at createNavigationContainer.js:210)
    in NavigationContainer (at SceneView.js:31)
    in SceneView (at CardStack.js:423)
    in RCTView (at View.js:112)

如果有人能提供帮助,我们将不胜感激。我不太确定将第二个参数添加到 DrawerNavigator 有什么问题,但它似乎破坏了它。在确实说的文档中:DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

此致, 埃米尔

只需添加

drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'

到 drawerConfigs

尝试像这样分离组件。

如果不分离组件,React-Native 有时会抛出错误undefined is not an object

要查看完整示例的代码,您可以访问 link 或者要测试此代码,您可以使用您的 Expo 应用扫描 ExpoSnack 提供的二维码。 https://snack.expo.io/Hkit-Z4mf

import React, {Component} from 'react';
import {StackNavigator, DrawerNavigator} from 'react-navigation';

const FirstScreen  = require('./screens/first.js');
const SecondScreen = require('./screens/second.js');
const ThirdScreen  = require('./screens/third.js');

const TheDrawerNavigator = DrawerNavigator({
  TheSecondScreen: {screen: SecondScreen},
  TheThirdScreen:  {screen: ThirdScreen},
}, {
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle',
});

const TheStackNavigator = StackNavigator({
  TheFirstScreen:  {screen: FirstScreen},
  TheSecondScreen: {screen: TheDrawerNavigator},
}, {
  headerMode: 'none',
});

export default class App extends Component<{}> {
  render() {
    return (
      <TheStackNavigator/>
    );
  }
}