我有一个嵌套的导航设置，App.js调用一个组件NavigationMain，如下所示。

应用程序js

<NavigationContainer>
      <Stack.Navigator>
        <Stack.Group>
            <Stack.Screen
              name="NavigationMain"
              component={NavigationMain}
              options={({ route }) => ({
                headerShown: true,
                title: getHeaderTitle(route),
              })}
            />
          ...
        </Stack.Group>
      </Stack.Navigator>
</NavigationContainer>

注意，在上面我还使用了一个帮助函数getHeaderTitle，这样每个屏幕都有一个唯一的标题。

导航主页.js

function NavigationMain() {
    return (
    <Tab.Navigator
      ...
    >
      ...
      <Tab.Screen
          name='Plans'
          component={PlansView}
            options={{
                tabBarLabel: 'Plans',
                tabBarIcon: ({ color }) => (
                <MaterialCommunityIcons name="certificate" color={color} size={26} />
                ),
            }}
      />    
    </Tab.Navigator>
    );}

NavigationMain又调用PlansView组件，用于当用户尝试查看该特定屏幕时。

计划视图.js

import { View, Text, StyleSheet } from 'react-native';
import React, {
    useLayoutEffect,
  } from "react";
import { navigation } from '@react-navigation/native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const PlansView = ({ navigation }) => {
    
  // Set header to contain add new plan button
  useLayoutEffect(() => {
    const unsubscribe = navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity
          style={{ marginRight: 20 }}
          onPress={() => navigation.navigate("Add Plan")}
        >
            <MaterialCommunityIcons name="plus-thick" color="black" size={26} />
        </TouchableOpacity>
      ),
    });
    return unsubscribe;
  }, [navigation]);

    return (
        <View>
            <Text>Plans</Text>
        </View>
    )};

    export default PlansView;

我尝试使用useLayoutEffect来设置headerRight，但这不起作用，虽然Plans标题按预期显示，但headerRight为空（什么也不显示）。
我怀疑这是因为某些项的headerSettings（即标题是在父导航器级别设置的），但我不知道如何更改它，所以我可以用useEffect设置headerRight。