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. 总结:WPF中MultiBinding多值绑定的方法

    原文:总结:WPF中MultiBinding多值绑定的方法 一.Xaml中绑定代码: <TextBlock  Grid.Row="5" Grid.Column="3 ...

  2. laravel中hasOne、HasMany、belongsTo、belongsToMany的ORM方法

    在laravel5.4框架中,使用ORM关联方法,一对一,一对多 一对一关系,代码: user表为主表,需要向下找关联表的字段用hasOne video表为关联表,需要向上找关联表的字段用belong ...

  3. wangeditor视频

    wangeditor网址http://www.wangeditor.com/ 目前使用的是3.11版本 使用步骤 1.引用wangEditor.min.js 2.代码 2.1 取得函数var E = ...

  4. ssh tunneling应用案例-AWS EC2 vnc图形化桌面的支持

    一般地,无论是AWS EC2还是阿里云的云主机,linux系统默认都只提供ssh登录方式.如果你是一个技术控,非常希望把图形化界面给折腾出来,这其中就不需有vnc server的支持,除此之外,还涉及 ...

  5. 2019-08-01 jquery中常用方法

    1.attr()方法设置或返回被选元素的属性值 <html> <meta charset="utf-8"/> <head><title&g ...

  6. Java 初识

    一.Java 简介 1.什么是 Java Java 语言是美国 Sun 公司(Stanford University Network),在1995年推出的高级的编程语言,所谓编程语言,是计算机的语言, ...

  7. JS工程师的成长路径

    JS 说起来必须是一个神器,这个当年10天内被开发出来的神器,以一种谁也想象不到的速度快速发展,它击败了Java Applet,逼死Flash,当Android和IOS看似一统全球的时候,JS慢条斯理 ...

  8. Java深入学习(3):线程池原理

    线程池的特点: 降低资源:通过重复利用已创建的线程降低线程创建和销毁的损耗 提高效率:当任务到底时,不需要等待,立即执行 方便管理:统一分配,调优和监控等 线程池的创建方式: 1.CachedThre ...

  9. NumPy 之 面向数组编程

    import numpy as np Using NumPy arrays enables you to express many kinds of data processing tasks as ...

  10. Java开发环境之Git

    查看更多Java开发环境配置,请点击<Java开发环境配置大全> 拾叁章:Git安装教程 1)去官网下载Git安装包 https://gitforwindows.org/ 2)安装 双击执 ...