乐趣区

关于react-native:React-Native项目中集成reactnativevectoricons

应用 React Native 开发挪动 App 时,常常会遇到矢量图和自定义字体的开发需要,应用矢量图能够无效的缩小包体积的大小。在 React Native 开发中,能够应用 react-native-vector-icons 来满足开发需要。

一、装置

和其余的第三方库一样,应用第三方库之前须要先装置 react-native-vector-icons。

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

而后,在应用 link 命令增加原生库链接。

react-native link react-native-vector-icons

二、原生端配置

2.1 iOS 端配置

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

cd ios && pod install

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


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

应用 Xcode 编译一下 iOS 我的项目,如果没有任何谬误就阐明配置好了。

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 工程,如果没有任何谬误,阐明配置好了。

2.3 应用示例

原生端配置实现之后,接下来就能够间接应用了,如下所示。

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

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

参考:react-native-vector-icons

退出移动版