I'm using react-navigation
and trying to open the drawer (with DrawerNavigator) upon clicking tab item in the BottomTabNavigator
.
My current code looks like this
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
}
})
I want to open drawerNavigator on the click of bottomTabNavigator. ie, whenever More tab is pressed drawerNavigator get open.
How can I do this ?
I am new to the React-Native.
you can use tabBarOnPress event in navigation options to modify tab navigation click
eg.
tabBarOnPress: (tab) => {
//your code and other stuff
tab.jumpToIndex(tab.scene.index)
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.