ReactNative中如何使用阿里Iconfont图标 丶沉寂有定期

在react-native项目中我们一般使用到 react-native-vector-icons(这里不介绍如何使用react-native-vector-icons按照官方文档即可)但是当react-native-vector-icons里面的默认图标并不能满足我们的日常开发的时候怎么办呢?

那就是只能使用自定义图标来了,这里我们以iconfont为例,(其他图标库引入方式一模一样)

一、在iconfont.cn上选择好需要的图标,打包下载解压后,将iconfont.tff文件拷贝到android/app/src/main/assets/fonts目录下:

image

二、添加依赖包,网上有帖子提到,在添加完依赖之后,执行npm link react-native-vector-icons,这里千万不要执行,执行完会有版本问题,这个项目都执行不了,浪费了一个下午。

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

三、打开/android/app/build.gradle,添加代码

project.ext.vectoricons = [
    iconFontNames: [ 'iconfont.ttf' ] // Name of the font files you want to copy
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle";

四、在你的根目录下新建js/common/MyIcon.js和js/common/iconfont.json

Myicon.js

import {createIconSet} from 'react-native-vector-icons';
import glyphMap from './iconfont.json';

const iconSet = createIconSet(glyphMap, 'MyIcon', 'iconfont.ttf');

export default iconSet;

编辑iconfont.json

{ "qiuchang": 59002 } //{"标识":10进制,这个数字在下载的压缩包,iconfont.json,其中每个图片都有一个对应unicode_decimal}

这里作如下说明,iconfont.json中对应图标名字,和十进制码,我们选择的图标有个Unicode编码,他是十六进制的,而我们要将其转换为十进制,配置在我们的iconfont.json中

image

五、使用

[
复制代码

](javascript:void(0); "复制代码")


<MyIcon name={'qiuchang'} size={50} style={{
             color: '#f33' }}>
</MyIcon>

[
复制代码

](javascript:void(0); "复制代码")

五,加入你的产品的图标全部都是原创的,那么你就需要你们ui给你制作对应.ttf文件,步骤和上面一直,还有就是,可以使用脚本自动对应json的映射关系........

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容