【2020 React-Native 系列】之 react-native-vector-icons

环境

• 撰写时间：2020-08-02
• React Native 版本 ：0.63.2
• Xcode 版本：Version 11.6 (11E708)

我们在应用中，都有随处可见的小图标，那么在 React Native 中，我们一般都是通过 react-native-vector-icons 来完成此项工作

install

一行命令安装

yarn add react-native-vector-icons

IOS 平台设置

我们需要在 ios 平台下执行 pod install

 cd ios && pod install
 

然后打开我们的 xcode，源代码模式编辑 info.plist 文件

加入如下代码

UIAppFonts
  
    AntDesign.ttf
    Entypo.ttf
    EvilIcons.ttf
    Feather.ttf
    FontAwesome.ttf
    FontAwesome5_Brands.ttf
    FontAwesome5_Regular.ttf
    FontAwesome5_Solid.ttf
    Foundation.ttf
    Ionicons.ttf
    MaterialIcons.ttf
    MaterialCommunityIcons.ttf
    SimpleLineIcons.ttf
    Octicons.ttf
    Zocial.ttf
    Fontisto.ttf
  

然后在项目中新建 Fonts 文件夹，把 ./node_modules/react-native-vector-icons/Fonts/ 中的所有字体文件，全部拷贝进去，如图

重新编译运行就 ok 啦~

Android 平台设置

安卓平台设置更简单，两步即可

拷贝字体文件

首先和 iOS 一样 将 node-modeles\react-native-vector-icons\Fonts 目录下文件复制到项目andriod\app\src\main\assets\fonts 目录下，如图

记住，如果目录不存在就新建

修改 build.gradle 文件

文件路径：andriod/app/build.gradle ，增加如下代码

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

使用

安装官网文档使用即可

import Icon from 'react-native-vector-icons/FontAwesome';

由于 RN 在国内慢慢的使用的人少了，所以很多教程文档基本上不可用，我们现在新项目正在使用 React Native，所以记录一下每一个坑，为了避免时间长久对后人造成误导，故此系列文件在开头会著名时间与版本