国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

在react-native中添加高可維護的iconfont字體

CarterLi / 3633人閱讀

摘要：沒關(guān)系，筆者已經(jīng)為你們準備好了，請保存到文件中，假設(shè)你的文件名叫和你剛才保存的字體文件在一起，方便管理復(fù)制字體這個插件包有好多套字體，我們可以需要把自己的也復(fù)制到包中對應(yīng)文件夾，當(dāng)然了，不可能手動復(fù)制，筆者從來都是解放雙手的。

字體圖標盛行的年代，在項目里使用一套不失真又可以隨意改變大小顏色的圖標，是多么舒服的一件事。這里要推薦iconfont.cn，超多免費圖標，當(dāng)然了，你的專屬美工也可以自己建個項目并上傳自己的字體圖標。

但是有一件很悲傷的事情，iconfont字體，在RN中不能像web端一樣直接使用。所以有了下面的教程（福利：比一般教程都精簡，筆者用shell腳本替你手動處理了很多事情）

1、下載

假設(shè)你已經(jīng)在iconfont網(wǎng)站建好項目，那么進入項目頁面，點擊下載按鈕

下載完之后，解壓，將其中的iconfont.css和iconfont.ttf復(fù)制到你的項目中，假設(shè)你是放到項目根目錄的static/目錄下面。

2、安裝插件

想了解細節(jié)的點擊傳送門

npm install react-native-vector-icons --save
3、JSON映射

研究源碼你會發(fā)現(xiàn)，每套字體都會附上一個json文件，就是名稱和位置之間的關(guān)系。而iconfont是沒有提供json文件的。沒關(guān)系，筆者已經(jīng)為你們準備好了，請保存到文件中，假設(shè)你的文件名叫create-iconfont-json.js

const fs = require("fs");
const generateIconSetFromCss = require("react-native-vector-icons/lib/generate-icon-set-from-css");
// 和你剛才保存的iconfont字體文件在一起，方便管理
const cssDir = __dirname + "/static/";
const iconSet = generateIconSetFromCss(cssDir + "iconfont.css", "icon-");

fs.writeFileSync(cssDir + "iconfont.json", iconSet);
4、復(fù)制字體

這個插件包有好多套字體，我們可以需要把自己的iconfont也復(fù)制到包中對應(yīng)文件夾，當(dāng)然了，不可能手動復(fù)制，筆者從來都是解放雙手的。
給大家準備了一個shell腳本，你需要保存到根目錄，假設(shè)你命名為copy-font.sh

# 先生成json文件
node create-iconfont-json.js

# 包自帶的字體10幾套，占空間，如果你需要那些字體庫，把下面這行注釋
rm -rf node_modules/react-native-vector-icons/Fonts/*
cp -f static/iconfont.ttf node_modules/react-native-vector-icons/Fonts/

# 鏈接到android和ios
react-native link react-native-vector-icons

然后執(zhí)行

sh copy-font.sh

此時，你看看static/目錄下面，應(yīng)該多出了一個iconfont.json了，這個文件后面有用。

5、創(chuàng)建react組件

這個才是你最終需要用到的東西，保存到文件中，假設(shè)你保存到文件 src/components/IconFont.js

import createIconSet from "react-native-vector-icons/lib/create-icon-set";
import json from "../../static/iconfont.json";
const Icon = createIconSet(json, "iconfont", "iconfont.ttf");

// export {Icon};
// export default Icon;

export class IconFont extends Icon {
  static defaultProps = Object.assign({}, Icon.defaultProps, {
    size: 18,
  });
}

你也可以直接export default Icon，它本身也是component，接下來你就可以像react正常組件一樣使用它。

import React, {Component} from "react";
import {View} from "react-native";
import {IconFont} from "./IconFont.js"

export class Test extends Component {
    render() {
      return ;
    }
}

更多用法請移步：github上的介紹，這邊只是拋磚引玉

維護

用腳本維護就是舒服，如果你的字體有變更，那么重復(fù)第一步的下載，接著執(zhí)行sh copy-font.sh，就完事了。

可以把執(zhí)行命令放到npm start 中，這樣對于自己和團隊，都是無縫更新的。然后你就可以大膽的把iconfont.json放進.gitignore了

說明

使用這套方案，字體圖標原先的色彩會被覆蓋，意思就是你的圖標只能有單色。如果要用多色，你需要使用另一個插件（傳送門），缺點就是一個圖標需要提供一個svg文件。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/107984.html

相關(guān)文章

  • 在 React Native 使用阿里 iconfont 圖標

    摘要：熟悉前端開發(fā)的大家都一定知道，在網(wǎng)站下載圖標集，會自帶教程告訴你如何在網(wǎng)頁使用。但是在中，跟網(wǎng)頁使用的步驟就不同了。 熟悉前端開發(fā)的大家都一定知道 iconfont.cn，在網(wǎng)站下載圖標集，會自帶教程告訴你如何在網(wǎng)頁使用 iconfont。但是在 React Native 中，跟網(wǎng)頁使用的步驟就不同了。我最開始百度出來的文章，不少都推薦借用 react-native-vector-ic...

    young.li 評論0 收藏0

  • 像打字一樣插入圖標-iconfont

    摘要：簡介是什么就像名字一樣，就是圖標字體，像雅黑字體，思源字體一樣，這種字體就是由圖標構(gòu)成有何優(yōu)勢輕量性一個圖標字體比一系列的圖像特別是在屏中使用雙倍圖像要小。問題很小創(chuàng)作自已的字體圖標很費時間，重構(gòu)人員后期維護的成本偏高。 簡介 - iconfont是什么？ 就像名字一樣，iconfont就是圖標字體，像雅黑字體，思源字體一樣，這種字體就是由圖標構(gòu)成~ - 有何優(yōu)勢？ 1、輕量性：一個圖...

    warkiz 評論0 收藏0

  • iconfont實踐小結(jié)

    摘要：所以實現(xiàn)小圖標時雪碧圖跟圖標字體會在一個網(wǎng)站共存，自定義圖標字體為什么比較耗時，且太復(fù)雜圖標無法實現(xiàn)請往下看開發(fā)流程就了解了。參考資料細談淺談圖標字體向下兼容優(yōu)雅降級技術(shù)繪制小圖標技巧雪碧圖圖標字體矢量小圖標設(shè)計本文對應(yīng)源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關(guān)于雪碧圖的博文，...

    bitkylin 評論0 收藏0

  • svgtofont.js 自動生成圖標字體和彩色圖標文件

    摘要：使用說明圖標字體只能被渲染成單色，不能生成彩色圖標。自動生成預(yù)覽網(wǎng)站，預(yù)覽字體文件。創(chuàng)建最大輸入圖標寬度的等寬字體。輸出的字體高度默認為最高輸入圖標的高度。自動生成樣式和。 一般情況我通過 iconfont 或者 icomoon 來實現(xiàn)圖標管理生成字體，導(dǎo)入到項目中使用。 ┌────────┐ ┌────────────...

    objc94 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<