我最近把我的项目更新到了 Expo 56，并决定迁移到使用 @react-navigation/bottom-tabs/unstable 的实验性原生底部标签页。

在iOS上使用 sfSymbol 时，一切都运行得很顺利，标签栏本身在Android上也能正常工作。然而，当使用 materialSymbol 时，Android上的图标不会显示。

 <Tab.Navigator
        screenOptions={{
          tabBarStyle: {
            backgroundColor: colorScheme.bg
          },
          tabBarActiveTintColor: colorScheme.gold,
          tabBarInactiveTintColor: colorScheme.bgComplementair,
          tabBarActiveIndicatorColor: colorScheme.gold,
        }}
      >
        <Tab.Screen
          name="Home"
          component={Home}
          options={{
            tabBarIcon: Platform.select({
              ios: {
                type: "sfSymbol",
                name: "house",
              },
              android: {
                type: "materialSymbol",
                name: "home",
                variant: "filled",
                weight: 400,
              },
            }) as any,
          }}
        />
        {showFloorPlan && (
          <Tab.Screen
            name="Gallery"
            component={Gallery}
            options={{
              tabBarIcon: Platform.select({
                ios: {
                  type: "sfSymbol",
                  name: "square.grid.3x3",
                },
                android: {
                  type: "materialSymbol",
                  name: "grid_view",
                  variant: "filled",
                  weight: 400,
                },
              }) as any,
            }}
          />
        )}
        <Tab.Screen
          name="Settings"
          component={Settings}
          options={{
            tabBarIcon: Platform.select({
              ios: {
                type: "sfSymbol",
                name: "gear",
              },
              android: {
                type: "materialSymbol",
                name: "settings",
                variant: "filled",
                weight: 400,
              },
            }) as any,
          }}
        />
      </Tab.Navigator>

解决方案

修复其实很简单，但很容易被忽视。

import { createNativeBottomTabNavigator } from "@react-navigation/bottom-tabs/unstable";

createNativeBottomTabNavigator不支持materialSymbols，请改用：

android: {
    type: "image",
    source: require("pathToImage.png")
}

目前仅支持PNG，不支持SVG，materialSymbol与 createNativeBottomNavigator 不兼容

如果你仍然想使用materialSymbols，必须改用

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";