如何重置嵌套导航器（react-navigation v5）

Question

有两组堆栈导航器；

const SetOneScreens = () => (
  <Stack.Navigator initialRouteName="AScreen">
    <Stack.Screen name="AScreen" component={AScreen} />
    <Stack.Screen name="BScreen" component={BScreen} />
  </Stack.Navigator>
);
const SetTwoScreens = () => (
  <Stack.Navigator initialRouteName="CScreen">
    <Stack.Screen name="CScreen" component={CScreen} />
    <Stack.Screen name="DScreen" component={DScreen} />
  </Stack.Navigator>
);

嵌套在抽屉导航器中

    <NavigationContainer>
      <Drawer.Navigator initialRouteName="SetOneScreens">
        <Drawer.Screen name="SetOneScreens" component={SetOneScreens} />
        <Drawer.Screen name="SetTwoScreens" component={SetTwoScreens} options={{swipeEnabled: false}} />
      </Drawer.Navigator>
    </NavigationContainer>

我想从 BScreen 导航到 DScreen 并重置堆栈（为了不让 android 中的硬件后退按钮返回到 BScreen）

和嵌套情况一样，首先要定义导航器名称；我应该如何定义重置操作中的屏幕。

// For navigation 
props.navigation.navigate('setTwoScreens',{screen:'DScreen'})

// For reset I can only navigate to initial screen 
props.navigation.reset({index:0,routes:[{name:'setTwoScreens'}]})

我应该如何处理 reset 和 navigation 或 CommonActions

Answer 1

如 react-navigation-v5 的 documentation 中所写，您需要使用 reset-action 调度 CommonAction 以清除应用程序的 back-stack，这样应用程序就不会当用户按下设备的硬件 back-button 时不会返回上一屏幕，请检查以下示例，

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

props.navigation.dispatch({
  ...CommonActions.reset({
    index: 0,
    routes: [{ name: "AnotherStackNavigator" }]
  })
});

或者，如果您想重置到该 StackNavigator 中的特定屏幕，您可以这样做：

props.navigation.dispatch({
  ...CommonActions.reset({
    index: 0,
    routes: [
      {
        name: "AnotherStackNavigator",
        state: {
          routes: [
            {
              name: "AnotherStackNavigatorScreen",
              params: {         
                  ...
              }
            }
          ]
        }
      }
    ]
  })
});

Answer 2

我尝试了 Aditya 的解决方案，但遇到后退按钮无法返回到新堆栈根目录的问题。

这似乎为我解决了这个问题：

props.navigation.dispatch({
  CommonActions.reset({
    index: 0,
    routes: [
      {
        name: "AnotherStackNavigator",
        state: {
          routes: [
            {
              name: "AnotherStackNavigatorRootScreen"
            },
            {
              name: "AnotherStackNavigatorScreen",
              params: {         
                  ...
              }
            }
          ]
        }
      }
    ]
  })
});

如何重置嵌套导航器（react-navigation v5）

How to reset nested navigators (react-navigation v5)

reactjs

react-native

react-navigation

react-navigation-stack

react-navigation-v5