1.引入依赖

cnpm install react-native-vector-icons --save

2.LINK原生

react-native link react-native-vector-icons

若成功的话会看到如下文件

3.在组件中引入

import Icon from 'react-native-vector-icons/Ionicons'; //引入图标

在reder中使用: <Icon name="rocket" size={30} color="#900" />

4.重新react-native run-android的时候会报错,因为node_module中的react-native-vector-icons下的 buildToolsVersion 和你项目的 buildToolsVersion 不一致,所以你需要修改react-native-vector-icons中的buildToolsVersion 和项目中的一致

注意:两者一定要一致,不一致一定会报错的

5.此时你可以重新run-Android一下,然后可以在模拟器上或者是真机上看到如下界面

至此,引入react-native-vector-icons及使用算是基本成功了

react native 中使用react-native-vector-icons的更多相关文章

  1. React Native 中 CSS 的使用

    首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...

  2. iOS原生项目中集成React Native

    1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境. 2.使用Xcode新建一个工程.EmbedRNMeituan [图1] 3.使用CocoaPods安装Re ...

  3. react native中的欢迎页(解决首加载白屏)

    参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...

  4. React Native中的网络请求fetch和简单封装

    React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...

  5. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  6. [转] 在React Native中使用ART

    http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...

  7. react native中使用echarts

    开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...

  8. react native中一次错误排查 Error:Error: Duplicate resources

    最近一直在使用react native中,遇到了很多的坑,同时也学习到了一些移动端的开发经验. 今天在做一个打包的测试时,遇到了一个问题,打包过程中报错“Error:Error: Duplicate ...

  9. 在React Native中,使用fetch网络请求 实现get 和 post

    //在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...

  10. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

随机推荐

  1. POJ 2513 - Colored Sticks - [欧拉路][图的连通性][字典树]

    题目链接: http://poj.org/problem?id=2513 http://bailian.openjudge.cn/practice/2513?lang=en_US Time Limit ...

  2. 【RMAN】RMAN-05001: auxiliary filename conflicts with the target database

    oracle 11.2.0.4 运行以下脚本,使用活动数据库复制技术创建dataguard备库报错rman-005001: run{ duplicate target database for sta ...

  3. en-zh(社会问题)social problems

    The world's richest man, Amazon founder Jeff Bezos, and his wife MacKenzie have agreed a record-brea ...

  4. 从urllib2的内存泄露看python的GC python引用计数 对象的引用数 循环引用

    这里会发现上述代码是存在内存泄露,造成的原因就是lz与ow这两个变量存在循环引用,Python 不知道按照什么样的安全次序来调用对象的 __del__() 函数,导致对象始终存活在 gc.garbag ...

  5. Vue子组件调用父组件的方法

    Vue子组件调用父组件的方法   Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...

  6. 笔记:mysql升序排列asc,降序排列desc

    经常会忘记mysql中升序和降序用什么字符来表示,现在就做个笔记:升序排列asc,降序排列desc,举个例子,下面是按时间降序调用栏目的文章,也即是栏目最新文章 [e:loop={"sele ...

  7. css垂直居中怎么设置?文字上下居中和图片垂直居中

    css 居中分css垂直居中和css水平居中,水平居中平时比较常用,这里我们主要讲css上下居中的问题.垂直居中又分为css文字上下居中和css图片垂直居中,下面我们就分别来介绍一下. css文字上下 ...

  8. 自动化工具之一:wxPython

    一.下载与安装 (1)下载地址:https://pypi.python.org/pypi/wxPython (2)我安装的python版本是3.6.X的,所以我这里下载的是: wxPython-4.0 ...

  9. java native方法及JNI实例 (转)

    转自:http://blog.csdn.net/xw13106209/article/details/6989415 1.参考文献: http://blog.csdn.net/youjianbo_ha ...

  10. mysql的查询

    1.单表查询 单表查询的语法 SELECT 字段1,字段2... FROM 表名 WHERE 条件 GROUP BY field HAVING 筛选 ORDER BY field LIMIT 限制条数 ...