如何使用ReactNavigation 5在标签页的标签页中重置标签页历史？

Question

我正在使用React Navigation5。我有一个标签导航器，想清除单击标签上的标签历史记录。例如，我在选项卡1上，然后转到选项卡2。从tab2，我导航

screen1-> screen2-> screen3

现在，如果我单击选项卡，它将进入初始屏幕（screen1）。但它不起作用，它以错误的方式起作用。这是我的代码。

import React from 'react';

import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { CommonActions, StackActions } from '@react-navigation/native';


// Custom imports:
import StartScreen from '../screens/start/StartScreen';
import ProductsScreen from '../screens/products/ProductsScreen';
import AddCustomerScreen from '../screens/customers/AddCustomerScreen';
import CustomersScreen from '../screens/customers/CustomersScreen';
import WebviewScreen from '../screens/webview/WebviewScreen';

// Menu Screen
import MenuScreen from '../screens/menu/MenuScreen';
import CurrentAccountScreen from '../screens/menu/CurrentAccountScreen';
import AccountDetailScreen from '../screens/menu/AccountDetailScreen';
import AppInfoScreen from '../screens/menu/AppInfoScreen';
import MessagesScreen from '../screens/menu/MessagesScreen';

import { Colors, GlobalStyles } from '../constants';

import { Badge, CustomIcon } from '../components/icons';
import {
  iconStart,
  iconProducts,
  iconCustomers,
  iconMenu
} from '../components/icons/TabBarIcons';
import {
  IconLowbarAddOrder,
} from '../components/IconFiles';


const Stack = createStackNavigator();

// Initial Parameters for WebView
let initParamsForWebView = {
  url: '',
  screenName: '',
  haveUser: false,
  user: false
};

/**
* Start Stack Navigator
**/
const INIT_START_ROUTE = 'Start';
function StartStack() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }} initialRouteName={INIT_START_ROUTE}>
      <Stack.Screen name="Start" component={StartScreen} />
      <Stack.Screen name="Webview"
        component={WebviewScreen}
        initialParams={initParamsForWebView}
      />
    </Stack.Navigator>
  );
}


/**
* Products Stack Navigator
**/
const INIT_PRODUCTS_ROUTE = 'Products';
function ProductsStack() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }} initialRouteName={INIT_PRODUCTS_ROUTE}>
      <Stack.Screen name="Products" component={ProductsScreen} />
      <Stack.Screen name="Webview"
        component={WebviewScreen}
        initialParams={initParamsForWebView}
      />
    </Stack.Navigator>
  );
}

/**
* Menu Stack Navigator
**/
const INIT_MENU_ROUTE = 'Menu';
function MenuStack() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }} initialRouteName={INIT_CUSTOMERS_ROUTE}>
      <Stack.Screen name="Menu" component={MenuScreen} />
      <Stack.Screen name="CurrentAccount" component={CurrentAccountScreen} />
      <Stack.Screen name="AccountDetail" component={AccountDetailScreen} />
      <Stack.Screen name="AppInfo" component={AppInfoScreen} />
      <Stack.Screen name="Messages" component={MessagesScreen} />
      <Stack.Screen name="Webview"
        component={WebviewScreen}
        initialParams={initParamsForWebView}
      />
    </Stack.Navigator>
  );
}


function resetStack(navigation, _route, _stack, _screen){
  console.log(_route);
  console.log(navigation);
  console.log('ResetStack Called');
  navigation.dispatch(
            CommonActions.reset({
                index: 0,
                routes: [
                    { name: _stack}
                ]
            })
        );
}

const BottomTab = createBottomTabNavigator();

const INITIAL_ROUTE_NAME = 'StartStack';
export default function ParticipantNavigator({ navigation, route }) {
  // screenOptions={{ headerShown: false }} 
  return (
    <BottomTab.Navigator
      screenOptions={{ headerShown: false }} 
      initialRouteName={INITIAL_ROUTE_NAME}
      lazy='false'
      tabBarOptions={{}}>
      <BottomTab.Screen
        name="StartStack"
        component={StartStack}
        options={{
          title: 'Start'
        }}

        listeners={{
          tabPress: e => {
            resetStack(navigation, route, 'StartStack', INIT_START_ROUTE);
          }
        }}
      />
      <BottomTab.Screen
        name="ProductsStack"
        component={ProductsStack}
        options={{
          title: 'Products'
        }}
        listeners={{
          tabPress: e => {
            resetStack(navigation, route, 'ProductsStack', INIT_PRODUCTS_ROUTE);
          }
        }}
      />

      <BottomTab.Screen
        name="MenuStack"
        component={MenuStack}
        options={{
          title: 'Menu'
        }}
        listeners={{
          tabPress: e => {
            resetStack(navigation, route, 'MenuStack', INIT_MENU_ROUTE);
          }
        }}
      />
    </BottomTab.Navigator>
  );
}

我在此代码中面临的两个问题。

1. 当我单击选项卡时，它将转到第一个选项卡，而不是移至“单击的选项卡”的第一个屏幕。
2. 当我回到旧选项卡时，“历史记录”也不会在该选项卡上重置。

任何人都可以帮助我，谢谢。

Answer 1

您可以尝试这个porp：unmountOnBlur

当您从ProductsStack移至MenuStack时，ProductsStack将卸载，

链接是here