2
votes

React Navigation - Sauter entre les onglets

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?


0 commentaires

3 Réponses :


0
votes

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);
  }


3 commentaires

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 onglet de la barre d'onglets



0
votes

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 */ }
));


0 commentaires

0
votes

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',
    },
  })
);


0 commentaires