DrawerNavigator投掷未知错误

Question

我有以下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)

问候，埃米尔

Answer 1

尝试将组件分开。

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

要查看完整示例的代码，您可以访问该链接或测试此代码，您可以使用Expo应用程序扫描ExpoSnack提供的QR代码。 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/>
    );
  }
}

Answer 2

只需添加

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

到drawerConfigs