Question

I have this structure:

bottomTabNavigator:

Screen 1
Screen 2
- Screen A
- Screen B

When the user navigates to Screen B, then goes to Screen 1 and go back to Screen 2, he goes directly in B, how can I reset the stack using the tabBarOnPress function to force the user to go back to A?

I'm using react-navigation 3.0.9, I tried a few codes but I got errors and I think it is due to the version.

My code structure:

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

Answer 1

在新版本中，可以为屏幕使用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 2

由解释here给出。您可以在点击以下标签时执行重置操作：

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

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

Reset StackNavigator inside createBottomTabNavigator on tabBarOnPress

4 个答案: