在React-Native項目中輕鬆使用iconfont自定義圖標（不用安裝react-native-vector-icons）

在開發React-Native項目的時候，爲了解決圖標等一系列問題，每每須要從iconfont中引入圖標。爲了達到這個目的，網上教程大多都須要額外安裝 react-native-vector-icons這個庫，而後還須要link，不只費時，還增長了打包後應用程序的大小。偶爾看到其實只要利用React-Native中自帶的Text組件，簡單的幾行代碼就能夠輕鬆實如今項目中使用 iconfont中的圖標。

首先，在iconfont官網註冊好帳號，建立好相應的iconfont項目，而且把React-Native項目中所須要的圖標添加到iconfont項目當中：

第一步：建立好icon項目

第二步：在項目中添加好圖標，切換到Unicode模式，點擊下載至本地，解壓後打開目錄。而後分別將iconfont.ttf文件複製到React-Native項目中的ios目錄下和android/app/src/main/assets/font目錄下(若是沒有就須要建立好相應的目錄)，若是是iOS還須要打開xCode來配置好連接好字體文件方法以下

第四步，用xCode 打開iOS項目，而後右鍵選擇 "Add Files to "***"，選擇上面複製到ios目錄下的iconfont.ttf文件，直接點擊肯定。

第五步：選中info.plist文件，在右側添加"Fonts provided by application",而後再在其下添加key爲Item 0，value爲iconfont.ttf。這樣，iOS端的配置也所有完成了。

下面咱們再在React-Native項目中建立一個Icon組件，代碼以下：

import * as React from "react";
import { Text, StyleProp, TextStyle } from "react-native";

interface IconProps {
  style?: StyleProp<TextStyle>;
  value: string;
}

const Icon = (props: IconProps) => {
  return (
    <Text style={[props.style, { fontFamily: "iconfont" }]}>{props.value}</Text>
  );
};

export default Icon;  複製代碼

組件能夠傳入style和value兩個屬性， 其中Text的fontFamily默認爲iconfont， 這裏對應第一步截圖中的Font Family的值，而value值，則對應第二步截圖中Unicode模式下圖標的Unicode碼。

這樣咱們若是想在其餘組件中使用時只須要參考如下代碼便可：

import Icon from "../components/Icon";  //先引用定義的Icon組件
複製代碼

public render() {
    return (
      <View style={Styles.container}>
        <Icon style={{ color: "red", fontSize: 30 }} value={"\ue606"} />
        <Text>我是Page1</Text>
        <Button
          title="去頁面4"
          onPress={() => {
            this.props.navigation.navigate("Page4");
          }}
        />
      </View>
    );複製代碼

能夠直接給圖標設置大小和顏色，這樣是否是很方便呢！