React Native 使用精美图标库react-native-vector-icons

一、安装依赖

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={} color={tintColor} /> <MaterialCommunityIcons name={'face'} size={} color={tintColor} />

使用说明:
react-native-vector-icons 的图标分为几个模块, 使用的时候先import FontAwesome from 'react-native-vector-icons/FontAwesome';

这样才能使用 FontAwesome 标签, 标签内使用 name 字段指定是某个图标.

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

本博客地址: wukong1688

本文原文地址:https://www.cnblogs.com/wukong1688/p/10860490.html

转载请著名出处!谢谢~~

[RN] React Native 使用精美图标库react-native-vector-icons的更多相关文章

  1. [RN] React Native 使用 阿里巴巴 矢量图标库 iconfont

    React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 ...

  2. [RN] React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题

    React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题 解决方法: 添加 size,  line-height ,值为和 height 一样的高度. 例如: ...

  3. 【RN - 基础】之Windows下搭建React Native开发环境

    前言 React Native由Facebook公司于2015年F8大会上开源,其主张“Learn once, write everywhere”.React Native的核心设计理念是:既拥有Na ...

  4. React Native是一套使用 React 构建 Native app 的编程框架

    React Native是一套使用 React 构建 Native app 的编程框架 React Native at first sight what is React Native? 跟据官方的描 ...

  5. 【学而思】利用shouldComponentUpdate钩子函数优化react性能以及引入immutable库的必要性

    凡是参阅过react官方英文文档的童鞋大体上都能知道对于一个组件来说,其state的改变(调用this.setState()方法)以及从父组件接受的props发生变化时,会导致组件重渲染,正所谓&qu ...

  6. 【react】利用prop-types第三方库对组件的props中的变量进行类型检测

    1.引言--JavaScript就是一个熊孩子   1.1对于JSer们来说,js是自由的,但同时又有许多让人烦恼的地方.javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java ...

  7. 【react】利用shouldComponentUpdate钩子函数优化react性能以及引入immutable库的必要性

    凡是参阅过react官方英文文档的童鞋大体上都能知道对于一个组件来说,其state的改变(调用this.setState()方法)以及从父组件接受的props发生变化时,会导致组件重渲染,正所谓&qu ...

  8. JavaScript库 — — React

    React不支持IE6.IE7 React是什么?用于构建用户界面的JAVASCRIPT库,是MVC中的V(视图). React特点:1. 声明式设计2. 减少与DOM的交互,高效3. JSX - J ...

  9. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

随机推荐

  1. C#调用 kernel32.dll

    调用方法: private string mFileName; //INI文件名 public OneGanttINI(string pFileName) { this.mFileName = App ...

  2. 理解 Kubernetes 的亲和性调度

    这次给大家介绍下k8s的亲和性调度:nodeSelector.nodeAffinity.podAffinity.Taints以及Tolerations用法. 一般情况下我们部署的 POD 是通过集群自 ...

  3. Linux中Crontab的使用

    一.安装依赖 yum install cronie 二.添加 Crontab crontab -e 三.查看crontab内容 crontab -l 其中常见的一些内容 例子: # 每月的最后1天 0 ...

  4. 第一章 Maven 安装配置

    Maven基于(POM)项目对象模型,通过一小段描述信息来管理项目的构建.文档.和报告的项目管理软件,类似于php 的管理构建工具composer. 有关详细的Maven学习,可以参考学习https: ...

  5. drf--ModelSerializers序列化

    目录 drf--ModelSerializers序列化 项目准备 配置 settings.py 路由 多表设计 表关系分析 创建models 模型序列化 自定义模型序列化 api/serializer ...

  6. js高频经典面试题总结

    类型转换问题 console.log(null>=0); console.log(null<=0); console.log(null==0); console.log(undefined ...

  7. 记录下登录Xcode 时出现 please sign in with an app-specific....

    今天做到准备提交到APP store时,要用xcode提交,在xcode->open developer tool->application loader时,要登录自己的ID,我登录时输入 ...

  8. 使 WIN 10进入休眠、睡眠、关机的命令

    1.用命令控制定时关机,重启,休眠等 休眠:rundll32.exe powrProf.dll,SetSuspendState 休眠:shutdown -h 睡眠:rundll32.exe powrp ...

  9. Kafka Streams开发入门(2)

    背景 上一篇我们介绍了Kafka Streams中的消息转换操作map,今天我们给出另一个经典的转换操作filter的用法.依然是结合一个具体的实例展开介绍. 演示功能说明 本篇演示filter用法, ...

  10. 你与BAT只差这一套面试题

    1.Linux如何挂载windows下的共享目录?mount.cifs //IP地址/server /mnt/server -o user=administrator,password=123456l ...