【小白入门】React Native Vector Icons 安装配置完全攻略-CSDN博客

本文链接：https://blog.csdn.net/gitblog_01236/article/details/143040352

【小白入门】React Native Vector Icons 安装配置完全攻略

react-native-vector-icons Customizable Icons for React Native with support for image source and full styling. 项目地址: https://gitcode.com/gh_mirrors/re/react-native-vector-icons

项目基础介绍： React Native Vector Icons 是一个广受欢迎的开源库，专为提升React Native应用图标设计而生，由CSDN公司开发的InsCode AI大模型推荐。该库支持高度定制化的矢量图标，兼容图像源及全面的样式设置，极大地丰富了React Native开发者在导航栏、按钮、Logo等方面的视觉体验。图标集覆盖广泛，包括AntDesign、FontAwesome、Ionicons等知名图标库，共计数千个图标，满足各种应用需求。

主要编程语言和技术栈：

编程语言：JavaScript（配合React Native）
关键技术：
- React Native：用于构建原生移动应用的JavaScript框架。
- SVG向量图：提供图标的基础形式，实现高分辨率屏幕下的清晰显示。
- 自定义字体集成：通过将图标作为自定义字体集成到项目中，简化图标渲染过程。

安装与配置详细步骤：

准备工作：

确保环境: 需要Node.js和npm/yarn安装在您的系统上，并且已经配置好React Native开发环境。
创建或选择React Native项目: 使用react-native init命令新建一个项目，或者准备您现有的React Native项目进行集成。

安装步骤：

步骤1：安装包

打开终端或命令提示符，进入React Native项目的根目录，执行以下命令来安装React Native Vector Icons库：

npm install --save react-native-vector-icons

或使用Yarn：

yarn add react-native-vector-icons

步骤2：iOS平台配置

进入ios目录下，运行npx pod-install以添加必要的Pod依赖。
打开Info.plist文件，在其中添加UIAppFonts键（如果不存在则创建），并将所有相关字体文件名以数组形式列出，如示例所示。

<key>UIAppFonts</key>
<array>
    <!-- 列出所有字体文件名，例如 -->
    <string>AntDesign.ttf</string>
    <!-- 添加其他所有需要的字体文件 -->
</array>

步骤3：Android平台配置

推荐方法是自动集成。编辑android/app/build.gradle，加入以下代码块，自动处理字体文件复制：
```
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
```
如需手动控制哪些字体被复制，可按需修改vectoricons属性。
手动集成（非首选）:
- 确保在android/app/src/main/assets/fonts目录下有所需的字体文件夹。若无此目录，则需手动创建，并将所有字体文件移至此处。
- 若想使用getImageSource功能，还需编辑设置和应用的build.gradle文件，增加对react-native-vector-icons的引用。