在React Native中使用React Navigation条件渲染头部右侧按钮

要根据布尔变量控制Entypo new-message图标的显示，只需在headerRight的回调函数中添加条件判断逻辑即可，具体修改如下：

修改后的完整代码 #

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons, MaterialCommunityIcons, Entypo } from "@expo/vector-icons";

const Tab = createBottomTabNavigator();

const MainTabNavigator = () => {
  // 定义控制图标显示的布尔变量，可根据实际场景从props/状态中获取
  const showNewMessageIcon = true;

  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: () => {
            // 根据布尔变量判断是否渲染图标
            if (showNewMessageIcon) {
              return (
                <Entypo
                  onPress={() => navigation.navigate("Contacts")}
                  name="new-message"
                  size={18}
                  color="royalblue"
                  style={{ marginRight: 15 }}
                />
              );
            }
            // 变量为false时返回null，不渲染任何内容
            return null;
          },
        })}
      />
    </Tab.Navigator>
  );
};

export default MainTabNavigator;

关键说明 #

• 先定义showNewMessageIcon布尔变量，你可以根据需求将其替换为组件状态（比如useState）或传入的props；
• 在headerRight回调里通过if判断变量值：
  • 变量为true时，返回要显示的Entypo图标组件；
  • 变量为false时返回null，头部右侧不会渲染任何内容。

内容的提问来源于stack exchange，提问作者Amar