React Drawer Navigation 菜单图标未显示

Question

请注意，这是我使用“堆栈、抽屉和标签导航”的路线配置 堆栈和选项卡导航工作正常。但是抽屉图标根本没有显示，只有当我手动滑动窗口时抽屉才能工作。如何显示抽屉图标并使用它打开抽屉窗口？请帮我解决这个问题。

import React from "react"
import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { createDrawerNavigator } from 'react-navigation-drawer'
import Icon from 'react-native-vector-icons/Feather'

import HomeScreen from './screens/home/HomeScreen'
import ControlScreen from './screens/controls/ControlScreen'
import MoreScreen from './screens/more/MoreScreen' 
import SignUpScreen from './screens/signup/SignUpScreen'
import AboutScreen from './screens/about/AboutScreen'

const TabContainer = createBottomTabNavigator({
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarIcon: ({ tintColor, focused }) => <Icon name="home" size={20} color={`${focused ? tintColor : '#404040'}`} />,
        }
    },
    Controls: {
        screen: ControlScreen,
        navigationOptions: {
            tabBarIcon: ({ tintColor, focused }) => <Icon name="sliders" size={20} color={`${focused ? tintColor : '#404040'}`} />
        }
    },
    More: {
        screen: MoreScreen,
        navigationOptions: {
            tabBarIcon: ({ tintColor, focused }) => <Icon name="more-horizontal" size={20} color={`${focused ? tintColor : '#404040'}`} />
        }
    },
},{
        tabBarposition: 'bottom',
        swipeEnabled: false,
        tabBarOptions: { 
            activeTintColor: '#069',
            inactiveTintColor: '#404040',
            labelStyle: {
                fontSize: 14,
                paddingTop: 0,
                paddingBottom: 0
            },
            style:{
                borderTopWidth: 1,
                borderTopColor:'#333333',
                position: 'absolute',
                bottom: 0,
                left: 0
            },
            animationEnabled: false,
            tabStyle: {
                paddingBottom: 15,
                paddingTop: 0,
                height: 75,
                marginBottom: 0,
            },
        }
    }
)

const StackContainer = createStackNavigator({
    TabContainer,
},{
    defaultNavigationOptions: {
        headerShown: false
    }
}) 

const MainDrawerNavigator = createDrawerNavigator({
    Home: {
        screen: StackContainer,
        headerStyle: {
            backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
        title: 'Home',
        navigationOptions: {            
            drawerIcon: ({ tintColor }) => (
                <Icon name="home" size={20} color={'#404040'} />
            ),
        }    
    },
    SignUp: {
        screen: SignUpScreen,
        navigationOptions: {
            drawerIcon: ({ tintColor }) => (
                <Icon name="user" size={20} color={'#404040'} />
            ),
        }    
    },
    About: {
        screen: AboutScreen,
        navigationOptions: {
            drawerIcon: ({ tintColor }) => (
                <Icon name="alert-circle" size={20} color={'#404040'} />
            ),
        }    
    },

},
    {
        drawerOpenRoute: 'DrawerOpen',
        drawerCloseRoute: 'DrawerClose',
        drawerToggleRoute: 'DrawerToggle',
        navigationOptions: {
            drawerLockMode: 'locked-closed',                                               
        },
        drawerPosition: 'left',
        headerStyle: { backgroundColor: '#E73536' },
        headerTintColor: 'white',
        drawerOpenRoute: 'DrawerOpen',
        drawerCloseRoute: 'DrawerClose',
        drawerToggleRoute: 'DrawerToggle',
    },
)

export default createAppContainer(MainDrawerNavigator)

Answer 1

您需要将您的drawerNavigator 包含在stackNavigator 中，并且您可以在其中提供默认导航选项。

我已经编辑了你的代码检查这个：

import React from "react"
import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { createDrawerNavigator } from 'react-navigation-drawer';
import Icon from 'react-native-vector-icons/Feather'
import HomeScreen from './screens/Example'
import ControlScreen from './screens/Main'
import MoreScreen from './screens/Sample' 
import SignUpScreen from './screens/login'
import AboutScreen from './screens/login'

const TabContainer = createBottomTabNavigator({
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarIcon: ({ tintColor, focused }) => <Icon name="home" size={20} color={`${focused ? tintColor : '#404040'}`} />,
        }
    },
    Controls: {
        screen: ControlScreen,
        navigationOptions: {
            tabBarIcon: ({ tintColor, focused }) => <Icon name="sliders" size={20} color={`${focused ? tintColor : '#404040'}`} />
        }
    },
    More: {
        screen: MoreScreen,
        navigationOptions: {
            tabBarIcon: ({ tintColor, focused }) => <Icon name="more-horizontal" size={20} color={`${focused ? tintColor : '#404040'}`} />
        }
    },
},{
        tabBarposition: 'bottom',
        swipeEnabled: false,
        tabBarOptions: { 
            activeTintColor: '#069',
            inactiveTintColor: '#404040',
            labelStyle: {
                fontSize: 14,
                paddingTop: 0,
                paddingBottom: 0
            },
            style:{
                borderTopWidth: 1,
                borderTopColor:'#333333',
                position: 'absolute',
                bottom: 0,
                left: 0
            },
            animationEnabled: false,
            tabStyle: {
                paddingBottom: 15,
                paddingTop: 0,
                height: 75,
                marginBottom: 0,
            },
        }
    }
)



const MainDrawerNavigator = createDrawerNavigator({
    Home: {
        screen: TabContainer,
        headerStyle: {
            backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
        title: 'Home',
        navigationOptions: {            
            drawerIcon: ({ tintColor }) => (
                <Icon name="home" size={20} color={'#404040'} />
            ),
        }    
    },
    SignUp: {
        screen: SignUpScreen,
        navigationOptions: {
            drawerIcon: ({ tintColor }) => (
                <Icon name="user" size={20} color={'#404040'} />
            ),
        }    
    },
    About: {
        screen: AboutScreen,
        navigationOptions: {
            drawerIcon: ({ tintColor }) => (
                <Icon name="alert-circle" size={20} color={'#404040'} />
            ),
        }    
    },

},{
  initialRouteName:"Home"
}

)
const StackContainer = createStackNavigator({
  MainDrawerNavigator,
}, {  
  defaultNavigationOptions: ({ navigation }) => {  
      return {  
        headerTitle:"Welcome!",
          headerLeft: (  
              <Icon  
                  style={{ paddingLeft: 10 }}  
                  onPress={() => navigation.openDrawer()}  
                 name="menu"
                  size={30}  
              />  
          )  
      };  
  }  
}) 

export default createAppContainer(StackContainer)

希望这会有所帮助！