在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>
    );复制代码

能够直接给图标设置大小和颜色，这样是否是很方便呢！