1
votes

Réinitialiser StackNavigator dans createBottomTabNavigator sur tabBarOnPress

J'ai cette structure:

bottomTabNavigator:

Écran 1
Écran 2
- Écran A
- Écran B

Lorsque l'utilisateur navigue vers l'écran B, puis passe à l'écran 1 et retourne à l'écran 2, il va directement dans B, comment puis-je réinitialiser la pile en utilisant la fonction tabBarOnPress pour forcer l'utilisateur à revenir à A?

J'utilise react-navigation 3.0.9, j'ai essayé quelques codes mais j'ai eu des erreurs et je pense que c'est dû à la version.

Ma structure de code:

const Navigator = createBottomTabNavigator({
        Screen1: {
            screen: Screen1,
            navigationOptions: () => ({
                tabBarOnPress...
            })
        },
        Screen2: {
            screen: Screen2,
            navigationOptions: () => ({
                tabBarOnPress...
            })
        }
})

react-native react-navigation stack-navigator

3 commentaires

Je sais que cela prête à confusion, mais la balise ici devrait en fait être react-navigation car react-native-navigation est l'implémentation de la navigation native wix pour react et react-navigation est une solution de navigation basée sur JS pour react-native.

J'ai édité, merci!

Avez-vous essayé ma solution suggérée ici dans les réponses?

4 Réponses :

0
votes

Comme indiqué par l'explication ici . vous pouvez effectuer une action de réinitialisation en cliquant sur un onglet comme celui-ci:

tabBarOnPress{() => StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Screen1' })],
})};

Vous devriez donc faire quelque chose comme:

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);

1 commentaires

Ça n'a pas marché. J'utilise maintenant Redux et componentWillReceiveProps () pour actualiser l'écran.

2
votes

Il y a donc déjà une réponse, mais celle-ci pourrait aider certaines personnes. Vous pouvez utiliser la propriété de createBottomTabNavigator, resetOnBlur et la configurer sur true. Il est faux par défaut et à cause de cela, il enregistre toujours l'état dans chaque navigateur d'onglets.

0 commentaires

1
votes

Dans la nouvelle version, vous pouvez utiliser l'option unmountOnBlur pour l'écran. Il existe un petit exemple de code:

 <NavigationContainer>
        <Tab.Navigator tabBarOptions={{
            activeTintColor: ThemeConstants.mainColor,
        }}>
            <Tab.Screen name="Categories" component={CategoriesStackScreen}
                        options={{
                            unmountOnBlur:true
                            tabBarLabel: translate('Categories'),
                            tabBarIcon: ({color, size}) => (
                                <Icon  style={[{color: color}]} type='MaterialIcons' name='restaurant-menu'/>
                            ),
                        }}
            />
            <Tab.Screen name="Info" component={InfoStackScreen}
                        options={{
                            unmountOnBlur:true,
                            tabBarLabel: translate('Info'),
                            tabBarIcon: ({color, size}) => (
                                <Icon  style={[{color: color}]} type='MaterialIcons' name='info-outline'/>
                            ),
                        }}
            />
            <Tab.Screen name="Account" component={AccountStackScreen}
                        options={{
                            unmountOnBlur:true,
                            tabBarLabel: translate('Account'),
                            tabBarIcon: ({color, size}) => (
                                <Icon style={[{color: color}]} type='Feather' name='user'/>
                            ),
                        }}/>
            <Tab.Screen name="CartStackScreen" component={CartStackScreen}
                        options={{
                            unmountOnBlur:true,
                            tabBarBadge: (quantity && quantity>0)?quantity:null,
                            tabBarLabel: translate('Cart'),
                            tabBarIcon: ({color, size}) => (
                                <Icon  style={[{color: color}]} type='Feather' name='shopping-cart'/>
                            ),
                        }}
            />
        </Tab.Navigator>
    </NavigationContainer>

Et il y a le lien qui décrit la propriété https://reactnavigation.org/docs/bottom-tab-navigator/

0 commentaires

0
votes

Solution 1:

<Tab.Navigator
    >
      <Tab.Screen
        name='User'
        component={ProfileModule}
        options={{ unmountOnBlur: true }}
      />
    </Tab.Navigator>

Solution 2:

utiliser des accessoires unmountonblur dans l'écran de l'onglet comme celui-ci

import {  StackActions } from '@react-navigation/native';
   
if(this.props.navigation.canGoBack())
{
    this.props.navigation.dispatch(StackActions.popToTop());
}

0 commentaires