React Native项目中集成react-native-vector-icons

时间 2021-05-08

标签 node react ios npm react-native app 字体 gradle spa 栏目 React 繁體版

原文原文链接

使用React Native开发移动App时，常常会遇到矢量图和自定义字体的开发需求，使用矢量图能够有效的减小包体积的大小。在React Native开发中，可使用react-native-vector-icons来知足开发需求。node

1、安装

和其余的第三方库同样，使用第三方库以前须要先安装react-native-vector-icons。react

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

而后，在使用link命令添加原生库连接。ios

react-native link react-native-vector-icons

2、原生端配置

2.1 iOS端配置

首先，在RN的 ios 目录下执行 pod install命令安装依赖包。npm

cd ios && pod install

而后，在Xcode项目中建立一个新的字体组取名为Fonts，从 ./node_modules/react-native-vector-icons/Fonts将须要的字体拷贝进去。

打开Xcode，使用源代码模式编辑 info.plist 文件，以下图。

而后，将字体的配置加入进去，以下所示。react-native

<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>
    ...
  </array>

使用Xcode编译一下iOS项目，若是没有任何错误就说明配置好了。app

2.2 Android端配置

和 iOS 同样，Android原生端也须要进行一些配置才能正常使用。首先，将node-modeles\react-native-vector-icons\Fonts 目录下文件复制到项目andriod\app\src\main\assets\fonts 目录下。

而后，打开andriod/app/build.gradle文件，增长以下代码。字体

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

从新编译Android工程，若是没有任何错误，说明配置好了。gradle

2.3 使用示例

原生端配置完成以后，接下来就能够直接使用了，以下所示。ui

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

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

参考：react-native-vector-iconsspa