Question

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

我已经创建了demo on snack，因此您可以第一手看到问题，并帮助我在实际代码中演示解决方案。

重复步骤

启动应用
点击“转到活动”按钮
点击每个标签，请注意eventId在前三个标签的范围之内
点击“更多”标签
点击“团队成员”，注意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。我很困惑如何传递这些。因此，我的问题...如何从passedParams组件访问TeamMembers？它们似乎仅适用于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（）

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

2 个答案: