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

Question

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

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

我想使用 id 参数从

Stack_2

内部导航到

Tab_2

。

我可以用

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

但是如果我想使用 id 再次导航

efgh

，这不会刷新屏幕。如果我在堆栈导航器内，我会轻松使用推送，但由于我在另一个选项卡内，我无法使用它。

到目前为止我已经尝试过了

 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

您可以在

getId

上使用

Stack.Screen

道具：

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

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

https://reactnavigation.org/docs/screen/#getid

Answer 2

另一种推送方式是重置状态，这意味着向子堆栈的路由中添加新的路由：

    tabNav.dispatch(_state => {
      const _childRoute = _state.routes[CHILD_TAB_INDEX]; // get the target tab route
      const newRoutes = [..._state.routes];
      const newChildStackRoutes = [
        ...(_childRoute.state?.routes || []),
        // push the new screen to the child tab's stack
        {name: screen, params: params},
      ];
      newRoutes[CHILD_TAB_INDEX] = {
        ..._childRoute,
        state: {
          routes: newChildStackRoutes,
        },
      };

      return CommonActions.reset({
        ...state,
        routes: newRoutes,
      });
    });

通过 reset 方法，您可以更新选项卡状态的详细信息。