Reputation: 37
What I want is when i click on the clock icon at the BottomTabNavigator, i have a new page with the features below:
possibility to go back (go to the homepage)
I have already fixed the two first point... The third one makes me confused!
Is there someone who can help me ?
"dependencies": {
"expo": "^31.0.2",
"react": "16.5.0",
"react-elements": "^1.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-native-elements": "^0.19.1",
"react-native-snap-carousel": "^3.7.5",
"react-native-vector-icons": "^6.1.0",
"react-navigation": "^3.0.0"
},
**CODE : **
//Differents Stack Navigators
const AppStackNavigator = createAppContainer(createStackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
header: < Head / >
}
},
Search: {
screen: Search,
navigationOptions: {
title: "Rechercher",
headerStyle: {
backgroundColor: '#00aced'
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
}
}
}
}));
const HoraireStackNAvigator = createAppContainer(createStackNavigator({
Horaire: {
screen: Horaires,
navigationOptions: {
title: "Horaires"
}
}
}))
const PaimentStackNAvigator = createAppContainer(createStackNavigator({
Horaire: {
screen: Paiement
}
}))
//The Principle TabNavigator
const TabContainer = createBottomTabNavigator({
Home: {
screen: AppStackNavigator,
},
Paiement: {
screen: PaimentStackNAvigator,
},
Horaires: {
screen: HoraireStackNAvigator,
navigationOptions: {
tabBarVisible: false
}
}
}, {
initialRouteName: 'Home',
order: ['Paiement', 'Horaires', 'Home', 'Proximite', 'Settings'],
//Default Options for the bottom Tab
defaultNavigationOptions: ({
navigation
}) => ({
tabBarIcon: ({
focused,
horizontal,
tintColor
}) => {
const {
routeName
} = navigation.state;
let iconName;
if (routeName === 'Home') {
iconName = `ios-home${focused ? '' : ''}`;
} else if (routeName === 'Settings') {
iconName = `ios-settings${focused ? '' : ''}`;
} else if (routeName === 'Horaires') {
iconName = `ios-clock${focused ? '' : ''}`;
} else if (routeName === 'Proximite') {
iconName = `ios-locate${focused ? '' : ''}`;
} else if (routeName === 'Paiement') {
iconName = `ios-cart${focused ? '' : ''}`;
}
return <Ionicons name = {
iconName
}
size = {
horizontal ? 20 : 35
}
color = {
tintColor
}
/>;
}
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
tabStyle: {
backgroundColor: '#000'
},
showLabel: false,
showIcon: true
}
})
export default AppTabNavigator = createAppContainer(TabContainer);
Upvotes: 0
Views: 193
Reputation: 444
React navigation stack provide default go back option its usually based on your stack. close active screen and move back in the stack using
this.props.navigate("goBack")
this.props.navigate.pop("HomeScreen")
We can also push or navigate to HomeScreen by using
this.props.navigate.navigate("HomeScreen")
this.props.navigate.push("HomeScreen")
Upvotes: 1