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';<FontAwesomename={'wpforms'}size={30}color={tintColor}/><MaterialCommunityIconsname={'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 很多句, 对于强迫症来说是个恶心的地方, 如果有知道其他形式的麻烦告知下…

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

[RN] React Native 使用精美图标库react-native-vector-icons
React Native 使用精美图标库react-native-vector-icons 一.安装依赖 npm install --save react-native-vector-icons // ...
React-Native（五）：React Native之Text学习
本章节主要学习Text的布局,仿照网易新网: 代码: 1 /** 2 * Sample React Native App 3 * https://github.com/facebook/react-n ...
reactnative 获取定位_【React Native】定位获取经纬度，当前城市等地址信息
最近做React Native时,需要用到城市定位的功能,React Native中文网的定位部分中也提供了相应的方法.主要用到的方法有: 这里只需要获取到经纬度,城市等信息,持续监听的函数就不需要了 ...
【React Native】react-navigation导航使用方法
目录集成react-navigation 使用react-navigation 上一篇介绍了如何在已有iOS项目中集成React Native.这一篇我们把上一篇的demo做下拓展,添加点击电影跳转 ...
vscode 连接夜神模拟器运行 react native项目 (很简单的方法)
前言:我这种方式不需要过多配置,只是需要先启动Android studio ,之后再启动vsCode 准备阶段:下载夜神模拟器 1. 开启夜神服务进入到夜神安装的bin目录下,执行 nox_adb. ...
reactnative 获取定位_[RN] React Native 获取地理位置
import React, {Component} from 'react'; import {StyleSheet, Text, View}from 'react-native'; exportde ...
mobx在react中应用_借助React Native Elements，Jest和MobX MST可以轻松实现现实世界中的ReactNative应用...
mobx在react中应用 by Qaiser Abbas 由Qaiser Abbas 借助React Native Elements,Jest和MobX MST可以轻松实现现实世界中的ReactNa ...
准备发布React Native应用？
你可能已经完成了React Native应用的开发,马上就准备发布出去了.那你还需要为发布app准备什么吗?我指的不是诸如"确保测试通过"或"多做几遍smoke test ...
React Native 入门踩坑
开发环境搭建及环境变量配置开发rn第一步需要配置安卓环境 android studio下载地址: https://developer.android.google.cn/studio/archive ...

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

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

最新文章

热门文章