react-native 引用图标方式

web端使用图标很方便, 尤其吸管字体图标, 大小,颜色等都可以使用font相关css进行更改,
RN中刚开始感觉蛮麻烦的,这里引用下前端历险记中RN总结总的一些方法

1: 图标的Base64

• 将Iconfinder中图标的Base64编码值定义为变量，在使用地方的uri值指定为该变量。该网站上比较容易找到配套图标，就是点击和未点击配套的图标，但是不能改变图标颜色。

  • 使用时: 在iconfinder图标网复制中的一些可用的图片的Base64字符串, 并在自己icon.js中赋值变量,
    如下图:
    

    icon目录下的 Icon.js

  • 在需要的文件中引用Icon.js

  引用Icon.js
  • 在需要的文件中引用 (antd - Mobile组件TabBar)

antd - Mobile组件TabBar

• 使用FontAwesome，配置方式详见react-native-vector-icons。使用该图标可通过style指定图标样式，包括颜色，但要找配套的图标比较困难。注意FontAwesome中描述<i class="fa fa-user" aria-hidden="true"></i>
  使用图标，这应该是移动Web的使用方式，在React Native中使用如下。

    import Icon from 'react-native-vector-icons/FontAwesome';
    ......
    <Icon name="user" size={20} style={styles.icon} />