添加依赖

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>

使用自定义字体图标

  1. android\app\src\main\assets\fonts 目录下 添加 .ttf 文件(test.ttf);

  2. 在 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;
  3. 使用自定义 Icon 组件:

    import Icon from '../components/icon';
    ...
    <Icon name='yinle' size={38} onPress={() => alert('自定义Icon')} />
    ...
  4. 获得 .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 开发豆瓣评分(六)添加字体图标的更多相关文章

  1. React Native 开发豆瓣评分(八)首页开发

    首页完成效果展示: 一.开发占位图组件 在没有数据的时候使用占位图替代 items 的位置. 在 components 目录里创建 moviesItemPlaceholder.js import Re ...

  2. React Native 开发豆瓣评分(五)屏幕适配方案

    前言 React Native 是以实际像素 dp 为单位的,这导致在不同分辨率的屏幕会有不一样的显示情况. 在原生 Android 中,可以根据不同的分辨率添加不同的样式目录,以解决不同分辨率的问题 ...

  3. React Native 开发豆瓣评分(四)集中管理 fetch 数据请求

    豆瓣评分的API接口 接口是从网上查找的,看样子应该是微信小程序里面扣出来的(ua 里面有 wechatdevtools) 接口都需要设置apiKey(054022eaeae0b00e0fc068c0 ...

  4. React Native 开发豆瓣评分(一)环境搭建&配置模拟器

    详细可参考 官方文档,这里进记录一些重要过程. 安装环境 下载 Android Studio 选择 Custom 进行安装: Android SDK Android SDK Platform Perf ...

  5. React Native 开发豆瓣评分(三)集成 Redux

    什么是 redux redux 是一个用于管理 js 应用状态(state)的容器.比如组件 A 发生了变化,组件 B 要同时做出响应.常见的应用场景就是用户的登录退出操作:未登录状态,个人中心显示登 ...

  6. React Native 开发豆瓣评分(七)首页组件开发

    首页内容拆分 看效果图,首页由热门影院.豆瓣热门.热门影视等列表组成,每个列表又由头加横向滑动的 电影海报列表构成. 所以可以先把页面的电影海报.评分.列表头做成组件,然后在使用 ScrollView ...

  7. React Native 开发豆瓣评分(二)路由配置

    路由管理使用官方推荐的 React Navigation; 配置环境 安装相关依赖 yarn add react-navigation react-native-gesture-handler Lin ...

  8. React Native开发入门

    目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料   一.前言 虽然只是简单的了解了一下Reac ...

  9. React Native开发技术周报2

    (1).资讯 1.React Native 0.22_rc版本发布 添加了热自动重载功能 (2).技术文章 1.用 React Native 设计的第一个 iOS 应用 我们想为用户设计一款移动端的应 ...

随机推荐

  1. SpringMVC(中)

    一.传值方式 (1)Map Controller @Controller public class MyController { @RequestMapping("first") ...

  2. go -- 测试

    package 测试 import ( "fmt" "github.com/magiconair/properties/assert" "net/ht ...

  3. Nginx配置SSL证书部署HTTPS网站(颁发证书)

    一.Http与Https的区别HTTP:是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高 ...

  4. java 库 pdfbox 将 pdf 文件转换成高清图片方法

    近期需要将 pdf 文件转成高清图片,使用库是 pdfbox.fontbox.可以使用 renderImageWithDPI 方法指定转换的清晰度,当然清晰度越高,转换需要的时间越长,转换出来的图片越 ...

  5. ISO/IEC 9899:2011 摘要

    本国际标准指定了C编程语言的形式并建立了对用它所表达的程序的解释.其目的在于促进在多种计算机系统上的C语言程序的可移植性.可靠性.可维护性以及高效的执行. 为了详细地说明C语言本身以及C语言执行库,包 ...

  6. Flutter UI系统

    我们可以看到,无论是Android SDK还是iOS的UIKit 的职责都是相同的,它们只是语言载体和底层的系统不同而已.那么可不可以实现这么一个UI系统:可以使用同一种编程语言开发,然后针对不同操作 ...

  7. Mac下的IDEA快捷键

    快捷键 功能 Option + enter 打开提示 Command + / 注释方式是“行注释”:可以注释当前行.取消当前行的注释 注释选中的内容.取消选中行的注释 Option + Command ...

  8. Python中request的post请求报requests.exceptions.SSLError:

    今天发送一个post请求,提示错误 requests.exceptions.SSLError: HTTPSConnectionPool(host='user.zaful.com', port=443) ...

  9. test String.split

    test "map.mergd" do s = :crypto.strong_rand_bytes() # <<, , , , , >> # = >& ...

  10. python使用consul进行服务注册和发现

    阅读目录 一.安装启动consul 二.python服务注册 三.golang服务注册 四.通过API的方式获取信息 回到顶部 一.安装启动consul 1.通过docker快速安装 #获取docke ...