React native React导航设置选项不工作

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

-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>

PS：我知道隐藏标题并为标题使用自定义组件可以作为一种解决方法，但我想知道为什么

navigation.setOptions

不起作用

任何帮助，任何想法都将不胜感激，谢谢

函数SomeScreen（{navigation}）{
function SomeScreen({navigation}) {
     useLayoutEffect(() => {
         navigation.setOptions({
            headerRight: () => <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>
      });
    }, [navigation]);

useLayoutEffect（（）=>{
navigation.setOptions({
headerRight:（）=>console.warn（'这是一个按钮！'）}
样式={{marginRight:16}}>
});
}，[导航]；

选项卡导航器本身没有任何标题。儿童的内部TopTab.Navigator将无权访问父导航ie Stack.Navigator。您需要将父导航实例传递给选项卡的子项，或者从堆栈中隐藏标题，并在选项卡子项中创建自己的标题组件。另一个选项是将侦听器附加到如下所示的选项卡屏幕，然后您可以更新父堆栈的头

const DetailTabScreen = (props) => {
....

<TopTab.Screen
    name="PlanDetail"
    component={PlanDetail}
    options={{
        tabBarLabel: ({ color }: TabBarLabelProps) => (
            <Text>Detalles</Text>
        ),
    }}
    listeners={{
        tabPress: (e) => {
            // Prevent default action
            props.navigation.setOptions({
                title: 'PlanDetail',
            });
        },
    }}
/>

const DetailTabScreen=（道具）=>{
....
(
德塔莱斯
),
}}
听众={{
tabPress：（e）=>{
//防止默认操作
props.navigation.setOptions({
标题：“平面详图”，
});
},
}}
/>

---

您可以找到更多详细信息

Hi Saghar，谢谢您花时间，但这并不能解决问题。我还无法测试它，但我会检查它是否有效

function SomeScreen({navigation}) {
     useLayoutEffect(() => {
         navigation.setOptions({
            headerRight: () => <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>
      });
    }, [navigation]);

const DetailTabScreen = (props) => {
....

<TopTab.Screen
    name="PlanDetail"
    component={PlanDetail}
    options={{
        tabBarLabel: ({ color }: TabBarLabelProps) => (
            <Text>Detalles</Text>
        ),
    }}
    listeners={{
        tabPress: (e) => {
            // Prevent default action
            props.navigation.setOptions({
                title: 'PlanDetail',
            });
        },
    }}
/>