react-native - 在 tabBarOnPress 上的 createBottomTabNavigator 内重置 StackNavigator

Question

我有这样的结构:

底部Tab导航器:

• 屏幕 1
• 屏幕 2
  • 屏幕A
  • 屏幕 B

当用户导航到屏幕 B，然后转到屏幕 1 并返回屏幕 2 时，他直接进入 B，如何使用 tabBarOnPress 函数重置堆栈以强制用户返回 A？

我使用的是react-navigation 3.0.9，我尝试了一些代码，但出现了错误，我认为这是由于版本所致。

我的代码结构:

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/