如何在Expo React Native中使用Google Material Symbols

方案一：借助Expo Google Fonts库（推荐） #

这个方法支持通过import方式引入，且能保证图标清晰度，步骤如下：

1. 安装依赖
   在项目根目录执行命令：

   npx expo install @expo-google-fonts/material-symbols react-native-vector-icons
   

2. 加载字体并使用图标
   以Outlined样式的400权重图标为例，在组件中导入并使用：

   import { useFonts } from 'expo-font';
   import Icon from 'react-native-vector-icons/Icon';
   import { MaterialSymbolsOutlined_400 } from '@expo-google-fonts/material-symbols';
   
   export default function App() {
     // 加载指定样式的Material Symbols字体
     const [fontsLoaded] = useFonts({
       MaterialSymbolsOutlined: MaterialSymbolsOutlined_400,
     });
   
     // 字体未加载完成时不渲染内容
     if (!fontsLoaded) {
       return null;
     }
   
     return (
       // 使用Icon组件渲染图标，name对应Material Symbols官网的图标名称
       <Icon
         name="home"
         size={24}
         color="#212121"
         family="MaterialSymbolsOutlined"
       />
     );
   }
   

   你可以根据需求选择不同样式的字体：

   • Filled样式：MaterialSymbolsFilled_400/MaterialSymbolsFilled_700
   • Rounded样式：MaterialSymbolsRounded_400/MaterialSymbolsRounded_700

方案二：手动导入字体文件 #

如果不想依赖第三方库，可手动导入字体文件实现：

1. 下载Material Symbols字体文件
   从Google Material Symbols官网选择所需的样式（Outlined/Rounded/Filled）和权重，下载对应的TTF字体文件。

2. 放置字体文件并配置
   将下载的TTF文件放到项目的assets/fonts目录下，然后在app.json中添加资源配置：

   {
     "expo": {
       "assets": ["./assets/fonts/"]
     }
   }
   

3. 自定义图标组件
   通过Text组件渲染字体图标（需提前查询图标对应的Unicode编码）：

   import { Text, StyleSheet } from 'react-native';
   
   // 示例：渲染Home图标（Unicode编码为U+E88A）
   export function HomeIcon() {
     return (
       <Text style={styles.icon}>{'\uE88A'}</Text>
     );
   }
   
   const styles = StyleSheet.create({
     icon: {
       fontFamily: 'MaterialSymbolsOutlined', // 对应字体文件名
       fontSize: 24,
       color: '#212121',
     },
   });
   

注意事项 #

• 图标名称需与Material Symbols官网的图标名称完全一致（方案一）
• 确保字体加载完成后再渲染图标，避免显示空白方块
• 不同样式的字体需分别加载和指定family参数

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