React Navigation - 导航并设置后退按钮的历史记录

Question

我有一个使用 react-navigation@5.1 的 react-native 应用程序

我有一个带有多个选项卡的 TabNavigator（嵌套在堆栈导航器中）。每个选项卡都包含另一个 StackNavigator。这些选项卡堆栈之一有一个列表屏幕和一个详细信息屏幕。

应用设置为在应用处于后台时接收推送通知。当用户按下推送通知时，它会打开应用程序并将其导航到 details/:id 屏幕。

问题是，如果用户尚未在列表屏幕上，则后退按钮没有正确的历史记录并且不会出现。

如何确保详细信息屏幕的后退按钮始终将用户带到列表屏幕？

这是我的嵌套导航器的描述

<NavigationContainer>
 <Stack.Navigator>
    <Stack.Screen name="loading">
    <Stack.Screen name="auth">
    <Stack.Screen name="app">
      <Tabs.Navigator>
         <Tabs.Screen name="community">
           <Stack.Navigator>
              <Stack.Screen name="list">.  <- list
              <Stack.Screen name="detail"> <- detail
           </Stack.Navigator>
         </Tabs.Screen>
         <Tabs.Screen name="profile">
           <Stack.Navigator>
              <Stack.screen name="edit">  <- user may already be on this screen
              ...
           </Stack.Navigator>
         </Tabs.Screen>
         ... more tabs and stacks
    </Stack.Screen>
 </Stack.Navigator>
</NavigationContainer>

只要用户收到推送通知，他们就已经位于 Tab Navigator 内的 Stack Navigator 之一。同样，问题是用户可能在配置文件选项卡内的编辑屏幕上。我需要将它们重定向到社区选项卡的详细信息屏幕，但要确保历史记录包含用于返回功能的列表屏幕。

Answer 1

您可以使用重置操作替换路线历史记录。这应该可以帮助您开始：

import { CommonActions } from '@react-navigation/native';

navigation.dispatch(state => {
  // Assuming you only have the current screen in state.routes
  const routes = [{name: 'home-or-wherever'}, ...state.routes];

  return CommonActions.reset({
    ...state,
    routes,
    index: routes.length - 1,
  });
});

https://reactnavigation.org/docs/navigation-actions/#reset