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. 递归求兔子数列第n项的值

    #include <iostream> using namespace std; int f(int n)//递归f数列的第n项 { ,y=,z; ||n==) { ; } else { ...

  2. 解决WPF下popup不随着window一起移动的问题

    /// <summary> /// Popup帮助类,解决Popup设置StayOpen="True"时,移动窗体或者改变窗体大小时,Popup不随窗体移动的问题 // ...

  3. drf序列化与反序列化

    序列化器-Serializer 定义序列化器 Django REST framework中的Serializer使用类来定义,须继承自rest_framework.serializers.Serial ...

  4. kylin Build过程问题排查:17 Step Name: Build Cube In-Mem

    Kylin Build执行到底17步时报错:17 Step Name: Build Cube In-Mem  ,错误截图如下: 点左下角的MRJob图标,打开查看错误信息: 从MRJob中的描述中可见 ...

  5. vue中进行窗口变化的监听

    今天vue项目中用到的元素的宽度依赖与窗口的宽度,所以在进行宽度设置的时候涉及到窗口的变化,因为元素的宽度要随着窗口变化 分成几个步骤来实现这一过程 1.首先元素的宽度依赖与窗口的宽度,就需要有接受窗 ...

  6. Swaks绕过SPF验证进行邮件伪造

    0x00 swaks简介 Swaks是一个功能强大,灵活,可编写脚本,面向事务的SMTP测试工具,由John Jetmore编写和维护. 目前Swaks托管在私有svn存储库中.官方项目页面是http ...

  7. adb shell get/setprop, setenforce...

    adb shell getprop <key> 获取设备参数信息adb shell setprop <key> <value> 设置设备参数信息 例子1:>C ...

  8. js检测页面触底

    <script> function getDocumentTop() { var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = ...

  9. TCP 协议简介-阮一峰(转载)

      TCP 协议简介 作者: 阮一峰 日期: 2017年6月 8日 TCP 是互联网核心协议之一,本文介绍它的基础知识. 一.TCP 协议的作用 互联网由一整套协议构成.TCP 只是其中的一层,有着自 ...

  10. Springboot 2.1.1.RELEASE 版本 session保存到MySQL里面

    1,pom.xml添加依赖: <!-- 数据库session管理 --> <dependency> <groupId>org.springframework.ses ...