将屏幕重置为第一个父屏幕，从嵌套屏幕（React 导航和 React Native）

Question

我已经按照文档使用 react-navigation v5 ("@react-navigation/native": "^5.2.3") 创建底部标签导航

目前在我的文档https://reactnavigation.org/docs/bottom-tab-navigator/的项目中部分使用了此示例，以满足版本 5 的需求。

示例可能如下

// 导航.tsx

import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
import { TabActions } from '@react-navigation/native';
import * as React from 'react';

function Navigation({ state, descriptors, navigation }: BottomTabBarProps) {

  return (
    <View>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const isFocused = state.index === index;
        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            const jumpToAction = TabActions.jumpTo(options.title || 'Home');
            navigation.dispatch(jumpToAction);
          }
        };

        return (
          <TouchableOpacity
            key={options.title}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            accessibilityRole="button"
            active={isFocused}
            activeOpacity={1}
            testID={options.tabBarTestID}
            onPress={onPress}
          >
            {route.name}
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

export default Navigation;

但是，我有几个嵌套的 StackNavigators，如 AppNavigator.tsx 中所述

应用导航器.tsx

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import React from 'react';
import { AppState, AppStateStatus } from 'react-native';

import Navigation from '../components/navigation/Navigation';
import AccountScreen from '../screens/account';
import SettingsScreen from '../screens/settings';
import SupportScreen from '../screens/support';

import HomeNavigator from './HomeNavigator';
import TransactionNavigator from './TransactionNavigator';

const { Navigator, Screen } = createBottomTabNavigator();

const AppNavigator = () => {

  return (
    <View>
      <Navigator tabBar={(props) => <Navigation {...props} />}>
        <Screen
          component={HomeNavigator}
          name="Home"
          options={{ title: 'Home' }}
        />
        <Screen
          component={TransactionNavigator}
          name="Transactions"
          options={{
            title: 'Transactions' }}
        />
        <Screen
          component={AccountScreen}
          name="Account"
          options={{ title: 'Account' }}
        />
        <Screen
          component={SupportScreen}
          name="Support"
          options={{ title: 'Support' }}
        />
        <Screen
          component={SettingsScreen}
          name="Settings"
          options={{
            title: 'Settings' }}
        />
      </Navigator>
    </View>
  );
};

export default AppNavigator;

我的目标是在每次用户离开时重置嵌套的 StackNavigator。 因此示例可以是 HOME -> TRANSACTIONS -> TRANSACTION_DETAIL （这是嵌套导航器的一部分）-> HOME -> TRANSACTIONS

目前，我在“遍历”路径的最后一步之后看到了 TRANSACTION_DETAIL。 不过，我想改为查看 TRANSACTIONS。 我发现如果我改变

if (!isFocused && !event.defaultPrevented) {
  const jumpToAction = TabActions.jumpTo(options.title || 'Home');
  navigation.dispatch(jumpToAction);
}

至

if (!isFocused && !event.defaultPrevented) {
  navigation.reset({ index, routes: [{ name: route.name }] });
}

它或多或少地做了这件事。 但是它重置了导航，所以它被卸载并返回时，所有数据都丢失了，需要重新获取。

在导航中是PopToTop() function 在此 scope 中不可用。

我还尝试通过descriptors访问所有嵌套导航器，但我还没有找到如何正确强制它们到 popToTop。

这个想法是在一个地方做，所以它会自动处理，不需要在每个屏幕上实现它。

Answer 1

我曾尝试使用 navigator.popToTop() 但它不起作用。 它可能是 stackNavigator 和 TabNavigator 与路线具有不同的历史记录。 我已经用下面的代码解决了这个问题。 “主页”是我的堆栈导航器名称，另一个“主页”是屏幕名称（两者对我来说都是一样的）

tabBarButton: props => (
        <TouchableOpacity
          {...props}
          onPress={props => {
            navigation.navigate('Home', {
              screen: 'Home'
            })
          }}
        />
      ),