安装链接

yarn add react-native-vector-icons

react-native link react-native-vector-icons

在项目工程中打开 .xcodeproj 文件 添加 fonts文件夹

安卓上我没配置 试了下 貌似可以的,具体有那些图标能用 目前还在试用中

import Icon from 'react-native-vector-icons/FontAwesome';

<Icon.Button  //在图片后加, 自定义样式的文字
name="facebook"
backgroundColor="#3b5998">
<Text style={{fontFamily: 'Arial', fontSize: }}>Login with Facebook</Text>
</Icon.Button>

先试试这个看配置成功没

https://www.npmjs.com/package/react-native-vector-icons  这里面有 说明 内置了那些图标,可以点进去查看

有上面几个,在使用的时候 是分别引入的,就是你想使用这里面那个库 你就引入 这个模块

import Icon from 'react-native-vector-icons/FontAwesome';

或者

import Icon from 'react-native-vector-icons/Feather';

等等,看自己想用那个库

react-native-vector-icons 图标库使用的更多相关文章

  1. [RN] React Native 使用精美图标库react-native-vector-icons

    React Native 使用精美图标库react-native-vector-icons 一.安装依赖 npm install --save react-native-vector-icons // ...

  2. React Native如何添加自定义图标

    iOS 1.通过xcode将'xxx.ttf'文件引入项目,如图: 2.在node_modules/react-native-vector-icons下新建Icomoon.js文件,复制一份Icomo ...

  3. [RN] React Native 使用 react-native-vector-icons 图标显示问号

    我在第一次使用 react-native-vector-icons 时图标显示问号 后来在网上查了很多文章,发现原因有两个 1)安装完 react-native-vector-icons 后,没有li ...

  4. [RN] React Native 使用 阿里巴巴 矢量图标库 iconfont

    React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 ...

  5. beeshell —— 开源的 React Native 组件库

    介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...

  6. React Native(七)——react-native-elements

    配合React native使用的UI库:https://react-native-training.github.io/react-native-elements/ 1. 新建项目:http://w ...

  7. Airbub 弃用React Native

    弃用 React Native ? 最近的技术圈尤为热闹,Google 发布了首个 Flutter 预览版.Vue.js 在 GitHub 上的 star 数量超过了 React.js,而如今全球著名 ...

  8. 【React Native】在网页中打开Android应用程序

    React Native官方提供Linking库用于调起其他app或者本机应用.Linking的主要属性和方法有: 属性与方法 canOpenURL(url); 判断设备上是否有已经安装相应应用或可以 ...

  9. [RN] React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题

    React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题 解决方法: 添加 size,  line-height ,值为和 height 一样的高度. 例如: ...

  10. 基于React Native的Material Design风格的组件库 MRN

    基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://git ...

随机推荐

  1. 关于linux中的system函数

    Linux下使用system()函数一定要谨慎 https://blog.csdn.net/senen_wakk/article/details/51496322 system()正确应用 https ...

  2. Hadoop 管理工具HUE配置-集成Unix用户和用户组

    HUE安装完成之后,第一次登录的用户就是HUE的超级用户,可以管理用户,等等.但是在用的过程发现一个问题这个用户不能管理HDFS中由supergroup创建的数据. 虽然在HUE中创建的用户可以管理自 ...

  3. 如果遇到Hadoop集群正常,MapReduce作业运行出现错误,如何来查看作业运行日志(图文详解)

    不多说,直接上干货! 这个时候我们可以进入logs下的userlogs 备注:userlogs目录下有很多个以往运行的作业,我选择最新的最大编号的作业,就是我们当前运行作业的日志.然后找到stderr ...

  4. 学习笔记之Nearest-Neighbour Searching with PostGIS

    PostgreSQL: Documentation: 10: 7.8. WITH Queries (Common Table Expressions) https://www.postgresql.o ...

  5. SEO之HTML代码优化

    原文地址:http://www.admin5.com/article/20081128/117821.shtml   一.文档类型(DOCTYPE) XHTML1.0有三种DOCTYPE: 1.过渡型 ...

  6. jmap、jstack、jps无法连接jvm解决办法

    转载 http://blog.51cto.com/zhangshaoxiong/1310166 一.背景 在对线上服务器的java应用dump操作时发现,以下报错,不能dump.jps也获取不到jav ...

  7. linux 高级路由

    1. 什么是高级路由? 是把信息从源穿过网络到达目的地的行为. 有两个动作:确定最佳路径,传输信息 确定最佳路径:手工指定,自动学习. 传输信息:隧道传输,流量整形 高级路由(策略路由)是根据一定的需 ...

  8. tp3.2分页

    tp3.2分页 使用tp3.2自带的分页类 <?php // +----------------------------------------------------------------- ...

  9. solr defType查询权重排序

    Solr的defType有dismax/edismax两种,这两种的区别,可参见:http://blog.csdn.net/duck_genuine/article/details/8060026 下 ...

  10. sqlserver表数据的修改

    清除表数据  truncate table  [表名称] 将表b中的一列数据,更新到表tableA  如: tableA .key tableA .value 123   124   tableB.k ...