ReactNative 使用矢量图标 react-native-vector-icons

一、概述

    矢量图标的好处是：可以自定义图标大小，颜色，这样解决了指定死图标的灵活性。但是跨平台应用开发中，ReactNative不像Ionic那样自带矢量图标，针对这问题，引出RN插件 react-native-vector-icons。

    GitHub地址：https://github.com/oblador/react-native-vector-icons

    废话不多说开始配置。

二、安装

    2.1 插件安装

        $ yarn add react-native-vector-icons (或者：$ npm install react-native-vector-icons --save)

        $react-native link react-native-vector-icons

    2.2 IOS 的配置

        2.2.1 拖拽路径 node_modules/react-native-vector-icons/Fonts 文件夹到Xcode项目中（拖拽后的结果如图：2.2.1）

图 2.2.1 拖拽文档

        2.2.2 检查Info.plist中是否存在添加的Font列表（图2.2.2）

图 2.2.2 确定文件

        至此，IOS的配置完成。

    2.3 Android的配置

        其实不需要操作太多，当你安装插件的时候就已经给你添加进去了。前往图2.3路径中确定是否存在font文件。

图 2.3

三、使用教程

    介绍

        当你 https://oblador.github.io/react-native-vector-icons/ 打开该路径时，搜索相应的图标会出现对应的名字，图3.1.1

图 3.1.1

       然后导入你需要使用图标的名字（此处以FontAwesome）为例

          import FontAwesome from 'react-native-vector-icons/FontAwesome';

       开始使用

<View style={{marginTop:10}}>
    <FontAwesome.Button name="facebook" backgroundColor="#3b5998">
        <Text style={{fontFamily: 'Arial', fontSize: 15}}>Login with Facebook</Text>
    </FontAwesome.Button>

    <FontAwesome name='user-circle-o' size={20}/>

    <FontAwesome name='user' size={20} color={'#00ff00'}/>

    <FontAwesome name="rocket" size={30} color="#900" />

    <Text>图标展示<FontAwesome name={'facebook'} color={'red'} size={20}/></Text>
</View>

       效果展示（图3.1.2）

图 3.1.2

    组件介绍：

            Icon 组件（FontAwesome相当于Icon）

                    属性

                    样式

           

     Icon.Button 组件（FontAwesome.Button）

四、写在后面的话

    对于学习ReactNative，我想说其功能行还是挺强大的。随着框架的完善和第三方插件的完善，我相信会越走越好。欢迎大家进入讨论群：597910835。共同学习共同成长。