我正试图从我的组件内的堆栈屏幕设置导航选项，因为我需要从我的屏幕呈现一个带有特定操作的右标题按钮。问题是它不起作用。我使用的结构如下：

-StackNavigator
  -MaterialTopTabNavigator
    -tab1
    -tab2
    -tab3

字符串
当前代码：

//My navigation
    <NavigationContainer initialState={initialState} ref={ref}>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        //some other Stacks
        <Stack.Screen
          name="Detail"
          component={DetailTabScreen}
          options={{
            headerShown: true, //header works ok
            headerRight: () => ( //this would work
              <View style={{backgroundColor: 'red', width: 100}}/>
            )
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>

型
我的详细信息选项卡屏幕：

const TopTab = createMaterialTopTabNavigator()
const DetailTabScreen = () => (
  <StoreProvider>
    <SafeAreaView style={{ flex: 1 }}>
      <TopTab.Navigator
        tabBarOptions={{
         ...options
        }}
      >
        <TopTab.Screen
          name="PlanDetail"
          component={PlanDetail}
          options={{
            tabBarLabel: ({ color }: TabBarLabelProps) => (
              <Text>Detalles</Text>
            ),
          }}
        />
        <TopTab.Screen
          name="PlanChat"
          component={PlanChat}
          options={{
            tabBarLabel: ({ color }: TabBarLabelProps) => (
              <Text>Chat</Text>
            ),
          }}
        />
        <TopTab.Screen
          name="Participants"
          component={Participants}
          options={{
            tabBarLabel: ({ color }: TabBarLabelProps) => (
              <Text>Participantes</Text>
            ),
          }}
        />
      </TopTab.Navigator>
    </SafeAreaView>
  </StoreProvider>
)

型
我已经尝试过使用useLayoutEffect设置组件内部的选项，也尝试过使用useEffect：

useLayoutEffect(() => {
    props.navigation.setOptions({
      headerRight: () => (//does not work
        <TouchableOpacity
          onPress={() => console.warn('This is a button!')}
          style={{marginRight:16}}
        >
          <Icon name={Platform.OS === 'ios' ? 'share-apple' : 'share-google'} type="EvilIcons" style={{ color: colors.darkGreen, marginright: 16 }} />
        </TouchableOpacity>
      ),
    });
  }, []);

型
PS：我知道隐藏头文件并为我的头文件使用自定义组件可以作为一种解决方案，但我想知道为什么navigation.setOptions不起作用。
任何帮助，任何想法将不胜感激，谢谢！