React Native如何实现自定义字体

在做web端开发时用到了不少字体图标库，在web端设置字体图标很简单，就是用一个@font-face设置自定义字体，那么用react native开发安卓app时如何设置字体图标呢？
　

react-native-vector-icons

首先sreact native有一个字体图标库react-native-vector-icons，关于如何使用这个请参考github上的详细说明react-native-vector-icons

使用自定义的阿里矢量图标库

在使用react-native-vector-icons时发现有些需要的图标不符合我的要求，觉得还是自定义的图标库比较方便，阿里巴巴有个矢量图标库里面有很多好看的图标比较符合要求，那么如何使用这些呢？
1.首先在阿里的那个网站上选择好一批需要的图标，然后下载，解压后发现有如下文件

2.将这些字体文件复制粘贴到如下目录下：[project root]/android/app/src/main/assets/fonts/
3.然后我们自定义一个组件

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
} from 'react-native';

export class IconFont extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Text 
                style={[styles.icon, this.props.style]}
                onPress={this.props.onPress}   
            >
                {this.props.font}
            </Text>
        )
    }
}

const styles = StyleSheet.create({
    icon: {
        fontFamily:'iconfont',
        color: '#000',
    },
})

4.接下来使用这个组件展现自定义字体图标，查看demo_unicode.html中的相关图标的代码，然后引用

<IconFont
    font="&#xe7d8;" // 这是一个导航栏home的图标
    style={{fontSize: 26 }}
    onPress={() => alert("home") } 
/>

5.到这里所有工作基本上都做好了，最后就是重新react-native run-android跑一下
6.最后看一下效果