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

发布于 2025-01-23 14:42:53 字数 800 浏览 4 评论 0原文

我的标签导航器和堆栈导航器如下所示：

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

我想从内部stack_2从tab_2带有ID参数。

我可以使用

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

，但是如果我想再次使用ID EFGH再次导航，则不会刷新屏幕。如果我在堆栈导航器内部，我会很容易地使用PUST，但是当我在另一个选项卡中时，我无法使用它。

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

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

这项工作，但是我无法转到stack_1，这是tab_1的主屏幕，因为返回按钮未显示，也可以按下TAB_1图标什么都不做。

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

原文

I have tab navigators and stack navigator nested as follows:

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

I want to navigate to Stack_2 from inside Tab_2 with id parameters.

I can use

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

but this won't refresh the screen if I want to navigate again with id efgh. I would easily use push if I was inside the stack navigator, but as I am inside another tab I can't use that.

So far I have tried

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

This does the job but then I can't go to Stack_1 which is the main screen of Tab_1 as the back button does not appear and also pressing on Tab_1 icon does nothing.

How can I achieve the same result as navigation.push in here from inside another tab?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

も让我眼熟你 2025-01-30 14:42:53

您可以在 stack.screen 上使用getID：

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

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

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

You can use the getId prop on Stack.Screen:

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

This tells React Navigation to add a new screen for the new ID, which is the behavior you want.

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

回复收藏 0 原文

混浊又暗下来 2025-01-30 14:42:53

推动的另一种方法是重置状态，这意味着向子堆栈的路线添加新路线：

    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,
      });
    });

重置方法，您可以更新选项卡状态的详细信息。

Another way to push is to reset the state, which means to add a new route to the child stack's routes:

    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,
      });
    });

by the reset method, you can update the details of your tab state.

回复收藏 0 原文

~没有更多了~