如何在 React-Navigation 中单击底部选项卡导航器时打开 DrawerNavigator？

Posted 2023-05-07

【中文标题】如何在 React-Navigation 中单击底部选项卡导航器时打开 DrawerNavigator？

【英文标题】：How do i open DrawerNavigator upon clicking Bottom Tab Navigator in React-Navigation?

【发布时间】：2018-11-25 20:53:54

【问题描述】：

我正在使用react-navigation 并尝试在单击BottomTabNavigator 中的标签项时打开抽屉（使用DrawerNavigator）。

我当前的代码如下所示

export default createBottomTabNavigator(
  Dashboard:
      screen:Dashboard,
      navigationOptions:
        tabBarLabel:'Dashboard',
        tabBarIcon:(tintColor) => (
          <Icon name ="ios-speedometer-outline" color =
            tintColor size = 24 />
        )
      
  ,
  Customers:
    screen:Customers,
    navigationOptions:
      tabBarLabel:'Customers',
      tabBarIcon:(tintColor) => (
        <Icon name ="ios-people-outline" color =
          tintColor size = 24 />
      )
    
  ,
  Invoice:
    screen:Invoice,
    navigationOptions:
      tabBarLabel:'Invoice',
      tabBarIcon:(tintColor) => (
        <Icon name ="ios-copy-outline" color =
          tintColor size = 24 />
      )
    
  ,
  TimeTracker:
    screen:TimeTracker,
    navigationOptions:
      tabBarLabel:'Timetracker',
      tabBarIcon:(tintColor) => (
        <Icon name ="ios-timer-outline" color =
          tintColor size = 24 />
      )
    
  ,
  More:
   screen : More,

    navigationOptions:
      tabBarLabel:'More',
      tabBarIcon:(tintColor) => (
        <Icon name ="ios-menu-outline" color = tintColor size = 24 />
      )
    
  
,
  tabBarOptions:
    activeTintColor: 'red',
    inactiveTintColor: 'grey',
    style:
      backgroundColor: 'white',
      borderTopWidth : 0,
      shadowOffset: width:5,height : 3,
      shadowColor: 'black',
      shadowOpacity: 0.5,
      elevation: 5
    
  
)

const MyApp = createDrawerNavigator(
  Home :
    screen : HomeScreen
  ,
  Settings: 
    screen:SettingScreen
  
)

我想通过底部TabNavigator 的点击打开drawerNavigator。即，每当按下更多选项卡时，drawerNavigator 就会打开。

我该怎么做？

我是 React-Native 的新手。

【参考方案1】：

您可以在导航选项中使用 tabBarOnPress 事件来修改标签导航点击

例如。

tabBarOnPress: (tab) => 
        //your code and other stuff 
        tab.jumpToIndex(tab.scene.index)
 

【讨论】：

兄弟，我无法打开抽屉导航。