React Native中如何调用Material Icons圆角版本？

首先要明确：你用的react-native-vector-icons/MaterialIcons默认是**填充版（Filled）**图标，而圆角版本是Material Icons的独立变体，无法通过borderRadius样式修改图标本身形状，必须使用对应变体的字体文件。

下面分两种项目类型给出解决方案：

一、Expo 项目 #

直接使用@expo/vector-icons库，它原生支持Material Icons的所有变体（包括Rounded）：

1. 确保已安装依赖（Expo项目默认已包含，若没有则执行）：

npx expo install @expo/vector-icons

2. 代码中指定variant="rounded"即可：

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

return <MaterialIcons name={iconName} size={size} color={color} variant="rounded" />;

二、裸 React Native 项目 #

需要手动添加Material Icons Rounded字体并配置：

1. 下载Material Icons Rounded字体文件：
   从官方渠道获取Rounded变体的字体包，提取出MaterialIcons-Rounded.ttf文件。

2. 将字体文件放入项目的assets/fonts目录（若没有则新建）。

3. 配置react-native.config.js（项目根目录，若没有则新建）：

module.exports = {
  assets: ['./assets/fonts/'],
};

4. 链接字体资源：

# React Native 0.60+
npx react-native-asset

# React Native <0.60
npx react-native link

5. 在代码中指定字体家族：

import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

return (
  <MaterialIcons 
    name={iconName} 
    size={size} 
    color={color} 
    style={{ fontFamily: 'MaterialIcons-Rounded' }} 
  />
);

注意：确保iconName在Rounded变体中存在，部分图标可能只有特定变体才有，可在Material Icons官方平台确认图标是否支持Rounded样式。

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