反应本机导航分离过程

Question

在我的申请中，我有一些多步骤表格，假设这是向公司添加新员工的过程，我们有如下步骤：

1. 个人信息
2. 汽车（选择或添加）
3. 最终信息

因此，当用户添加新员工应用程序时，当他可以浏览这 3 个屏幕时，会将他重定向到

AddEmployeeStack

。

屏幕 2（汽车）实际上是另一个堆栈 - 在此屏幕上，用户可以从现有汽车列表中选择一辆车，然后单击“添加”按钮并转到添加新汽车表单（这是另一个堆栈）

所以看起来像：

export const NewEmployeeStack: FC = () => {
  const { t } = useTranslation();

  return (
    <Stack.Navigator>
      <Stack.Screen name="personalInfo" component={PersonalInfoScreen} />
      <Stack.Screen name="employeeCar" component={EmployeeCarStack} />
      <Stack.Screen name="finalInfo" component={FinalInfoScreen} />
    </Stack.Navigator>
  );
};

export const EmployeeCarStack: FC = () => {
  const { t } = useTranslation();

  return (
    <Stack.Navigator>
      <Stack.Screen name="carsList" component={CarsListScreen} />
      <Stack.Screen name="addCar" component={AddCarStack} />
    </Stack.Navigator>
  );
};

export const AddCarStack: FC = () => {
  const { t } = useTranslation();

  return (
    <Stack.Navigator>
      <Stack.Screen name="carModel" component={CarModelScreen} />
      <Stack.Screen name="carRegistration" component={CarRegistrationScreen} />
      <Stack.Screen name="carSummary" component={CarSummaryScreen} />
    </Stack.Navigator>
  );
};

因此，当用户在屏幕 2 上时，他可以选择汽车或添加新汽车

如果用户决定添加一辆新车，那么他可以在完成此过程后完成添加汽车的过程，很明显，他刚刚添加这辆车是因为他想使用它 - 所以应该重定向到

finalInfo

从第一个堆栈开始屏幕

我可以使用

navigation.navigate("finalInfo")

，但是如果用户单击后退按钮（Android 平台），他将从

AddCarStack

重定向到摘要屏幕

我还可以使用

navigation.goBack()

级别的

EmployeeCarStack

，然后使用

navigation.navigate("finalInfo")

，但它实际上是2个导航，并且带有汽车列表的屏幕会快速闪烁

所以我正在寻找一个解决方案：

• 用户可以进入汽车列表并选择汽车，然后转到

  finalInfo

• 用户可以转到汽车列表，然后单击“添加”按钮，完成添加汽车过程，并且从该过程的最后一步将被重定向到

  finalInfo

  ，但是当他单击

  finalInfo

  上的后退按钮时，它会表现得像他刚刚从汽车列表屏幕出来

Answer 1

最后我发现我可以为堆栈设置

ids

，并在过程结束时使用

getParent("some-id").goBack()

。

因此，当辅助过程完成后，我可以将用户带回来并将 hi 的历史记录设置到该位置，就像他没有做任何事情一样。