React Native 开发豆瓣评分(六)添加字体图标
添加依赖
yarn add react-native-vector-icons
Link 依赖
react-native link react-native-vector-icons
使用默认字体图标
import Icon from 'react-native-vector-icons/AntDesign'; //可以选择AntDesign、FontAwesome、EvilIcons...<Icon name="search1" size={30} color="#900" />
<Icon.Button name="search1" onPress={() => alert(666)}>Login with Facebook
</Icon.Button>
使用自定义字体图标
- 在 android\app\src\main\assets\fonts 目录下 添加 .ttf 文件(test.ttf);
在 components 目录下创建自定义 Icon 组件(icon.js):
import createIconSet from 'react-native-vector-icons/lib/create-icon-set'; const glyphMap = {"yinle":58880,"chongbangx":58881}; //yinle 为即将使用的name的值,58880 为 ttf 图标对应的 16 进制值 const Icon = createIconSet(glyphMap, 'test', 'test.ttf'); export default Icon;
使用自定义 Icon 组件:
import Icon from '../components/icon'; ... <Icon name='yinle' size={38} onPress={() => alert('自定义Icon')} /> ...
获得 .ttf 文件的 name 与 16 进制字符串:
在命令行依次执行以下步骤
mkdir transfromttf cd transfromttf npm init -y touch index.js npm install font-carrier --save
编辑 index.js
var fontCarrier = require('font-carrier') var fonts = fontCarrier.transfer('./iconfont.ttf').__glyphs;var obj = {}; for(let key in fonts){obj[fonts[key].options.name] = parseInt(fonts[key].options.unicode.replace('&#x',''),16); } console.log(JSON.stringify(obj))
将 .ttf 文件复制到 transfromttf 目录,运行 index.js 即可得到 glyphMap
node index.js
减少 apk 包体积
react-native-vector-icons 自带 16 种字体文件,可参考:react-native-vector-icons,并非每一种风格的字体图标我们都会使用,甚至我们只会使用 ui 给我们的 .ttf 文件,所以为了 apk 大小考虑,可以删除 android\app\src\main\assets\fonts 目录下未使用的 .ttf 文件,全部删除的话,apk 大概减少1M 多。
转载于:https://www.cnblogs.com/hl1223/p/11133299.html
React Native 开发豆瓣评分(六)添加字体图标相关推荐
- React Native 开发豆瓣评分(五)屏幕适配方案
前言 React Native 是以实际像素 dp 为单位的,这导致在不同分辨率的屏幕会有不一样的显示情况. 在原生 Android 中,可以根据不同的分辨率添加不同的样式目录,以解决不同分辨率的问题 ...
- react native开发Android 篇——APP名称、图标、启动页
react native开发Android 篇--APP名称.图标.启动页 设置APP名称 设置APP图标 设置启动页 隐藏启动页 设置APP名称 编辑 android/app/src/main/re ...
- react native 开发APP(六)网络请求,列表的使用
官网 https://reactnative.cn/ 项目下载地址:https://github.com/hebiao6446/DemoProject 陆续更新中... 在移动端开发的时候,我们基本上 ...
- react native开发Android 篇——集成自定义的字体
react native开发Android 篇--集成自定义的字体 第一种:link添加自定义字体 第二种:直接复制字体到`android/app/src/main/assets/fonts`目录下 ...
- React Native开发(一)
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac ...
- React Native开发规范(非官方,自己定义的)
React Native开发规范 一.命名规范 二.代码格式 三.注释规约 四.样式规约 五.Redux 相关操作 六.桥接规约 七.JSX 规约 八.组件规约 九.npm 规约 十.性能优化 一.命 ...
- windows 下配置 react native 开发环境
windows 下配置 react native 开发环境 安装nvm 由于react native 需要使用 NodeJs 4.0以上版本,为了方便切换NodeJs,首先我们需要安装nvm. 你可以 ...
- React Native开发之必备React基础
为了帮助大家快速上手React Native开发,在这本节中将向大家介绍开发React Native所需要的一些React必备基础知识. 概述 本节课将从React的特点.如何使用React.JSX语 ...
- React Native开发错误警告处理总结(已解决 !持续更新)
注:本文是我在开发过程中遇到问题解决方法的总结,之后会持续更新,希望帮助到更多的学习者.文中有不妥的地方希望指出共同学习,同时欢迎大神补充.(之后我会放出自己开发整理的笔记和GithubDemo地址, ...
最新文章
- Java练习 SDUT-1230_平方和与立方和
- 基于 EntityFramework 的数据库主从读写分离架构(1) - 原理概述和基本功能实现...
- 用JSP实现学生查询
- RabbitMQ之监控(2)
- python书写风格_python书写风格
- 如何用C#将tif格式的图片转化成jpg?
- 从零开始刷Leetcode——数组(189.217.219)
- 震惊!Spring Boot 内存又泄露,排查太难了!
- python数字图像处理(11):图像自动阈值分割
- while循环 dowhile循环 for循环(C++)
- 【笔记】mac上如何用命令行编译jni
- 神经网络控制系统设计,神经网络技术及其应用
- flutter 仿网易云音乐(1)
- Jdk8 中文 api(百度网盘免费下载)
- Android studio 之 Kotlin Not Configured
- 浪潮服务器bios设置 改硬盘接口,bios设置中更改硬盘接口模式为ide的方法
- 饿了么美团外卖返利程序对接公众号发单机器人分销系统返利源码
- Windows系统开机自动运行程序和自动启动服务
- linux基础(五)----linux命令系统学习----系统管理命令
- (验证文件)validateJarFile...报错
热门文章
- oracle dblink和dataguard,Oracle 建立 DBLINK
- 寿险的精算现值(EPV)
- 以云为跳板,疑似中国黑客组织黑进全球知名IT服务公司
- 云服务器是什么,有什么用?
- Exception in thread main java.lang.NoClassDefFoundError
- H3C实验H3CTE讲师京东翰林分享实验4 WLAN基本配置
- 跟小静学MVC3[01]--创建第一个MVC3项目
- android 语音搜索动画,Android自定义控件实现UC浏览器语音搜索效果
- python 算法库_一个易用又功能强大的 Python遗传算法库
- mit许可证_MIT许可证的神秘历史