在 React Native 中快捷优雅使用 iconfont - 自定义字体文件

本文主要讨论如何在 React Native 中快捷配置 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}/>
    
    

推荐阅读更多精彩内容