安装链接

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. Firefox不支持event解决方法

    IE 中可以直接使用event 对象,而FF 中则不可以,解决方法之一如下: var theEvent = window.event || arguments.callee.caller.argume ...

  2. MFC如何在有界面的应用程序中开启控制台窗口

    在有界面的应用程序中开启控制台窗口有时候非常有用,尤其是在调试多线程应用程序中,由于通过断点的方式调试程序时会导致线程挂起从而导致各种难于预料的结果.这时候就可以通过开启控制台窗口往窗口输出信息来查看 ...

  3. db2报错: [DB2/NT] SQL0952N 由于中断,处理被取消 SQLSTATE=57014

    DB2被中断,报错:  [DB2/NT] SQL0952N 由于中断,处理被取消 SQLSTATE=57014 在DB2的开发过程中,今日运行了一个执行时间较为长的sql语句.使用DB2服务端的控制台 ...

  4. Nginx下配置ThinkPhp多入口访问

    比如在一个项目中有前台与后台两个模块,需要使用不同的入口文件.同时希望前台使用默认的index.php的入口. 关键的配置如下: if (!-e $request_filename) {        ...

  5. Java队列Queue

    上个星期总结了一下synchronized相关的知识,这次将Queue相关的知识总结一下,和朋友们分享. 在Java多线程应用中,队列的使用率很高,多数生产消费模型的首选数据结构就是队列.Java提供 ...

  6. postgresql定位分析消耗CPU高的SQL语句

    第一步:使用TOP命令查看占用CPU高的postgresql进程,并获取该进程的ID号,如图该id号为3640 第二步:切换到postgres用户,并且psql连接到数据库,执行如下查询语句 SELE ...

  7. 第15课 右值引用(2)_std::move和移动语义

    1. std::move (1)std::move的原型 template<typename T> typename remove_reference<T>::type& ...

  8. 用户授权的Sql脚本

    正文 要想成功访问 SQL Server 数据库中的数据, 我们需要两个方面的授权: 获得准许连接 SQL Server 服务器的权利: 获得访问特定数据库中数据的权利(select, update, ...

  9. WordPress版微信小程序1.5版本发布

    这个周末对WordPress版微信小程序进行了小版本的升级,第一个版本做得比较粗糙,性能上也有些差.本次升级主要调整和优化功能包括: 1.在主页面,加入浮动按钮,用来打开侧滑导航菜单. 2.增加侧滑导 ...

  10. Distributed traceability with Spring Cloud: Sleuth and Zipkin

    I. Sleuth 0. Concept Trace A set of spans that form a call tree structure, forms the trace of the re ...