react-native - 如何使用 ReactNavigation 5 在选项卡单击时重置选项卡中的选项卡历史记录？

Question

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

屏幕1->屏幕2->屏幕3

现在如果我点击选项卡，它应该进入初始屏幕(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>
  );
}

我面临的这段代码中有两个问题。

当我单击 Tab 时，它会转到第一个选项卡，而不是移动到 Clicked 选项卡的第一个屏幕。

当我回到旧选项卡时，历史记录也不会在该选项卡上重置。

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

Answer 1

如果您正在处理选项卡，然后想重置选项卡，请尝试此 React Navigation 5，这里是链接 see the documentation React Navigation 5

<BottomTab.Screen
name="Post"
component={PostStack}
options={{
  unmountOnBlur: true,// set this props in your tab screen options
  title: 'Post',
  tabBarIcon: focused => <TabBarIcon focused={focused} name="Post" />,
}}

/>