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

Question

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

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

复制步骤

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() ，那么我也不确定我会在哪里这样做。

Answer 1

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

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

Answer 2

问题似乎在 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()