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. Java的常用API之Date类简介

    Data类 java.util.Date:表示日期和时间的类类Date 表示特定的瞬间,精确到毫秒.毫秒:千分之一秒 1000毫秒=1秒 把日期转换成毫秒: 当前的日期:2019-07-18 时间原点 ...

  2. SpringCloud分布式架构权限管理

    概述 本文讨论分布式架构权限管理的两种情况,一种是针对统一授权访问的,一种是跨平台接口访问的. 虽然分布式架构会做业务的切割,将整体的业务切割为独立的子业务或者子平台,但是同一平台下往往会有统一的授权 ...

  3. 基准测试工具:Wrk初识

    最近和同事聊起常用的一些压测工具,谈到了Apache ab.阿里云的PTS.Jmeter.Locust以及wrk各自的一些优缺点和适用的场景类型. 这篇博客,简单介绍下HTTP基准测试工具wrk的基本 ...

  4. CXF 教程 (二)

    将 Service 布署在远端 1 Overview 2 Server 3 Client 1 Overview 上例中我们的 Server 和 Client 都是在本地.下面演示如果布署在远端需如何修 ...

  5. keras学习入门一

    基本概念 1. 张量 tensor 所有的数据类型都可以看成是张量,可以看成是向量,矩阵在推广 张量的阶,有时候也叫维度,或是轴(axis) 0阶张量如 [] ,5 也叫做标量 1阶张量 如 [ 1, ...

  6. 下载安装Tomcat教程

    注:由于我的笔记不知怎么滴不能复制粘贴我就直接贴图了

  7. ECharts堆叠柱状图label显示总和

    Echarts本身没提供现成的解决方案. option = { title: { text: '分类销量' }, legend: { y: "bottom", data: ['百货 ...

  8. javascript:void(0)的含义

    void关键字介绍 首先,void关键字是javascript当中非常重要的关键字,该操作符指定要计算或运行一个表达式,但是不返回值. 语法格式: void func() void(func()) 实 ...

  9. CSS 多列布局

    CSS3 新增多列布局适合排版很长的文字内容,让其多列显示. 一.多列布局 语法格式: columns:column-width | column-count; column-width:定义每列的宽 ...

  10. Cheat Engine 特征码

    打开游戏 引用自动注入 搜索特征码 特征码,是游戏运行中,唯一的汇编代码 验证,特征码是游戏中唯一代码 添加特征码 添加特征码,以及金钱只增不减代码 进行激活测试 特征码,只有在游戏过程中才会执行到 ...