【React Native】react-native-vector-icons用法避坑

在用React Native开发App时，icon的使用必不可少。官网推荐使用react-native-vector-icons来完成icon的使用。
在学习的过程中碰到了一个问题：一步一步按照官网说明的步骤去使用icon，但是却无法显示。
通过不停的搜索，终于找到了解决方法。

环境：

React Native版本：0.70
@react-navigation/native：6.0.14

安装

npm install react-native-vector-icons

安卓平台设置

将 node-modeles\react-native-vector-icons\Fonts目录下的文件复制到项目andriod\app\src\main\assets\fonts 目录下，如果没有相应的文件夹的话，自己创建一个即可。

注意：无需修改build.gradle文件夹的配置

使用

其实我也是一步一步跟着官网来学习使用的，想知道更加多更加详细的代码请参见React Navigation官网

import Ionicons from 'react-native-vector-icons/Ionicons'<Ionicons name='home' size={30} color="black"/>

react-native-vector-icons内有着许多的图标库，如AntDesign、FontAwesome、MaterialIcons、FontAwesome 5等等，用法都同上，只要注意更改相应的图标库名称即标签名即可。

【React Native】react-native-vector-icons用法避坑相关推荐

用react-service做状态管理，适用于react、react native
转载自:https://blog.csdn.net/wo_shi_ma_nong/article/details/100713151 . react-service是一个非常简单的用来在react.r ...
掌握 React 与 React Native
今天面试被人问到React 与 React Native ,废话不多说,直接上干货. React Native官网:https://reactnative.cn/ React Native App 页 ...
小谈React、React Native、React Web
React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...
native react 折线图_【详解】纯 React Native 代码自定义折线图组件(译)
本文为 Marno 翻译,转载必须保留出处! 公众号[ Marno ],关注后回复 RN 加入交流群 React Native 优秀开源项目大全:http://www.marno.cn 一.前言在移 ...
用于React，React Native，JavaScript和生产力的顶级VSCode扩展
I've used VSCode full-time since 2016. Before I was using Visual Studio and I was looking for lighte ...
H5、React Native、Native应用对比分析
@王利华,vczero "存在即合理".凡是存在的,都是合乎规律的.任何新事物的产生总要的它的道理:任何新事物的发展总是有着取代旧事物的能力.React Native来的正是时候, ...
native react 折线图_react-echarts之折线图的显示
import React, {PropTypes, Component} from 'react';//引入react包,用于编写react组件 import { Router, Route, bro ...
基于React的Alita框架的jest用法
使用 alita/test 测试简介在前端开发的时候,可能会写到很多组件,将这多个组件进行封装已做于后期业务的开发.再将这些组件开源供其他开发人员使用,逐渐发现会出现这样那样的 Bug ,这个时候 ...
React、react生命周期、react生命周期运行过程、shouldComponentUpdate的用法
React.react生命周期.react生命周期运行过程 1.创建阶段 constructor(){super()console.log('执行构造函数')this.state={num:1}}UN ...

【React Native】react-native-vector-icons用法避坑

环境：

安装

安卓平台设置

使用

【React Native】react-native-vector-icons用法避坑相关推荐

最新文章

热门文章