在由堆栈导航器托管的屏幕内访问`headerRight`

问题描述

我创建了一个堆栈导航器：

import {createStackNavigator} from '@react-navigation/stack';

const TheStack = createStackNavigator();

然后，这是我的导航器，它声称component={LandingScreen}：

<TheStack.Navigator ...>
  <TheStack.Screen
        name="LandingScreen"
        component={LandingScreen}
        options={{
          title: '',headerLeft: null,headerRight: () => (
            <MyHeaderRightComponent />
          ),}}
      />

<TheStack.Navigator>

正如您在屏幕的options上方看到的那样，有headerRight，我已经声明将MyHeaderRightComponent用作headerRight，以便它显示在右侧屏幕上的标题。

这是我的LandingScreen.js：

import React,{useState} from 'react';
import {View,StyleSheet} from 'react-native';

const LandingScreen = ({navigation}) => {
   // How can I access the `headerRight` component I have set above from here? 
   ...
}

我的问题是如何访问 LandingScreen.js 中的headerRight？我知道我可以通过以下方式更新或重置headerRight：

navigation.setOptions({headerRight:() => <NewHeaderRightComponent/>})

但是现在我需要访问的是先前已设置的组件，而不是设置新的组件。该怎么做？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）