如何在 React Native 的嵌套堆栈导航中的 header 上添加按钮

Question

我想在我的应用程序的堆栈导航之一的 header 右侧添加一个按钮，但问题是它不起作用。

这是我的代码。 我不知道为什么这不起作用

App.tsx

<AppStack.Screen
            options={{
              headerShown: false,
            }}
            name="MyProfile"
            component={TabNavigation}
          />
    
          <AppStack.Screen
      
            name="CommunityStack"
            component={CommunityStack}
          />

CommunityHub.tsx

const CommunityStack = () => {
  return (
    <Stack.Navigator screenOptions={({ navigation }) => ({
        title: "Community Hub",
        headerRight: () => {
          return (
            <Box marginHorizontal="s">
              <RoundedBorderButton
                label="For Members"
                onPress={() => navigation.navigate("Register")}
              />
            </Box>
          );
        },
      })}>
      <Stack.Screen name="CommunityHub" component={CommunityHub} />
      <Stack.Screen name="KarawarDetail" component={KarawarDetail} />
      <Stack.Screen name="CommunityMember" component={CommunityMember} />
    </Stack.Navigator>
  );
};

Answer 1

试试下面的方法来实现

<Stack.Navigator>

  <Stack.Screen 
    name="Screen1" 
    component={Screen1}
    options={{ headerShown: false }} />

  <Stack.Screen 
    name="Screen2" 
    component={Screen2}
    options={{
     headerRight: () => (
     <View>
      <Text>RIGHT</Text>
     </View>
    ),
   }} />

 <Stack.Screen 
    name="Screen3" 
    component={Screen3}
    options={{ headerShown: false }} />

</Stack.Navigator>