在 tabBarOnPress 上的 createBottomTabNavigator 中重置 StackNavigator

Question

我有这样的结构：

底部标签导航器：

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

正如解释所给出的那样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 2

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

Answer 3

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

还有 link 描述了属性 https://reactnavigation.org/docs/bottom-tab-navigator/

Answer 4

解决方案一：

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

方案二：

像这样在标签页中使用 unmountonblur 道具

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

在 tabBarOnPress 上的 createBottomTabNavigator 中重置 StackNavigator

Reset StackNavigator inside createBottomTabNavigator on tabBarOnPress

react-native

react-navigation

stack-navigator