反応ナビゲーションを使用してカスタムサイドバーコンポーネントでのみエラーが発生する

Question

私はReact Nativeを初めて使用していて、グーグルではあるが回答を見つけることはできません。

私はナビゲーションに反応使用して、カスタムサイドバーを作っています：

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', 
});