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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/j550341130/article/details/81205701

此篇仅说明如何使用, 具体集成过程请看下面的文章, 感谢分享:
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 很多句, 对于强迫症来说是个恶心的地方, 如果有知道其他形式的麻烦告知下…

猜你喜欢

转载自blog.csdn.net/j550341130/article/details/81205701