Expo 56中Android端底部导航栏MaterialSymbol图标不显示求助

问题描述 #

项目升级至Expo 56后，切换使用@react-navigation/bottom-tabs/unstable的实验性原生底部导航栏。iOS端使用SF Symbol图标功能正常，但安卓端导航栏功能完整，Material Symbol图标却无法显示。相关代码如下：

<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>

解决方法 #

1. 核对Material Symbol命名规范 #

Material Symbols的命名与旧版Material Icons存在差异，需确保name字段使用官方标准名称：

• 例：将grid_view替换为官方标准名grid-3x3，避免下划线格式导致识别失败
• 可直接确认目标图标的官方命名

2. 简化Material Symbol参数配置 #

Expo 56对实验性底部栏的Material Symbol参数要求更严格，尝试简化配置：

• 移除weight字段（默认400为支持值，额外配置可能引发加载异常）
• 确保variant值为"filled"或"outlined"这类标准值

修改后的安卓端图标配置示例：

android: {
  type: "materialSymbol",
  name: "home",
  variant: "filled",
}

3. 清除项目缓存 #

缓存是Expo项目资源加载异常的常见原因，执行以下操作：

• 运行npx expo start --clear清除Expo缓存后重启项目
• 在安卓模拟器/真机上清除应用缓存与数据，重新安装测试

4. 临时替换为自定义图标组件 #

若以上方法无效，可改用Expo官方图标库自定义tabBarIcon，规避实验性API的兼容性问题：

import MaterialIcons from '@expo/vector-icons/MaterialIcons';

// 在Tab.Screen的options中替换tabBarIcon
tabBarIcon: ({ focused }) => (
  <MaterialIcons
    name={focused ? "home" : "home-outline"}
    size={24}
    color={focused ? colorScheme.gold : colorScheme.bgComplementair}
  />
)

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