ReactNative开发豆瓣评分（五）添加字体图标

添加依赖

yarn add react-native-vector-icons

Link 依赖

react-native link react-native-vector-icons

使用默认字体图标

import Icon from &＃39;react-native-vector-icons/AntDesign&＃39;; //可以选择AntDesign、FontAwesome、EvilIcons...


 alert(666)}>
    Login with Facebook

使用自定义字体图标

1. 在 android\app\src\main\assets\fonts 目录下 添加 .ttf 文件（test.ttf）；

2. 在 components 目录下创建自定义 Icon 组件(icon.js)：

   import createIconSet from &＃39;react-native-vector-icons/lib/create-icon-set&＃39;;
   const glyphMap = {"yinle":58880,"chongbangx":58881};
   //yinle 为即将使用的name的值，58880 为 ttf 图标对应的 16 进制值
   const Icon = createIconSet(glyphMap, &＃39;test&＃39;, &＃39;test.ttf&＃39;);
   export default Icon;

3. 使用自定义 Icon 组件:

   import Icon from &＃39;../components/icon&＃39;;
   ...
    alert(&＃39;自定义Icon&＃39;)} />
   ...

4. 获得 .ttf 文件的 name 与 16 进制字符串：

   • 在命令行依次执行以下步骤

     mkdir transfromttf
     cd transfromttf
     npm init -y
     touch index.js
     npm install font-carrier --save

   • 编辑 index.js

     var fOntCarrier= require(&＃39;font-carrier&＃39;)
     var fOnts= fontCarrier.transfer(&＃39;./iconfont.ttf&＃39;).__glyphs;
     
     var obj = {};
     for(let key in fonts){
         obj[fonts[key].options.name] = parseInt(fonts[key].options.unicode.replace(&＃39;&＃x&＃39;,&＃39;&＃39;),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 开发豆瓣评分（五）添加字体图标