如何在React Native的Material Bottom Tab导航器中使用Material UI图标替代Material Community Icons

别担心，这绝对不是傻问题！很多刚接触React Native的开发者都会遇到类似的图标库替换需求，我来一步步带你完成这个操作：

步骤1：确认图标依赖 #

如果你用的是Expo项目，@expo/vector-icons已经内置了Material Icons，不需要额外安装；如果是裸React Native项目，你可以通过以下命令安装依赖：

npm install @expo/vector-icons
# 或者用yarn
yarn add @expo/vector-icons

步骤2：替换图标库的导入 #

把原来导入的MaterialCommunityIcons换成MaterialIcons：

// 替换前
import { MaterialCommunityIcons } from "@expo/vector-icons";

// 替换后
import { MaterialIcons } from "@expo/vector-icons";

步骤3：修改Tab导航的图标配置 #

现在你可以使用MUI Material Icons里的图标名称了，注意要和@expo/vector-icons中MaterialIcons支持的名称对应（大部分和MUI官网的图标名称一致，个别可能需要小调整）。

下面是修改后的完整代码示例：

import { StyleSheet, Text, View } from "react-native";
import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
// 替换为MaterialIcons
import { MaterialIcons } from "@expo/vector-icons";

const Tab = createMaterialBottomTabNavigator();

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Settings!</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Trips"
          component={HomeScreen}
          options={{
            tabBarLabel: "Trips",
            // 这里换成MaterialIcons，并用MUI对应的图标名称
            tabBarIcon: ({ color }) => (
              <MaterialIcons name="explore" color={color} size={26} />
            ),
          }}
        />
        {/* 补充一个Settings页面的图标示例 */}
        <Tab.Screen
          name="Settings"
          component={SettingsScreen}
          options={{
            tabBarLabel: "Settings",
            tabBarIcon: ({ color }) => (
              <MaterialIcons name="settings" color={color} size={26} />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

小提示 #

如果不确定某个MUI图标对应的name值，直接对照MUI官网的图标名称尝试即可——大部分图标名称是完全匹配的，比如MUI里的「Home」对应代码里的name="home"，「Settings」对应name="settings"。

备注：内容来源于stack exchange，提问作者user16971617