在 React Native 中使用 React Navigation 有条件地渲染 header 右键

Question

我正在尝试根据 boolean 变量有条件地在右侧 header 中呈现Entypo 新消息图标（如果该变量为真，则该图标将显示在标题中）。 请参阅下面的最小可重现代码。 提前致谢。

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

您可以使用Conditional (ternary) operator执行以下操作。 只需将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 }}
      />
    ),
})}