仅使用反应导航的自定义侧边栏组件出错

Question

我是React Native的新手，一直在谷歌搜索，但无法找到答案。

我正在使用React Navigation并制作了自定义侧边栏：

import React, { Component } from 'react'
import {DrawerItems} from 'react-navigation'
import { AppRegistry, StatusBar } from "react-native";
import { Container, Content, Text, List, ListItem } from "native-base";



class Sidebar extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return(
      <Container>
        <Content>
          <DrawerItems {...props} />
        </Content>
      </Container>
    )
  }
}

export default Sidebar;

但每当我尝试将配置添加到DrawerNavigation时，我都会收到错误：undefined is not an object (evaluating 'route.routeName')

当我删除contentComponent时，错误消失了。

这是我的Navigator.js文件：

import React from 'react'
import {Platform, View} from 'react-native'
import {
  StackNavigator,
  DrawerNavigator,
} from 'react-navigation'
import {colors} from './utils/constants.js'

import { HamburgerIcon } from './components/icons'

import { Sidebar, Navbar } from './components'

import SignUp from './screens/Auth/SignUp'
import AccountType from './screens/Auth/AccountType'
import Dashboard from './screens/Dashboard'






// BEGIN USER ONBOARDING

const AuthStack = DrawerNavigator({
  SignUp: { 
    screen: SignUp,
    navigationOptions: ({navigation}) => ({
      drawerLabel: 'Sign Up',
      headerTitle: 'Sign Up',

    })
  },
  Stage1: { 
    screen: AccountType,
    navigationOptions: ({navigation}) => ({
      drawerLabel: 'Account Type',
      headerTitle: 'Account Type',

    }) 
  }
}, {
  contentComponent: props => <Sidebar {...props} />
});


// ONCE USER IS AUTHENTICATED

const MainStack = DrawerNavigator({
  Dashboard: { 
    screen: Dashboard,
    navigationOptions: ({navigation}) => ({
      headerTitle: 'Dashboard',

    }) 
  },
});



// MAIN NAV OUTPUT

const Navigation = StackNavigator({
  AuthScreen: { 
    screen: AuthStack,
    navigationOptions: ({navigation}) => ({
      header: () => (<Navbar {...navigation}/>)
    })
  },
  MainFlow: {
    screen: MainStack,
    navigationOptions: ({navigation}) => ({
      header: () => (<Navbar {...navigation}/>)
    })
  }
})

export default Navigation;

基于所有的例子，我似乎正在做正确的事情。任何帮助，将不胜感激。

Answer 1

这实际上是react-navigation中的一个错误，如此处所示：https://github.com/react-community/react-navigation/issues/3148

解决此问题之前的解决方法是将以下内容添加到抽屉配置中：

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

例如：

const DrawerNav = DrawerNavigator({
  Page1: { screen: App },
  Page2: { screen: App2 },
}, {
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoute: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle',
  drawerBackgroundColor: '#000000',
});