在React Native中使用React导航有条件地渲染标题右键

Question

我试图有条件地呈现输入新消息基于布尔变量的右标题中的图标(如果变量为true，则图标将显示在标题中)。请参阅下面的最小可复制代码。提前谢谢。

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons, MaterialCommunityIcons, Entypo } from "@expo/vector-icons";
const Tab = createBottomTabNavigator();
const MainTabNavigator = () => {
return (
<Tab.Navigator
initialRouteName="Chats"
screenOptions={{
tabBarStyle: { backgroundColor: "whitesmoke" },
headerStyle: { backgroundColor: "whitesmoke" },
}}
>
<Tab.Screen
name="Chats"
component={ChatsScreen}
options={({ navigation }) => ({
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="message-processing-outline"
size={size}
color={color}
/>
),
headerRight: () => (
<Entypo
onPress={() => navigation.navigate("Contacts")}
name="new-message"
size={18}
color={"royalblue"}
style={{ marginRight: 15 }}
/>
),
})}
/>
</Tab.Navigator>
);
};
export default MainTabNavigator;

Answer 1

您可以使用条件(三元)操作符按如下方法进行操作。将boleanVariable替换为实际变量。

options={({ navigation }) => ({
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="message-processing-outline" size={size} color={color} />
),
headerRight: () =>
!boleanVariable ? (
<></>
) : (
<Entypo
onPress={() => navigation.navigate("Contacts")}
name="new-message"
size={18}
color={"royalblue"}
style={{ marginRight: 15 }}
/>
),
})}