Bonjour les gars, j'ai 5 conteneurs dans ma barre d'onglets et j'aimerais savoir s'il y a une option pour revenir à l'écran principal si je sélectionne un autre conteneur d'onglets.
J'ai donc ce qui suit
https://snack.expo.io/@react -navigation / stacks-in-tabs-v3
Pendant que je suis dans l'onglet Accueil
, je clique sur Aller aux détails
puis je passe à l'onglet Paramètres
. Si je retourne au conteneur Home
, je veux voir l'écran par défaut qui est HomeScreen
Une option?
3 Réponses :
Parce que votre DetailScreen
est imbriqué dans la pile Accueil
, vous devez naviguer d'un niveau de plus vers cet écran
_navigateHome = () => { const navigateAction = NavigationActions.navigate({ routeName: 'Home', action: NavigationActions.navigate({ routeName: 'Home' }), }); this.props.navigation.dispatch(navigateAction); }
Alors, où dois-je appeler _navigateHome
?
lorsque vous appuyez sur le bouton Accueil dans SettingsScreen
eh bien mon idée n'était pas de partir de là mais d'onglets. Ainsi, dans l'onglet Accueil
, je suis dans l'écran Détails
, je passe à l'onglet Paramètres
à partir de la barre d'onglets et à partir de là, je sélectionne Accueil code> onglet de la barre d'onglets
Vous pouvez redéfinir le tabBarOnPress
des navigationOptions
de chaque StackNavigator
comme ceci:
const stacks = [ { Home: HomeScreen, Details: DetailsScreen }, { Settings: SettingsScreen, Details: DetailsScreen } ].reduce((stacksObj, stack) => { const initialRoute = Object.keys(stack)[0]; stacksObj[initialRoute] = createStackNavigator( stack, { navigationOptions: { tabBarOnPress: ({ navigation }) => navigation.navigate({ routeName: initialRoute, action: navigation.popToTop() }) } } ); return stacksObj }, {}); export default createAppContainer(createBottomTabNavigator( stacks, { /* same defaultNavigationOptions as the snack example */ } ));
Il semble que l'API a changé, la nouvelle façon d'y parvenir est:
import { CommonActions } from '@react-navigation/native'; navigation.dispatch( CommonActions.navigate({ name: 'Profile', params: { user: 'jane', }, }) );