[RN] React Native 使用精美图标库react-native-vector-icons
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的更多相关文章
- [RN] React Native 使用 阿里巴巴 矢量图标库 iconfont
React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 ...
- [RN] React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题
React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题 解决方法: 添加 size, line-height ,值为和 height 一样的高度. 例如: ...
- 【RN - 基础】之Windows下搭建React Native开发环境
前言 React Native由Facebook公司于2015年F8大会上开源,其主张“Learn once, write everywhere”.React Native的核心设计理念是:既拥有Na ...
- React Native是一套使用 React 构建 Native app 的编程框架
React Native是一套使用 React 构建 Native app 的编程框架 React Native at first sight what is React Native? 跟据官方的描 ...
- 【学而思】利用shouldComponentUpdate钩子函数优化react性能以及引入immutable库的必要性
凡是参阅过react官方英文文档的童鞋大体上都能知道对于一个组件来说,其state的改变(调用this.setState()方法)以及从父组件接受的props发生变化时,会导致组件重渲染,正所谓&qu ...
- 【react】利用prop-types第三方库对组件的props中的变量进行类型检测
1.引言--JavaScript就是一个熊孩子 1.1对于JSer们来说,js是自由的,但同时又有许多让人烦恼的地方.javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java ...
- 【react】利用shouldComponentUpdate钩子函数优化react性能以及引入immutable库的必要性
凡是参阅过react官方英文文档的童鞋大体上都能知道对于一个组件来说,其state的改变(调用this.setState()方法)以及从父组件接受的props发生变化时,会导致组件重渲染,正所谓&qu ...
- JavaScript库 — — React
React不支持IE6.IE7 React是什么?用于构建用户界面的JAVASCRIPT库,是MVC中的V(视图). React特点:1. 声明式设计2. 减少与DOM的交互,高效3. JSX - J ...
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
随机推荐
- Oracle排序(中文)
一.中文排序 1. 按照笔划排序 select * from dept order by nlssort(name,'NLS_SORT=SCHINESE_STROKE_M'); ...
- kylin Build过程问题排查:17 Step Name: Build Cube In-Mem
Kylin Build执行到底17步时报错:17 Step Name: Build Cube In-Mem ,错误截图如下: 点左下角的MRJob图标,打开查看错误信息: 从MRJob中的描述中可见 ...
- JavaScript 获取页面元素
一.根据 id 获取元素 语法格式: document.getElementById(id); Demo: var main = document.getElementById('main'); co ...
- Java JDBC结果集的处理
结果集指针的移动 while (resultSet.next()){ //...... } 指针最初指向第一条记录之前,next()是指向下一个位置,返回的是boolean值,true表示有内容(记录 ...
- BootStrap简单table
效果图: 代码如下: <%-- Created by IntelliJ IDEA. User: 冷噫雪 Date: 2019/9/1 Time: 13:06 To change this tem ...
- vue 子组件 $emit方法 调用父组件方法
$emit方法 父组件 <template> <div> <child @callFather="activeSon"></child&g ...
- .Net core 使用swagger进行Api管理
上次我们讲过如何在swagger上隐藏接口,众所周知,swagger是一个强大的api文档工具,可以帮助我们记录文档并且测试接口,也是一个可视化操作接口的工具. 那么如果我们写的接口非常多的时候怎么办 ...
- prometheus学习系列二: Prometheus安装
下载 在prometheus的官网的download页面,可以找到prometheus的下载二进制包. [root@node00 src]# cd /usr/src/ [root@node00 src ...
- FFmpeg Windows下安装与测试
FFmpeg 简介 FFmpeg的名称来自MPEG视频编码标准,前面的"FF"代表"Fast Forward",FFmpeg是一套可以用来记录.转换数字音频.视 ...
- SCP免密传输和SSH登录流程详解
SCP免密传输和SSH登录协议详解 在linux下开发时,经常需要登录到其他的设备上,例如虚拟机内ubuntu.树莓派等等,经常涉及到传输文件的操作,传输文件有很多中方法,如物理磁盘拷贝,基于网络的s ...