Question

DrawerNavigator 引发未知错误

2017-12-29

980

react-native react-navigation

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

问候， Emir

Answer 1

尝试像这样分离您的组件。

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

要查看完整示例代码，您可以访问链接或测试此代码，您可以使用 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/>
    );
  }
}

Answer 2

只需将

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

添加到 drawerConfigs