引言
在此之前已經有很多前輩分享自定義圖示的經驗,在這裡我分享一種個人覺得比較優雅的使用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…