在 React Native 中快捷优雅使用 iconfont

本文主要讨论如何在 React Native 中快捷配置 iconfont - 自定义字体文件。

工具类库及网站索引：

• react-native-vector-icons
• fontello
• iconfont - 阿里巴巴矢量图图标

最终效果

简单的设置 Icon 组件的 name, color, size 属性来显示自定义的 iconfont（支持 react native vector icons 所有属性）。

<Icon name={"register"} color={'#E5E5E5'} size={20}/>

配置过程

1. 安装 react native vector icons

   1. 运行
      $ npm install react-native-vector-icons --save

   2. 如果你想使用库中的默认字体文件，则需要链接资源库(可选)

      1. 自动链接：$ react-native link
      2. 手动链接：请参考 react-native-vector-icons 官方 github 中 Installation 部分有关 iOS 和 Android 的内容

   3. 重新运行项目

   4. 测试是否安装成功：在任一组件中引用 Icon 组件，并通过如下方法引用

      import Icon from 'react-native-vector-icons/FontAwesome';
      <Icon name="rocket" size={30} color="#900" />
      

2. 使用 iconfont-自定义字体

   1. 从 iconfont - 阿里巴巴矢量图图标 中选择喜欢的自定义字体，然后加入自己的项目中。

   2. 打包下载项目到本地

      
      download_to_local.jpeg

   3. 解压项目文件，获取项目内容

      
      get_font_files.jpeg
   4. 打开 fontello 网站 拖拽上图文件夹中的 svg 文件至页面。

   5. 选中需要的自定义字体并打包下载

      
      download_web_font.jpeg
   6. 在下载解压的文件夹中找到 config.json 文件和 font 文件夹下的 fontello.ttf 文件

   7. 打开 xcode，将 fontello.ttf 文件拖入 RN 项目的 Resource 文件夹，注意必须勾选 ‘Create groups’ 和 ‘Add to targets’ 选项

      
      import_ttf_to_xcode.jpeg

   8. 在 xcode 点击项目名，再点击 Info tab, 手动添加相应字段

      
      link_ttffile.jpeg
   9. Android 平台中只需将 fontello.ttf 文件放入 android/app/src/main/assets/fonts 文件夹即可
   10. 在 RN 项目中合适的位置引入 config.json 文件
   11. 在项目中生成新组件

   import { createIconSetFromFontello } from 'react-native-vector-icons';
   import fontelloConfig from './config.json';
   
   export default Icon = createIconSetFromFontello(fontelloConfig);
   
   

   11.在项目中需要使用 Icon 的位置直接引入该组件，通过如下代码显示 iconfont

   <Icon name={"register"} color={'#E5E5E5'} size={20}/>