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

debugcn 发表于 Dev

阿迪亚·库玛（Aditya Kumar）

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

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

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>
  );
};

纳泽尔·本·扎法尔

尝试以下方式实现它

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。