React Native 与 Iconfont

项目中因为不想使用小图标，打算使用iconfont,所以本文只要记录在React Nativ如何配置

React Native版本：0.57

一、下载

先去下载IconFont图标，将其中的iconfont.css和iconfont.ttf复制到你的项目中，我放入的目录是appName/src/components/Icon

二、安装三方库

因为使用的typescript所以安装此版本
yarn add @types/react-native-vector-icons,

因为创建字体映射文件需要generate-icon-set-from-css,所以我也安装了普通版本yarn add react-native-vector-icons

三、创建字体映射文件 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;
const iconSet = generateIconSetFromCss(cssDir + '/iconfont.css', 'icon-');

fs.writeFileSync(cssDir + '/iconfont.json', iconSet);

此文件主要用于创建字体映射文件，代码中的路径__dirname就是当前这个文件create-iconfont-json.js的路径，所以创建的iconfont.css也会生成在当前目录，创建完成后，文件格式大致为如下

{
  "glass": 61440,
  "music": 61441,
  "search": 61442,
  "envelope-o": 61443,
  "heart": 61444,
  "star": 61445,
  "star-o": 61446,
  "user": 61447,
  //等等...
}

四、创建脚本文件 copy-font.sh，

此文件作用是，运行create-iconfont-json.js文件，生成iconfont.json,同时把第一步保存的iconfont.ttf复制到node_modules/react-native-vector-icons/Fonts/目录

# 先生成json文件
node create-iconfont-json.js
# 当前文件路径
pwd
# 包自带的字体10几套，占空间，如果你需要那些字体库，把下面这行注释
rm -rf ../../../../node_modules/react-native-vector-icons/Fonts/*
# 复制iconfont字体文件至react-native-vector-icons/Fonts目录
cp -f ./iconfont.ttf ../../../../node_modules/react-native-vector-icons/Fonts/
# 链接到android和ios
cd ../../../../
react-native link react-native-vector-icons

文件中的../../../../node_modules/react-native-vector-icons/Fonts/路径，需要根据项目中此文件的位置来确定,运行copy-font.sh文件，pwd会输出当前路径，再确定路径

运行：
sh copy-font.sh

windows下运行sh命令，如果有git，可以使用git bash，我使用的是cmder 并注册到右键菜单

五、创建Iconfont组件

import React, { Component } from 'react'
import { createIconSet } from 'react-native-vector-icons'
const json = require('./iconfont.json')
const Icon: any = createIconSet(json, 'iconfont', 'iconfont.ttf')

export default class IconFont extends Component {
  constructor (props: any) {
    super(props)
  }
  public state = {

  }
  render() {
    return (
        
    );
  }
}

为了方便管理，此文件在AppName/src/components/Icon中

六、调用

import IconFont from './components/Icon/IconFont'

项目地址