Reputation: 768
Hello I am using this code in the react native for creating tabs. but i want to use multiple screens on the single according to the user pressed buttons. so how can i do this in react native
const TabNavigator = createBottomTabNavigator(
{
Home:{
screen:Screen1,
navigationOptions:{
tabBarLabel:'firsttab',
tabBarIcon:({tintColor})=>(
<Image source = {require("../../Images/react-logo.png")} style={{width : 25 , height:25}}/>
)
}
},
i am getting screen1 but i want that on click firsttab i want to switch tab screens. how can i do this.
Upvotes: 0
Views: 1730
Reputation: 12225
It's something like you have to create a stackNavigator and use it in the bbottomTabNavigator . see the below code :
const AppStack = createStackNavigator(
{
HomeScreen: {
screen: Home
},
AirportMeeting:{
screen:AirportMeeting
},
MeetingPoint:{
screen:MeetingPoint
},
DriverDetails:{
screen:DriverDetails
},
},
{
initialRouteName:"HomeCard",
}
);
and now in your bottomtab navigator , you just include AppStack and other screens ,
const TabNavigator = createBottomTabNavigator({
Home: AppStack,
Notification:Notifications,
Account: SettingsScreen,
});
here Home has appstack and app stack has multiple screens inside it. Im using react-navigation
for it . check the link react navigation . .
and also im using createStackNavigator and createBottomTabNavigator , check in there docs.
Hope it helps. feel free for doubts/
Upvotes: 1
Reputation: 1
const Screen1 = createStackNavigator({
//...path your screen1,
});
const Screen2 = createStackNavigator({
//...path your screen2,
});
const TabNavigator = createBottomTabNavigator({
Screen1,
Screen2
});
Upvotes: 0