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. SpringBootSecurity学习(18)前后端分离版之 OAuth2.0 数据库(MyBatis)存储客户端

    使用Mybatis查询客户端信息 前面的例子使用了默认的jdbc配置来动态从数据库查询客户端信息,下面来改用更加灵活的mybatis来实现,改用mybatis,首先pom中换成mybatis的依赖: ...

  2. SQL Server中临时表是在什么schema下的(转载)

    Specifying schema for temporary tables 问: I'm used to seeing temporary tables created with just the ...

  3. 开源串口 Ymodem 上位机软件

    概述 上位机使用Qt开发,计划整合多个工具为一体,用作以后的调试工具. 当前完成功能: 1.串口调试 支持hex和ascii 码发送,接受. 支持自动添加回车换行. 支持定时发送,最短间隔100ms, ...

  4. php批量检查https证书有效期

    function get_cert_info($domain){ $context = stream_context_create(['ssl' => [ 'capture_peer_cert' ...

  5. 70.JS---利用原生js做手机端网页自适应解决方案rem布局

    利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...

  6. java 之 集合概述

    一.集合概述 不管是哪一种数据结构,其实本质上都是容器来着,就是用来装对象的.因此,我们就要搞清楚两点:(1)如何存储(2)存储特点 1.集合 集合是 Java 中提供的一种容器,可以用来存储多个数据 ...

  7. Float型 与 Double型数据的存储方式

    先来了解一下浮点数在计算机中是以什么形式存储的 首先要知道计算机能懂得只有0和1,每一个0和1都占一个位 bit (比特)(Binary Digits):存放一位二进制数,最小的存储单位. 而对于存放 ...

  8. Spring Boot加载application.properties配置文件顺序规则

    SpringApplication会从以下路径加载所有的application.properties文件: 1.file:./config/(当前目录下的config文件夹) 2.file:./(当前 ...

  9. Golang中文乱码问题

    在学习golang读取文件的过程中,遇到中文显示乱码的问题!golang没有自带的编解码包,因此需要借助第三方包 解决方法: 引入第三发转码包:git clone https://github.com ...

  10. 利用 AWS DMS 在线迁移 MongoDB 到 Amazon Aurora

    将数据从一种数据库迁移到另一种数据库通常都非常具有挑战性,特别是考虑到数据一致性.应用停机时间.以及源和目标数据库在设计上的差异性等因素.这个过程中,运维人员通常都希望借助于专门的数据迁移(复制)工具 ...