【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 文件

加入如下代码

<key>UIAppFonts</key>
  <array>
    <string>AntDesign.ttf</string>
    <string>Entypo.ttf</string>
    <string>EvilIcons.ttf</string>
    <string>Feather.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>FontAwesome5_Brands.ttf</string>
    <string>FontAwesome5_Regular.ttf</string>
    <string>FontAwesome5_Solid.ttf</string>
    <string>Foundation.ttf</string>
    <string>Ionicons.ttf</string>
    <string>MaterialIcons.ttf</string>
    <string>MaterialCommunityIcons.ttf</string>
    <string>SimpleLineIcons.ttf</string>
    <string>Octicons.ttf</string>
    <string>Zocial.ttf</string>
    <string>Fontisto.ttf</string>
  </array>

然后在项目中新建 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';

<Icon name="rocket" size={30} color="#900" />

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

有任何问题，欢迎关注我公众号进行留言