使用反应导航导航到嵌套屏幕但使用 reset/replace 操作？

Question

我有一个带有多个堆栈导航器（嵌套）的应用程序。 docs 表示您导航到嵌套屏幕，例如：

navigation.navigate('Root', { screen: 'Settings' });

但是，在我的情况下，我不想让用户返回，所以我想使用 reset/replace 操作。你会怎么做？

文档说明了如何重置路线，但没有提供有关如何指定屏幕的信息，例如

navigation.reset({
        index: 0,
        routes: [{name: 'Root'}], //Where to put screen?
      });

编辑这是我的设置在顶层，我有 3 个屏幕：

    <Stack.Navigator
      initialRouteName="HiddenScreen"
      screenOptions={{headerShown: false}}>
      <Stack.Screen
        name="HiddenScreen"
        component={HiddenScreen}
      />
      <Stack.Screen
        name="VideoConferenceIncoming"
        component={VideoConferenceIncoming}
        }}
      />
      <Stack.Screen name="CreateUser" component={CreateUser} />
    </Stack.Navigator>

现在 CreateUser 屏幕内部也有一个堆栈：

          <Stack.Navigator
            initialRouteName={initialRoute}
            screenOptions={{
              headerShown: false,
            }}>
            <Stack.Screen name="Step1" component={CreateUserStep1} />
            <Stack.Screen name="Step2" component={CreateUserStep2} />
            <Stack.Screen name="UserRegistered" component={UserRegistered} />
            <Stack.Screen name="ChangePassword" component={ChangePassword} />
            <Stack.Screen name="WaitingRoom" component={WaitingRoom} />
          </Stack.Navigator>

假设我目前在 VideoConferenceIncoming 屏幕内。我想导航到 CreateUser>Waiting Room 屏幕。但是，我不想让用户返回。

目前我有这个不太正确的解决方案：

      navigation.reset({
        index: 0,
        routes: [{name: 'CreateUser'}],
      });
      navigation.navigate('CreateUser', {
        screen: 'WaitingRoom',
        params: {queuePosition: qPos, ticketNumber: ticketNumber},
      });

这是不对的，因为来自 WaitingRoom 屏幕的用户仍然可以后退一步。

Answer 1

文档 here 告诉您如何操作。但如果您不熟悉 react-navigation 及其工作原理，可能会有点难以理解。

它说的是您现在可以在使用 reset 时设置嵌套导航器的状态。因此，您可以在您正在设置的导航器状态下指定要导航到的特定屏幕。

所以在你的情况下，重置将如下所示。

navigation.dispatch(
 CommonActions.reset({
    index: 0,
    routes: [
        {
            name: 'CreateUser',
            state: {
                routes: [{name: 'WaitingRoom'}],
            },
        },
    ],
  }),
);

使用反应导航导航到嵌套屏幕但使用 reset/replace 操作？

Navigating to a nested screen with react navigation but using a reset/replace action?

react-native

react-navigation

react-navigation-stack