Сбросить StackNavigator внутри createBottomTabNavigator на вкладке BarOnPress

Question

У меня есть эта структура:

bottomTabNavigator:

• Экран 1
• Экран 2
  • Экран А
  • Экран Б

Когда пользователь переходит к экрану B, затем переходит к экрану 1 и возвращается к экрану 2, он переходит непосредственно к B, как я могу сбросить стек, используя функцию tabBarOnPress, чтобы заставить пользователя вернуться к A?

Я использую реагирующую навигацию 3.0.9, я пробовал несколько кодов, но я получил ошибки, и я думаю, что это связано с версией.

Моя структура кода:

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

Answer 1

Как дано объяснение здесь. Вы можете выполнить сброс при нажатии на вкладку следующим образом:

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

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

Так что вы должны сделать что-то вроде:

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

Answer 2

В новой версии вы можете использовать опцию unmountOnBlur для экрана. Вот небольшой пример кода:

 <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>

И есть ссылка, описывающая свойство https://reactnavigation.org/docs/bottom-tab-navigator/

Answer 3

Так что ответ уже есть, но он может помочь некоторым людям. Вы можете использовать свойство createBottomTabNavigator, resetOnBlur и установить для него значение true. По умолчанию он имеет значение false, и поэтому он всегда сохраняет состояние в каждом навигаторе вкладок.

Answer 4

Решение 1:

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

Решение 2:

используйте unmountonblur props на экране вкладки, как это

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