ReactNative使用精美图标库react-native-vector-icons(具体使用方法)

此篇仅说明如何使用, 具体集成过程请看下面的文章, 感谢分享:
https://blog.csdn.net/f409031mn/article/details/79522129

github上存放了一份Demo:
https://github.com/YouCii/RNDemo


我自己配置时执行了安装/关联两句命令就可以执行了, 没有其他的错误

npm install --save react-native-vector-icons // 下载库
react-native link react-native-vector-icons // 自动关联

具体使用时请按照以下形式:

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

<FontAwesome
     name={'wpforms'}
     size={30}
     color={tintColor}
 />
 <MaterialCommunityIcons
     name={'face'}
     size={30}
     color={tintColor}
 />         

解释一下为什么要这么用.
react-native-vector-icons 的图标分为几个模块, 使用的时候先import FontAwesome from 'react-native-vector-icons/FontAwesome'; 这样才能使用 FontAwesome 标签, 标签内使用 name 字段指定是某个图标.

使用的时候可以使用这个网站找到所有图标的索引:
https://oblador.github.io/react-native-vector-icons/


个人感觉这种使用形式还是有很大的不方便, 每个部分需要单独导入, 所以如果用到的图标遍布多个部分的话就需要 import 很多句, 对于强迫症来说是个恶心的地方, 如果有知道其他形式的麻烦告知下…

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值