本文主要討論如何在 React Native 中快捷配置 iconfont - 自定義字體文件。

工具類庫及網(wǎng)站索引：

• react-native-vector-icons
• fontello
• iconfont - 阿里巴巴矢量圖圖標(biāo)

最終效果

簡單的設(shè)置 Icon 組件的 name, color, size 屬性來顯示自定義的 iconfont（支持 react native vector icons 所有屬性）。

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

配置過程

1. 安裝 react native vector icons

   1. 運(yùn)行
      $ npm install react-native-vector-icons --save

   2. 如果你想使用庫中的默認(rèn)字體文件，則需要鏈接資源庫(可選)

      1. 自動鏈接：$ react-native link
      2. 手動鏈接：請參考 react-native-vector-icons 官方 github 中 Installation 部分有關(guān) iOS 和 Android 的內(nèi)容

   3. 重新運(yùn)行項(xiàng)目

   4. 測試是否安裝成功：在任一組件中引用 Icon 組件，并通過如下方法引用

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

2. 使用 iconfont-自定義字體

   1. 從 iconfont - 阿里巴巴矢量圖圖標(biāo) 中選擇喜歡的自定義字體，然后加入自己的項(xiàng)目中。

   2. 打包下載項(xiàng)目到本地

      
      
      download_to_local.jpeg

   3. 解壓項(xiàng)目文件，獲取項(xiàng)目內(nèi)容

      
      
      get_font_files.jpeg
   4. 打開 fontello 網(wǎng)站 拖拽上圖文件夾中的 svg 文件至頁面。

   5. 選中需要的自定義字體并打包下載

      
      
      download_web_font.jpeg
   6. 在下載解壓的文件夾中找到 config.json 文件和 font 文件夾下的 fontello.ttf 文件

   7. 打開 xcode，將 fontello.ttf 文件拖入 RN 項(xiàng)目的 Resource 文件夾，注意必須勾選 ‘Create groups’ 和 ‘Add to targets’ 選項(xiàng)

      
      
      import_ttf_to_xcode.jpeg

   8. 在 xcode 點(diǎn)擊項(xiàng)目名，再點(diǎn)擊 Info tab, 手動添加相應(yīng)字段

      
      
      link_ttffile.jpeg
   9. Android 平臺中只需將 fontello.ttf 文件放入 android/app/src/main/assets/fonts 文件夾即可
   10. 在 RN 項(xiàng)目中合適的位置引入 config.json 文件
   11. 在項(xiàng)目中生成新組件

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

   11.在項(xiàng)目中需要使用 Icon 的位置直接引入該組件，通過如下代碼顯示 iconfont

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