在 tabBarOnPress 上的 createBottomTabNavigator 中重置 StackNavigat

Question

我有这个结构：

底部选项卡导航器：

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

当用户导航到屏幕 B，

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

我

正在使用反应导航 3.0.9，我尝试了一些代码，但我遇到了错误，我认为这是由于版本造成的。

我的代码结构：

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

Answer 1

在新版本中，您可以使用屏幕的卸载模糊选项。有一个小代码示例：

<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

所以已经有一个回应，但这个可以帮助一些人。您可以使用createBottomTabNavigator的属性，重置OnBlur并将其设置为true。默认情况下，它处于 false，因此，它始终在每个选项卡导航器中保存状态。

Answer 3

正如这里的解释所给出的。您可以在单击如下所示的选项卡时执行重置操作：

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 4

解决方案 1：

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

解决方案 2：

像这样在选项卡屏幕中使用卸载模糊道具

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