react-native優雅的使用iconfont字型圖示

引言

在此之前已經有很多前輩分享自定義圖示的經驗，在這裡我分享一種個人覺得比較優雅的使用icnfont字型圖示的方案。

一步一個腳印

專案目錄

• root
  • ...
  • android
  • font
  • App.js

安裝依賴

• 首先區域性安裝 react-native-vector-icons

  yarn add react-native-vector-icons
  react-native link react-native-vector-icons
  複製程式碼

• 全域性安裝 iconfont-to-json

  npm i iconfont-to-json -g
  複製程式碼

下載iconfont的字型

iconfont下載目錄

這裡我們只需要 iconfont.css 和 iconfont.ttf 兩個檔案

放置字型檔案

• 把 iconfont.ttf 拷貝到 /android/app/src/main/assets/fonts 目錄下
• 把 iconfont.css 拷貝到 /font 目錄下

生成字型map

在package.json新增程式碼

    ...
    "scripts": {
        ...
        "build:iconfont": "iconfonttojson ./font/iconfont.css"
    }
    ...
複製程式碼

執行 npm run build:iconfont 就會在字型目錄生成 iconfont.js

這裡的key對應字型名稱

export default {
  "icon-bqxin": 59019,
  "icon-sousuo-copy": 58923,
  "icon-pinglun": 58938,
  "icon-jia": 58930,
  "icon-camera_icon": 58967,
  "icon-tiaoguofenxiang": 59260
}
複製程式碼

在字型目錄新建 index.js 丟擲自定義字型元件

/font/index.js

import { createIconSet } from 'react-native-vector-icons'

import fontJson from './iconfont'

export const Iconfont = createIconSet(fontJson, 'Iconfont', 'iconfont.ttf');
複製程式碼

使用

/App.js

import React, {Component} from 'react';
import {View} from 'react-native';
import { Iconfont } from "./font/index";

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      }}>
        <Iconfont name="icon-bqxin" size={68} color="#E00"></Iconfont>
      </View>
    );
  }
}

複製程式碼

效果

demo github: github.com/verydog/dem…