从嵌套的子屏幕访问父堆栈导航器的导航对象答案

【问题标题】：Access parent stack navigator's navigation object from nested child screen从嵌套的子屏幕访问父堆栈导航器的导航对象
【发布时间】：2023-03-30 00:59:01
【问题描述】：

我在我的 react-native 项目中使用 React Navigation v5。

我有一个嵌套的堆栈导航器。

父堆栈导航器MyParentFlow 有一个屏幕组件，该组件承载另一个堆栈导航器：

const MyParentFlow = ({route, navigation}) => {

   const MyStack = createStackNavigator();

  return (
    <MyStack.Navigator
       initialRouteName={...}
       ...>
       {/*HERE is the nested children stack navigator*/}
       <MyStack.Screen
         name={FLOWS.MyChildrenFlow}
         component={MyChildrenFlow}
       />
       <MyStack.Screen .../>
       ...
    </MyStack.Navigator>
)
}

我的嵌套堆栈导航器MyChildrenFlow：

const MyChildrenFlow = ({route, navigation}) => {

   const MyStack = createStackNavigator();


  return (
    <MyStack.Navigator
       initialRouteName={...}
       ...>
       {/*HERE is a child screen in the nested navigator*/}
       <MyStack.Screen 
         name="MyChildScreen"
         component={MyChildScreen}
       />
       <MyStack.Screen .../>
       ...
    </MyStack.Navigator>
)
}

在嵌套堆栈导航器托管的子屏幕中：

const MyChildScreen =({navigation})=> {
    /* I need to set options for the header of the parent's navigation */
    navigation.setOptions({
    headerRight: () => (
      ...
      />
    ),
  });

}

在嵌套堆栈导航器托管的子屏幕中，我需要通过navigation 为父导航器设置标题。我上面的代码不起作用，因为 navigation 对象是嵌套堆栈导航器的，而不是父级的。

我的问题是如何在嵌套的子屏幕中访问父导航器并为其设置导航选项？

【问题讨论】：

标签： react-native react-navigation react-navigation-v5

【解决方案1】：

您可以通过dangerouslyGetParent()访问它

const parent = navigation.dangerouslyGetParent();

https://reactnavigation.org/docs/navigation-prop/#dangerouslygetparent

【讨论】：

很确定不是。它要么返回导航对象，要么返回未定义。没有任何情况下它返回空对象。（来源：我维护反应导航）
有趣，我也很确定，因为代码和日志现在在我面前告诉我parent 是{}。你有没有尝试过？这就是我尝试过的：const MyChildScreen =({navigation})=> { const parent = navigation.dangerouslyGetParent(); console.log(`parent: ${JSON.stringify(parent)}`); }，日志说parent: {}。很明显的结果不是吗？但无论如何谢谢你
我感觉你的答案不适用于 React Navigation v5，如果你看到我的问题，我正在使用 React Navigation v5。
你为什么要做 JSON.stringify？导航对象仅包含函数，您希望在 JSON.stringify 之后打印的对象是什么？函数不能被字符串化，所以很明显它会打印空对象。
好的，因为我不知道该函数是否返回 json，所以你的答案没有说明。我认为它是一个 json 对象。而且您提供的链接还说This method returns the state object of the navigator which contains the screen. 无论如何，我再次尝试而不将其视为JSON，输出为parent: [object Object]。那是父堆栈导航器的navigation 对象吗？我的意思是我在问，因为我不知道那个 [object Object] 是什么。我可以直接setOptions(...)返回吗？