微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript – 如何在React-Navigation中单击Bottom Tab Navigator打开DrawerNavigator?

我正在使用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
  }
})

我想点击bottomTabNavigator打开drawerNavigator.即,每当按下更多标签时,drawerNavigator都会打开.

我怎样才能做到这一点 ?

我是React-Native的新手.

解决方法:

您可以在导航选项中使用tabBarOnPress事件来修改选项卡导航单击

例如.

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐