將 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()