在另一个选项卡中反应导航推送屏幕

Question

我有如下嵌套的选项卡导航器和堆栈导航器：

- Tab_1
-------- Stack_1
-------- Stack_2 
-------- Stack_3
- Tab_2

我想使用 id 参数从 Tab_2 内部导航到 Stack_2。

我可以用

navigation.navigate("Tab_1", {screen: "stack_2", params: {id: "abcd"}})

但是如果我想使用 id efgh 再次导航，这将不会刷新屏幕。如果我在堆栈导航器中，我会很容易地使用 push，但是因为我在另一个选项卡中，所以我不能使用它。

到目前为止我已经试过了

 navigation.reset({ index: 0, routes: [{ name: "Tab_1", params: { screen: "Stack_2", params: { id: "abcd" } } }] });

这完成了工作，但我无法转到 Stack_1，这是 Tab_1 的主屏幕，因为后退按钮没有出现，也没有按 Tab_1 图标什么都不做。

如何从另一个选项卡中获得与此处 navigation.push 相同的结果？

Answer 1

您可以在 Stack.Screen 上使用 getId 道具：

<Stack.Screen
  name="stack_2"
  component={Stack2}
  getId={({ params }) => params.id}
/>

这会告诉 React Navigation 为新 ID 添加一个新屏幕，这是您想要的行为。

React Navigation Push screen inside another tab