Question

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

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

但是，在我的情况下，我不想允许用户返回，因此我想使用重置/替换操作。你会怎么做？

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

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告诉您如何做。但是，如果您不熟悉反应导航及其工作原理，可能会有点难以理解。

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

因此，在您的情况下，重置将如下所示。

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

通过反应导航导航到嵌套屏幕，但使用重置/替换操作？

1 个答案: