ReactNative项目OpenHarmony三方库集成实战：react-native-vector-icons

早點睡3902026-04-08 9:53
欢迎加入开源鸿蒙跨平台社区 ：https://openharmonycrossplatform.csdn.net

项目基于 RN 0.72.90 开发

📋 前言

图标是UI设计中不可或缺的元素。react-native-vector-icons 是 React Native 生态中最流行的图标库，提供了丰富的图标集和自定义字体支持，能够满足绝大多数应用的图标需求。

🎯 库简介

基本信息

内置图标集

图标集 图标数量 说明
AntDesign 298 Ant Design 图标
Entypo 411 Entypo 图标集
EvilIcons 70 简约风格图标
Feather 286 线性图标
FontAwesome 675 经典图标集
FontAwesome5 1598 (free) FontAwesome 5 版本
FontAwesome6 2016 (free) FontAwesome 6 版本
Fontisto 615 Fontisto 图标
Foundation 283 Foundation 图标
Ionicons 1338 Ionic 图标集
MaterialIcons 2189 Google Material 图标
MaterialCommunityIcons 6596 Material Design 图标
Octicons 250 GitHub 图标
Zocial 100 社交图标
SimpleLineIcons 189 简约线条图标

为什么选择这个库？

特性 原生方案 react-native-vector-icons
图标数量 ⚠️ 有限 ✅ 10000+
跨平台一致性 ⚠️ 差异大 ✅ 统一效果
自定义字体 ⚠️ 复杂 ✅ 简单配置
图标按钮 ⚠️ 需自行实现 ✅ 内置 Button 组件
HarmonyOS 支持 ⚠️ 需适配 ✅ 完善适配

兼容性验证

在以下环境验证通过：

  • RNOH : 0.72.33; SDK : OpenHarmony 5.0.0.71; IDE : DevEco Studio 5.0.3.900; ROM: NEXT.0.0.71
  • RNOH : 0.77.18; SDK : HarmonyOS 6.0.0.47; IDE : DevEco Studio 6.0.0.858; ROM: 6.0.0.107

📦 安装步骤

1. 安装依赖

bash 复制代码 
# RN 0.72 版本
npm install react-native-vector-icons@10.0.3

# RN 0.77 版本
npm install react-native-vector-icons@10.2.0

# 或者使用 yarn
yarn add react-native-vector-icons

2. 验证安装

安装完成后，检查 package.json 文件：

json 复制代码 
{
  "dependencies": {
    "react-native-vector-icons": "^10.0.3"
  }
}

🔧 HarmonyOS 平台配置 ⭐

重要提示

⚠️ HarmonyOS 暂不支持 AutoLink，需要手动配置字体文件。
⚠️ 请使用 API 11 及以上版本，低版本会导致 font 注册不成功，图标显示不出来。

1. 复制字体文件

将 node_modules/react-native-vector-icons/Fonts 目录下的字体文件复制到 entry/src/main/resources/rawfile/fonts 目录下。

需要复制的字体文件：

复制代码 
AntDesign.ttf
Entypo.ttf
EvilIcons.ttf
Feather.ttf
FontAwesome.ttf
FontAwesome5_Brands.ttf
FontAwesome5_Regular.ttf
FontAwesome5_Solid.ttf
FontAwesome6_Brands.ttf
FontAwesome6_Regular.ttf
FontAwesome6_Solid.ttf
Fontisto.ttf
Foundation.ttf
Ionicons.ttf
MaterialCommunityIcons.ttf
MaterialIcons.ttf
Octicons.ttf
SimpleLineIcons.ttf
Zocial.ttf

2. 注册字体文件

打开 entry/src/main/ets/pages/Index.ets，在 RNApp 组件中注册字体：

ts 复制代码 
RNApp({
  rnInstanceConfig: {
    fontResourceByFontFamily: {
      'anticon': $rawfile('fonts/AntDesign.ttf'),
      'Entypo': $rawfile('fonts/Entypo.ttf'),
      'EvilIcons': $rawfile('fonts/EvilIcons.ttf'),
      'Feather': $rawfile('fonts/Feather.ttf'),
      'FontAwesome': $rawfile('fonts/FontAwesome.ttf'),
      'FontAwesome5Brands-Regular': $rawfile('fonts/FontAwesome5_Brands.ttf'),
      'FontAwesome5Free-Regular': $rawfile('fonts/FontAwesome5_Regular.ttf'),
      'FontAwesome5Free-Solid': $rawfile('fonts/FontAwesome5_Solid.ttf'),
      'FontAwesome6Brands-Regular': $rawfile('fonts/FontAwesome6_Brands.ttf'),
      'FontAwesome6Free-Regular': $rawfile('fonts/FontAwesome6_Regular.ttf'),
      'FontAwesome6Free-Solid': $rawfile('fonts/FontAwesome6_Solid.ttf'),
      'Fontisto': $rawfile('fonts/Fontisto.ttf'),
      'fontcustom': $rawfile('fonts/Foundation.ttf'),
      'Ionicons': $rawfile('fonts/Ionicons.ttf'),
      'Material Design Icons': $rawfile('fonts/MaterialCommunityIcons.ttf'),
      'Material Icons': $rawfile('fonts/MaterialIcons.ttf'),
      'Octicons': $rawfile('fonts/Octicons.ttf'),
      'simple-line-icons': $rawfile('fonts/SimpleLineIcons.ttf'),
      'zocial': $rawfile('fonts/Zocial.ttf'),
    }
    // ...
  }
})

📖 API 详解

基本用法

tsx 复制代码 
import FontAwesome from 'react-native-vector-icons/FontAwesome';

<FontAwesome name="glass" size={20} color="#4F8EF7" />

图标组件属性

属性 类型 必填 说明 HarmonyOS 支持
name string 是 图标名称 ✅
size number 否 图标尺寸，默认 12 ✅
color string 否 图标颜色 ✅

Button 组件

每个图标集都提供一个 Button 组件，方便创建带图标的按钮。

tsx 复制代码 
import FontAwesome from 'react-native-vector-icons/FontAwesome';

<FontAwesome.Button 
  name="facebook" 
  backgroundColor="#3b5998" 
  onPress={handlePress}
>
  Login with Facebook
</FontAwesome.Button>

Button 属性：

属性 类型 说明
name string 图标名称
size number 图标尺寸
color string 图标颜色
backgroundColor string 按钮背景色
borderRadius number 圆角
onPress function 点击回调

各图标集使用示例

AntDesign
tsx 复制代码 
import AntDesign from 'react-native-vector-icons/AntDesign';

<AntDesign name="stepforward" size={30} color="#900" />
<AntDesign name="forward" size={30} color="#900" />
Entypo
tsx 复制代码 
import Entypo from 'react-native-vector-icons/Entypo';

<Entypo name="code" size={30} color="#900" />
<Entypo name="github" size={30} color="#900" />
Feather
tsx 复制代码 
import Feather from 'react-native-vector-icons/Feather';

<Feather name="activity" size={30} color="#900" />
<Feather name="heart" size={30} color="#900" />
FontAwesome
tsx 复制代码 
import FontAwesome from 'react-native-vector-icons/FontAwesome';

<FontAwesome name="glass" size={30} color="#900" />
<FontAwesome name="heart" size={30} color="#900" />
FontAwesome5
tsx 复制代码 
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';

<FontAwesome5 name="angry" size={30} color="#900" />
<FontAwesome5 name="adn" size={30} color="#900" brand />
<FontAwesome5 name="ad" size={30} color="#900" solid />
FontAwesome6
tsx 复制代码 
import FontAwesome6 from 'react-native-vector-icons/FontAwesome6';

<FontAwesome6 name="bookmark" size={30} color="#900" />
<FontAwesome6 name="adn" size={30} color="#900" brand />
<FontAwesome6 name="apple-whole" size={30} color="#900" solid />
Ionicons
tsx 复制代码 
import Ionicons from 'react-native-vector-icons/Ionicons';

<Ionicons name="md-checkmark-circle" size={30} color="#900" />
<Ionicons name="ios-heart" size={30} color="#900" />
MaterialIcons
tsx 复制代码 
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

<MaterialIcons name="airplay" size={30} color="#900" />
<MaterialIcons name="favorite" size={30} color="#900" />
MaterialCommunityIcons
tsx 复制代码 
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

<MaterialCommunityIcons name="account" size={30} color="#900" />
<MaterialCommunityIcons name="heart" size={30} color="#900" />

自定义字体

1. 使用 createIconSet

适用于用户自制的字体文件：

tsx 复制代码 
import { createIconSet } from 'react-native-vector-icons';

const CustomIcon = createIconSet(
  require('../assets/fonts/test.json'),
  'poppy-icon',
  '../assets/fonts/test.ttf'
);

<CustomIcon name="application-record" size={30} color="#900" />
2. 使用 Fontello 字体

从 fontello.com 下载字体：

tsx 复制代码 
import { createIconSetFromFontello } from 'react-native-vector-icons';
import fontelloConfig from '../assets/fonts/config.json';

const CustomFontello = createIconSetFromFontello(
  fontelloConfig,
  'fontello',
  '../assets/fonts/fontello.ttf'
);

<CustomFontello name="emo-happy" size={30} color="#900" />
3. 使用 IcoMoon 字体

从 icomoon.io 下载字体：

tsx 复制代码 
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from '../assets/fonts/selection.json';

const CustomIconMoon = createIconSetFromIcoMoon(
  icoMoonConfig,
  'icomoon',
  '../assets/fonts/icomoon.ttf'
);

<CustomIconMoon name="home2" size={30} color="#900" />
注册自定义字体

自定义字体也需要在 Index.ets 中注册：

ts 复制代码 
RNApp({
  rnInstanceConfig: {
    fontResourceByFontFamily: {
      // ... 内置字体
      'icomoon': $rawfile('fonts/icomoon.ttf'),
      'fontello': $rawfile('fonts/fontello.ttf'),
      'poppy-icon': $rawfile('fonts/test.ttf'),
    }
  }
})

📋 完整示例

ts 复制代码 
import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  SafeAreaView,
  StatusBar,
  TouchableOpacity,
  Alert,
} from 'react-native';

import AntDesign from 'react-native-vector-icons/AntDesign';
import Entypo from 'react-native-vector-icons/Entypo';
import Feather from 'react-native-vector-icons/Feather';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import FontAwesome6 from 'react-native-vector-icons/FontAwesome6';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Octicons from 'react-native-vector-icons/Octicons';
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';

const App: React.FC = () => {
  const handlePress = (iconName: string) => {
    Alert.alert('提示', `点击了 ${iconName} 图标`);
  };

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
      <View style={styles.header}>
        <Text style={styles.headerTitle}>图标库演示</Text>
      </View>

      <ScrollView style={styles.content}>
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>AntDesign</Text>
          <View style={styles.iconRow}>
            <TouchableOpacity onPress={() => handlePress('stepforward')}>
              <AntDesign name="stepforward" size={32} color="#007AFF" />
            </TouchableOpacity>
            <TouchableOpacity onPress={() => handlePress('forward')}>
              <AntDesign name="forward" size={32} color="#34C759" />
            </TouchableOpacity>
            <TouchableOpacity onPress={() => handlePress('backward')}>
              <AntDesign name="backward" size={32} color="#FF9500" />
            </TouchableOpacity>
            <TouchableOpacity onPress={() => handlePress('setting')}>
              <AntDesign name="setting" size={32} color="#FF3B30" />
            </TouchableOpacity>
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Feather</Text>
          <View style={styles.iconRow}>
            <Feather name="activity" size={32} color="#007AFF" />
            <Feather name="heart" size={32} color="#FF3B30" />
            <Feather name="star" size={32} color="#FF9500" />
            <Feather name="user" size={32} color="#34C759" />
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>FontAwesome</Text>
          <View style={styles.iconRow}>
            <FontAwesome name="glass" size={32} color="#007AFF" />
            <FontAwesome name="heart" size={32} color="#FF3B30" />
            <FontAwesome name="star" size={32} color="#FF9500" />
            <FontAwesome name="user" size={32} color="#34C759" />
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>FontAwesome5</Text>
          <View style={styles.iconRow}>
            <FontAwesome5 name="angry" size={32} color="#FF3B30" />
            <FontAwesome5 name="smile" size={32} color="#FF9500" />
            <FontAwesome5 name="heart" size={32} color="#FF3B30" solid />
            <FontAwesome5 name="github" size={32} color="#333" brand />
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>FontAwesome6</Text>
          <View style={styles.iconRow}>
            <FontAwesome6 name="bookmark" size={32} color="#007AFF" />
            <FontAwesome6 name="heart" size={32} color="#FF3B30" solid />
            <FontAwesome6 name="apple" size={32} color="#333" brand />
            <FontAwesome6 name="google" size={32} color="#4285F4" brand />
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Ionicons</Text>
          <View style={styles.iconRow}>
            <Ionicons name="md-home" size={32} color="#007AFF" />
            <Ionicons name="md-heart" size={32} color="#FF3B30" />
            <Ionicons name="md-star" size={32} color="#FF9500" />
            <Ionicons name="md-person" size={32} color="#34C759" />
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>MaterialIcons</Text>
          <View style={styles.iconRow}>
            <MaterialIcons name="home" size={32} color="#007AFF" />
            <MaterialIcons name="favorite" size={32} color="#FF3B30" />
            <MaterialIcons name="star" size={32} color="#FF9500" />
            <MaterialIcons name="person" size={32} color="#34C759" />
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>MaterialCommunityIcons</Text>
          <View style={styles.iconRow}>
            <MaterialCommunityIcons name="home" size={32} color="#007AFF" />
            <MaterialCommunityIcons name="heart" size={32} color="#FF3B30" />
            <MaterialCommunityIcons name="star" size={32} color="#FF9500" />
            <MaterialCommunityIcons name="account" size={32} color="#34C759" />
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>图标按钮</Text>
          
          <FontAwesome.Button 
            name="facebook" 
            backgroundColor="#3b5998" 
            style={styles.button}
            onPress={() => handlePress('Facebook')}
          >
            <Text style={styles.buttonText}>Login with Facebook</Text>
          </FontAwesome.Button>

          <View style={{ height: 12 }} />

          <FontAwesome5.Button 
            name="google" 
            backgroundColor="#DB4437" 
            brand
            style={styles.button}
            onPress={() => handlePress('Google')}
          >
            <Text style={styles.buttonText}>Login with Google</Text>
          </FontAwesome5.Button>

          <View style={{ height: 12 }} />

          <FontAwesome6.Button 
            name="apple" 
            backgroundColor="#000000" 
            brand
            style={styles.button}
            onPress={() => handlePress('Apple')}
          >
            <Text style={styles.buttonText}>Login with Apple</Text>
          </FontAwesome6.Button>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>图标组合</Text>
          <View style={styles.combinedRow}>
            <View style={styles.iconWithLabel}>
              <Ionicons name="md-home" size={40} color="#007AFF" />
              <Text style={styles.label}>首页</Text>
            </View>
            <View style={styles.iconWithLabel}>
              <Ionicons name="md-search" size={40} color="#8E8E93" />
              <Text style={styles.label}>搜索</Text>
            </View>
            <View style={styles.iconWithLabel}>
              <Ionicons name="md-heart" size={40} color="#FF3B30" />
              <Text style={styles.label}>收藏</Text>
            </View>
            <View style={styles.iconWithLabel}>
              <Ionicons name="md-person" size={40} color="#34C759" />
              <Text style={styles.label}>我的</Text>
            </View>
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>不同尺寸</Text>
          <View style={styles.sizeRow}>
            <FontAwesome name="heart" size={16} color="#FF3B30" />
            <FontAwesome name="heart" size={24} color="#FF3B30" />
            <FontAwesome name="heart" size={32} color="#FF3B30" />
            <FontAwesome name="heart" size={48} color="#FF3B30" />
            <FontAwesome name="heart" size={64} color="#FF3B30" />
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>不同颜色</Text>
          <View style={styles.colorRow}>
            <FontAwesome name="star" size={32} color="#FF3B30" />
            <FontAwesome name="star" size={32} color="#FF9500" />
            <FontAwesome name="star" size={32} color="#FFCC00" />
            <FontAwesome name="star" size={32} color="#34C759" />
            <FontAwesome name="star" size={32} color="#007AFF" />
            <FontAwesome name="star" size={32} color="#5856D6" />
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 16,
    backgroundColor: '#FFFFFF',
    borderBottomWidth: 1,
    borderBottomColor: '#E5E5EA',
  },
  headerTitle: {
    fontSize: 20,
    fontWeight: '700',
    color: '#333333',
  },
  content: {
    flex: 1,
    padding: 16,
  },
  section: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 16,
    marginBottom: 16,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333333',
    marginBottom: 16,
  },
  iconRow: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  sizeRow: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  colorRow: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    flexWrap: 'wrap',
  },
  button: {
    paddingVertical: 12,
    paddingHorizontal: 20,
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600',
    marginLeft: 8,
  },
  combinedRow: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  iconWithLabel: {
    alignItems: 'center',
  },
  label: {
    marginTop: 8,
    fontSize: 14,
    color: '#666666',
  },
});

export default App;

⚠️ 注意事项

1. 字体文件必须存在

确保字体文件已正确复制到 entry/src/main/resources/rawfile/fonts 目录下，否则图标无法正常显示。

2. API 版本要求

请使用 API 11 及以上版本，低版本会导致 font 注册不成功。

3. 字体名称映射

不同图标集的字体名称不同，注册时需要使用正确的名称：

图标集 字体名称
AntDesign anticon
Entypo Entypo
Feather Feather
FontAwesome FontAwesome
FontAwesome5 FontAwesome5Free-Regular / FontAwesome5Free-Solid / FontAwesome5Brands-Regular
FontAwesome6 FontAwesome6Free-Regular / FontAwesome6Free-Solid / FontAwesome6Brands-Regular
Ionicons Ionicons
MaterialIcons Material Icons
MaterialCommunityIcons Material Design Icons

4. 不支持的 API

以下 API 在 HarmonyOS 上暂不支持：

API 说明
getImageSource 将字体绘制为 Bitmap
getImageSourceSync 同步将字体绘制为 Bitmap

5. 图标名称查找

使用前请在 图标预览网站 查找正确的图标名称。

6. 自定义字体配置

使用自定义字体时，需要同时准备 .ttf 和 .json 文件：

  • .ttf 文件：字体文件
  • .json 文件：图标名称与 Unicode 的映射关系

7. Button 组件样式

Button 组件支持自定义样式：

tsx 复制代码 
<FontAwesome.Button 
  name="heart"
  backgroundColor="#FF3B30"
  borderRadius={20}
  style={{ paddingVertical: 10, paddingHorizontal: 20 }}
>
  Favorite
</FontAwesome.Button>

8. TypeScript 类型声明

如果使用 TypeScript 开发，需要添加类型声明文件。在项目中创建 src/types/react-native-vector-icons.d.ts 文件：

typescript 复制代码 
declare module 'react-native-vector-icons' {
  import { ComponentClass } from 'react';
  import { ViewStyle, TextStyle } from 'react-native';

  interface IconProps {
    name: string;
    size?: number;
    color?: string;
    style?: ViewStyle | TextStyle;
  }

  interface IconButtonProps {
    name: string;
    size?: number;
    color?: string;
    backgroundColor?: string;
    borderRadius?: number;
    style?: ViewStyle;
    onPress?: () => void;
    children?: React.ReactNode;
  }

  interface IconComponent extends ComponentClass<IconProps> {
    Button: ComponentClass<IconButtonProps>;
  }

  function createIconSet(glyphMap: any, fontFamily: string, fontFile?: string): IconComponent;
  function createIconSetFromFontello(config: any, fontFamily?: string, fontFile?: string): IconComponent;
  function createIconSetFromIcoMoon(config: any, fontFamily?: string, fontFile?: string): IconComponent;
}

declare module 'react-native-vector-icons/AntDesign' {
  import { ComponentClass } from 'react';
  import { ViewStyle, TextStyle } from 'react-native';
  interface IconProps { name: string; size?: number; color?: string; style?: ViewStyle | TextStyle; }
  interface IconButtonProps { name: string; size?: number; color?: string; backgroundColor?: string; borderRadius?: number; style?: ViewStyle; onPress?: () => void; children?: React.ReactNode; }
  const Icon: ComponentClass<IconProps> & { Button: ComponentClass<IconButtonProps> };
  export default Icon;
}

declare module 'react-native-vector-icons/Entypo' {
  import { ComponentClass } from 'react';
  import { ViewStyle, TextStyle } from 'react-native';
  interface IconProps { name: string; size?: number; color?: string; style?: ViewStyle | TextStyle; }
  interface IconButtonProps { name: string; size?: number; color?: string; backgroundColor?: string; borderRadius?: number; style?: ViewStyle; onPress?: () => void; children?: React.ReactNode; }
  const Icon: ComponentClass<IconProps> & { Button: ComponentClass<IconButtonProps> };
  export default Icon;
}

declare module 'react-native-vector-icons/EvilIcons' {
  import { ComponentClass } from 'react';
  import { ViewStyle, TextStyle } from 'react-native';
  interface IconProps { name: string; size?: number; color?: string; style?: ViewStyle | TextStyle; }
  interface IconButtonProps { name: string; size?: number; color?: string; backgroundColor?: string; borderRadius?: number; style?: ViewStyle; onPress?: () => void; children?: React.ReactNode; }
  const Icon: ComponentClass<IconProps> & { Button: ComponentClass<IconButtonProps> };
  export default Icon;
}

declare module 'react-native-vector-icons/Feather' {
  import { ComponentClass } from 'react';
  import { ViewStyle, TextStyle } from 'react-native';
  interface IconProps { name: string; size?: number; color?: string; style?: ViewStyle | TextStyle; }
  interface IconButtonProps { name: string; size?: number; color?: string; backgroundColor?: string; borderRadius?: number; style?: ViewStyle; onPress?: () => void; children?: React.ReactNode; }
  const Icon: ComponentClass<IconProps> & { Button: ComponentClass<IconButtonProps> };
  export default Icon;
}

declare module 'react-native-vector-icons/FontAwesome' {
  import { ComponentClass } from 'react';
  import { ViewStyle, TextStyle } from 'react-native';
  interface IconProps { name: string; size?: number; color?: string; style?: ViewStyle | TextStyle; }
  interface IconButtonProps { name: string; size?: number; color?: string; backgroundColor?: string; borderRadius?: number; style?: ViewStyle; onPress?: () => void; children?: React.ReactNode; }
  const Icon: ComponentClass<IconProps> & { Button: ComponentClass<IconButtonProps> };
  export default Icon;
}

declare module 'react-native-vector-icons/FontAwesome5' {
  import { ComponentClass } from 'react';
  import { ViewStyle, TextStyle } from 'react-native';
  interface IconProps { name: string; size?: number; color?: string; brand?: boolean; solid?: boolean; style?: ViewStyle | TextStyle; }
  interface IconButtonProps { name: string; size?: number; color?: string; brand?: boolean; solid?: boolean; backgroundColor?: string; borderRadius?: number; style?: ViewStyle; onPress?: () => void; children?: React.ReactNode; }
  const Icon: ComponentClass<IconProps> & { Button: ComponentClass<IconButtonProps> };
  export default Icon;
}

declare module 'react-native-vector-icons/FontAwesome6' {
  import { ComponentClass } from 'react';
  import { ViewStyle, TextStyle } from 'react-native';
  interface IconProps { name: string; size?: number; color?: string; brand?: boolean; solid?: boolean; style?: ViewStyle | TextStyle; }
  interface IconButtonProps { name: string; size?: number; color?: string; brand?: boolean; solid?: boolean; backgroundColor?: string; borderRadius?: number; style?: ViewStyle; onPress?: () => void; children?: React.ReactNode; }
  const Icon: ComponentClass<IconProps> & { Button: ComponentClass<IconButtonProps> };
  export default Icon;
}

declare module 'react-native-vector-icons/Fontisto' {
  import { ComponentClass } from 'react';
  import { ViewStyle, TextStyle } from 'react-native';
  interface IconProps { name: string; size?: number; color?: string; style?: ViewStyle | TextStyle; }
  interface IconButtonProps { name: string; size?: number; color?: string; backgroundColor?: string; borderRadius?: number; style?: ViewStyle; onPress?: () => void; children?: React.ReactNode; }
  const Icon: ComponentClass<IconProps> & { Button: ComponentClass<IconButtonProps> };
  export default Icon;
}

declare module 'react-native-vector-icons/Foundation' {
  import { ComponentClass } from 'react';
  import { ViewStyle, TextStyle } from 'react-native';
  interface IconProps { name: string; size?: number; color?: string; style?: ViewStyle | TextStyle; }
  interface IconButtonProps { name: string; size?: number; color?: string; backgroundColor?: string; borderRadius?: number; style?: ViewStyle; onPress?: () => void; children?: React.ReactNode; }
  const Icon: ComponentClass<IconProps> & { Button: ComponentClass<IconButtonProps> };
  export default Icon;
}

declare module 'react-native-vector-icons/Ionicons' {
  import { ComponentClass } from 'react';
  import { ViewStyle, TextStyle } from 'react-native';
  interface IconProps { name: string; size?: number; color?: string; style?: ViewStyle | TextStyle; }
  interface IconButtonProps { name: string; size?: number; color?: string; backgroundColor?: string; borderRadius?: number; style?: ViewStyle; onPress?: () => void; children?: React.ReactNode; }
  const Icon: ComponentClass<IconProps> & { Button: ComponentClass<IconButtonProps> };
  export default Icon;
}

declare module 'react-native-vector-icons/MaterialCommunityIcons' {
  import { ComponentClass } from 'react';
  import { ViewStyle, TextStyle } from 'react-native';
  interface IconProps { name: string; size?: number; color?: string; style?: ViewStyle | TextStyle; }
  interface IconButtonProps { name: string; size?: number; color?: string; backgroundColor?: string; borderRadius?: number; style?: ViewStyle; onPress?: () => void; children?: React.ReactNode; }
  const Icon: ComponentClass<IconProps> & { Button: ComponentClass<IconButtonProps> };
  export default Icon;
}

declare module 'react-native-vector-icons/MaterialIcons' {
  import { ComponentClass } from 'react';
  import { ViewStyle, TextStyle } from 'react-native';
  interface IconProps { name: string; size?: number; color?: string; style?: ViewStyle | TextStyle; }
  interface IconButtonProps { name: string; size?: number; color?: string; backgroundColor?: string; borderRadius?: number; style?: ViewStyle; onPress?: () => void; children?: React.ReactNode; }
  const Icon: ComponentClass<IconProps> & { Button: ComponentClass<IconButtonProps> };
  export default Icon;
}

declare module 'react-native-vector-icons/Octicons' {
  import { ComponentClass } from 'react';
  import { ViewStyle, TextStyle } from 'react-native';
  interface IconProps { name: string; size?: number; color?: string; style?: ViewStyle | TextStyle; }
  interface IconButtonProps { name: string; size?: number; color?: string; backgroundColor?: string; borderRadius?: number; style?: ViewStyle; onPress?: () => void; children?: React.ReactNode; }
  const Icon: ComponentClass<IconProps> & { Button: ComponentClass<IconButtonProps> };
  export default Icon;
}

declare module 'react-native-vector-icons/SimpleLineIcons' {
  import { ComponentClass } from 'react';
  import { ViewStyle, TextStyle } from 'react-native';
  interface IconProps { name: string; size?: number; color?: string; style?: ViewStyle | TextStyle; }
  interface IconButtonProps { name: string; size?: number; color?: string; backgroundColor?: string; borderRadius?: number; style?: ViewStyle; onPress?: () => void; children?: React.ReactNode; }
  const Icon: ComponentClass<IconProps> & { Button: ComponentClass<IconButtonProps> };
  export default Icon;
}

declare module 'react-native-vector-icons/Zocial' {
  import { ComponentClass } from 'react';
  import { ViewStyle, TextStyle } from 'react-native';
  interface IconProps { name: string; size?: number; color?: string; style?: ViewStyle | TextStyle; }
  interface IconButtonProps { name: string; size?: number; color?: string; backgroundColor?: string; borderRadius?: number; style?: ViewStyle; onPress?: () => void; children?: React.ReactNode; }
  const Icon: ComponentClass<IconProps> & { Button: ComponentClass<IconButtonProps> };
  export default Icon;
}
相关推荐
桔筐15 分钟前
Vue3 v-model 双向绑定导致循环触发的坑
前端·javascript·vue.js
路光.35 分钟前
ReferenceError:Can‘t find variable:structureClone
前端·javascript·html·vue2
我这一生如履薄冰~39 分钟前
浏览器多窗口同开一页面，数据同步更新（纯前端方案）
前端·javascript
Rkgua1 小时前
实例成员和静态成员在对象中的用法
javascript
Momo__1 小时前
Web Speech API 语音识别与合成详解
前端·javascript
FlyWIHTSKY1 小时前
在 **Element Plus 中，`el-aside` 关闭后**仍然占位置**，通常是因为 **它没有被销毁或宽度没有变为 0**。
前端·javascript·vue.js
AC赳赳老秦1 小时前
网安工程师提效：用 OpenClaw 实现漏洞扫描报告生成、安全巡检自动化、日志合规审计
java·开发语言·前端·javascript·python·deepseek·openclaw
幻影七幻1 小时前
js中send的作用和使用 $.ajax的作用
开发语言·前端·javascript
我是Superman丶2 小时前
Antigravity Retry 自动重试脚本
前端·javascript·vue.js
im_AMBER2 小时前
Leetcode 162 除了自身以外数组的乘积 | 接雨水
开发语言·javascript·数据结构·算法·leetcode
热门推荐
01GitHub 镜像站点02近期有什么ai的新消息，新动态？ 2026.4月032026年4月AI大事件深度解读：大模型竞争进入“深水区“04Codex 接入 DeepSeek API 完整配置文档052026年AI编程工具终极横评：Cursor vs Claude Code vs Copilot06【AI】2026 年具身智能模型和世界模型总结07在Windows 11上安装Docker的踩坑记录08零基础教你claude code 接入 deepseek V4092026年AI前瞻：量子AI、具身智能与科学发现的新纪元10VSCode + Copilot下：配置并使用 DeepSeek