在Expo项目中使用彩色图标求助：react-icons/fc及本地图标遇阻

解决 react-icons/fc 报错问题 #

react-icons 多数库为Web环境设计，依赖DOM API，直接在Expo中使用会报错。推荐使用**@expo/vector-icons**，它适配Expo且内置多套支持自定义颜色的图标库（如FontAwesome5、MaterialCommunityIcons等）。

示例代码：

import { MaterialCommunityIcons } from '@expo/vector-icons';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Home"
        component={HomeScreen}
        options={{
          drawerIcon: ({ size }) => (
            // 直接指定自定义颜色
            <MaterialCommunityIcons name="home" color="#FF5722" size={size} />
          ),
        }}
      />
    </Drawer.Navigator>
  );
}

注：Expo项目默认已集成@expo/vector-icons，无需额外安装；若缺失，执行npx expo install @expo/vector-icons。

本地图标无法使用的修复方案 #

1. 本地SVG图标 #

• 先安装依赖：npx expo install react-native-svg
• 在metro.config.js中添加SVG支持（Expo项目需配置）：

const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);
config.resolver.assetExts.push('svg');
module.exports = config;

• 引入并使用SVG图标：

import HomeIcon from '../assets/icons/home-icon.svg'; // 替换为你的SVG路径

// 抽屉图标配置
drawerIcon: ({ size }) => (
  <HomeIcon width={size} height={size} fill="#2196F3" /> // fill属性设置颜色
)

2. 本地PNG图标 #

使用React Native的Image组件，通过tintColor设置单色，或直接保留原彩色：

import { Image } from 'react-native';

// 单色图标（用tintColor覆盖）
drawerIcon: ({ size }) => (
  <Image
    source={require('../assets/icons/home-icon.png')}
    style={{ width: size, height: size, tintColor: '#4CAF50' }}
  />
)

// 保留原彩色的多色PNG
drawerIcon: ({ size }) => (
  <Image
    source={require('../assets/icons/colorful-icon.png')}
    style={{ width: size, height: size }}
  />
)

关键注意事项 #

• 抽屉导航的drawerIcon回调参数中的color是主题默认色，可直接忽略，手动指定自定义颜色。
• 确保本地图标路径正确，Expo中相对路径需基于当前组件文件的位置。

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