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 多。
React Native 开发豆瓣评分(六)添加字体图标的更多相关文章
- React Native 开发豆瓣评分(八)首页开发
首页完成效果展示: 一.开发占位图组件 在没有数据的时候使用占位图替代 items 的位置. 在 components 目录里创建 moviesItemPlaceholder.js import Re ...
- React Native 开发豆瓣评分(五)屏幕适配方案
前言 React Native 是以实际像素 dp 为单位的,这导致在不同分辨率的屏幕会有不一样的显示情况. 在原生 Android 中,可以根据不同的分辨率添加不同的样式目录,以解决不同分辨率的问题 ...
- React Native 开发豆瓣评分(四)集中管理 fetch 数据请求
豆瓣评分的API接口 接口是从网上查找的,看样子应该是微信小程序里面扣出来的(ua 里面有 wechatdevtools) 接口都需要设置apiKey(054022eaeae0b00e0fc068c0 ...
- React Native 开发豆瓣评分(一)环境搭建&配置模拟器
详细可参考 官方文档,这里进记录一些重要过程. 安装环境 下载 Android Studio 选择 Custom 进行安装: Android SDK Android SDK Platform Perf ...
- React Native 开发豆瓣评分(三)集成 Redux
什么是 redux redux 是一个用于管理 js 应用状态(state)的容器.比如组件 A 发生了变化,组件 B 要同时做出响应.常见的应用场景就是用户的登录退出操作:未登录状态,个人中心显示登 ...
- React Native 开发豆瓣评分(七)首页组件开发
首页内容拆分 看效果图,首页由热门影院.豆瓣热门.热门影视等列表组成,每个列表又由头加横向滑动的 电影海报列表构成. 所以可以先把页面的电影海报.评分.列表头做成组件,然后在使用 ScrollView ...
- React Native 开发豆瓣评分(二)路由配置
路由管理使用官方推荐的 React Navigation; 配置环境 安装相关依赖 yarn add react-navigation react-native-gesture-handler Lin ...
- React Native开发入门
目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料 一.前言 虽然只是简单的了解了一下Reac ...
- React Native开发技术周报2
(1).资讯 1.React Native 0.22_rc版本发布 添加了热自动重载功能 (2).技术文章 1.用 React Native 设计的第一个 iOS 应用 我们想为用户设计一款移动端的应 ...
随机推荐
- SpringMVC(中)
一.传值方式 (1)Map Controller @Controller public class MyController { @RequestMapping("first") ...
- go -- 测试
package 测试 import ( "fmt" "github.com/magiconair/properties/assert" "net/ht ...
- Nginx配置SSL证书部署HTTPS网站(颁发证书)
一.Http与Https的区别HTTP:是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高 ...
- java 库 pdfbox 将 pdf 文件转换成高清图片方法
近期需要将 pdf 文件转成高清图片,使用库是 pdfbox.fontbox.可以使用 renderImageWithDPI 方法指定转换的清晰度,当然清晰度越高,转换需要的时间越长,转换出来的图片越 ...
- ISO/IEC 9899:2011 摘要
本国际标准指定了C编程语言的形式并建立了对用它所表达的程序的解释.其目的在于促进在多种计算机系统上的C语言程序的可移植性.可靠性.可维护性以及高效的执行. 为了详细地说明C语言本身以及C语言执行库,包 ...
- Flutter UI系统
我们可以看到,无论是Android SDK还是iOS的UIKit 的职责都是相同的,它们只是语言载体和底层的系统不同而已.那么可不可以实现这么一个UI系统:可以使用同一种编程语言开发,然后针对不同操作 ...
- Mac下的IDEA快捷键
快捷键 功能 Option + enter 打开提示 Command + / 注释方式是“行注释”:可以注释当前行.取消当前行的注释 注释选中的内容.取消选中行的注释 Option + Command ...
- Python中request的post请求报requests.exceptions.SSLError:
今天发送一个post请求,提示错误 requests.exceptions.SSLError: HTTPSConnectionPool(host='user.zaful.com', port=443) ...
- test String.split
test "map.mergd" do s = :crypto.strong_rand_bytes() # <<, , , , , >> # = >& ...
- python使用consul进行服务注册和发现
阅读目录 一.安装启动consul 二.python服务注册 三.golang服务注册 四.通过API的方式获取信息 回到顶部 一.安装启动consul 1.通过docker快速安装 #获取docke ...