繁体   English   中英

将 React-Navigation 中的状态从 TabsNavigation 传递到子 StackNavigation

Passing State in React-Navigation from TabsNavigation to Child StackNavigation

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

更新:现在有一个小吃演示

我已经创建了一个关于零食演示,因此您可以直接看到问题并帮助我在实际代码中演示解决方案。

复制步骤

  1. 启动应用程序
  2. 点击“转到活动”按钮
  3. 点击每个选项卡,注意 eventId 在前三个选项卡的范围内
  4. 点击“更多”标签
  5. 点击“团队成员”,注意 eventId 不再在范围内。 这就是问题所在。 我如何传递 eventId?

_____________________________

我的应用程序具有以下导航层次结构,其中<>每个实例只是一个常规组件

App <StackNavigator> {
    EventList <>
    EventTabs <BottomTabNavigator> {
        Quests <>
        Leaderboard <>
        Gallery <>
        More <StackNavigator> {
            MoreList <>
            TeamMembers <>
        }

    }
}

进入应用程序后,用户的第一个屏幕是EventList 他们点击一个按钮导航到EventTabs ,所以我可以使用navigation.navigate()在传递状态时进行转换,就像这样......

EventList.navigation.navigate(EventTabs, passedParams);

至此,一切都说得通了。 但是TeamMembers还需要访问passedParams 我很困惑如何传递这些。 因此我的问题...如何从TeamMembers组件访问passedParams 它们似乎仅限于EventTabs

如果答案是使用navigate.setParams() ,那么我不确定我会在哪里这样做。

如果答案是使用NavigationActions.setParams() ,那么我也不确定我会在哪里这样做。

2 个回复

不幸的是,我们对此没有很好的支持,但是您可以使用这样的函数来递归地遍历导航父项以搜索正确的参数。

function getParam(navigation, paramName) {
  const { getParam, dangerouslyGetParent } = navigation;
  let parent = dangerouslyGetParent();
  let val = getParam(paramName);
  while (val === undefined && parent && parent.getParam) {
    val = parent.getParam(paramName);
    parent = parent.dangerouslyGetParent();
  }
  return val;
}

问题似乎在 React 导航的 5.x 版中继续存在。 对我来说这是有效的。

function getParentParam(navigation, paramName) {
    const { dangerouslyGetParent } = navigation;
    let paramValue = null;
    const parent = dangerouslyGetParent();
    const routes = parent.dangerouslyGetState().routes;
    routes.some((r) => {
        paramValue = r.params ? r.params[paramName] : null;
        return paramValue !== null;
    });
    return(paramValue);
}

您可以根据您拥有的深度级别迭代 parent.dangerouslyGetParent()

2 通过React-Navigation传递数据

我想知道我在React Native(仍在学习)中开发的应用程序有什么问题。 屏幕3显示了axios和API获得的产品列表,以及一些交互(我可以使用某些PickerItem筛选产品,...) 在屏幕1上,我有一个项目列表,使用onPress可以获取被按下元素的值。 然后,我想通过n ...

7 react-navigation:屏幕的名称可以与routeConfig中传递的名称不同吗?

我有一种情况,我不希望在路由配置中传递给我的密钥呈现给用户: 我需要使用这些键作为代码中屏幕的标识符,以便通过检查routeName.startsWith('tab/')来判断我们是来自堆栈导航器屏幕还是标签导航器屏幕。 是否可以在UI中更改显示名称? 谢谢。 ...

10 如何使用无状态组件中的react-navigation将getParam参数传递到另一个屏幕以触发graphql突变?

遵循docs: react-navigation params ,我基本上会做这样的事情(父母): 然后传给孩子 编辑:我的情况是,在一个屏幕/容器中,我们启动了一个graphql突变,该突变需要一个phoneNumber并检索给用户的代码。 在下一个屏幕上,我需要使用用户刚刚 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM