频道导航

使用react-native-vector-icons（RN0.6+）

2020-12-02 React 前端之家

前端之家收集整理的这篇文章主要介绍了使用react-native-vector-icons（RN0.6+），前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

1.安装

npm install --save react-native-vector-icons
or 
yarn add react-native-vector-icons@H_502_4@

2.配置

2.1.IOS配置

修改 info.plist 添加

@H_404_15@

<key>UIAppFonts</key>
<array>
  <string>AntDesign.ttf</string>
  <string>Entypo.ttf</string>
  <string>EvilIcons.ttf</string>
  <string>Feather.ttf</string>
  <string>FontAwesome.ttf</string>
  <string>FontAwesome5_Brands.ttf</string>
  <string>FontAwesome5_Regular.ttf</string>
  <string>FontAwesome5_Solid.ttf</string>
  <string>Foundation.ttf</string>
  <string>Ionicons.ttf</string>
  <string>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
  <string>Fontisto.ttf</string>
</array>@H_502_4@
@H_404_15@

在ios目录执行 pod install

2.2.Android配置

修改 android/app/build.gradle 在第二行添加

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"@H_502_4@

3.使用

打开https://oblador.github.io/react-native-vector-icons/找到自己需要的icon，引入自己的工程即可

import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';

<FontAwesome5
    name={'microphone'}
    size={30}
 />@H_502_4@

在mac中遇到了问题，通过这个解决了，转载自 https://www.cnblogs.com/dch0/p/13383877.html

上一篇：React中JSX的理解下一篇：React中的Props, State 与 render

猜你在找的React相关文章

react使用moment进行日期格式化

导入moment 使用方式年月日，时分秒星期几相对时间 7天后 2小时后明天将毫秒转换成年...

作者：前端之家时间：2021-02-16

推荐使用并手写实现redux-actions原理

@ 一、前言为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...

作者：前端之家时间：2020-12-30

【译】值得推荐的十大React Hook 库

十大React Hook库原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...

作者：前端之家时间：2020-12-30

React生命周期

React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...

作者：前端之家时间：2020-12-19

React虚拟DOM的理解

React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...

作者：前端之家时间：2020-12-19

使用react-native-vector-icons（RN0.6+）

1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...

作者：前端之家时间：2020-12-02

React中的Props, State 与 render 函数

React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...

作者：前端之家时间：2020-11-07

React开发环境准备

react fiber 指react 16以上的版本引入react的方式： 1、引入.js文件 2、使用脚手架工具（...

作者：前端之家时间：2020-11-07

React组件拆分与传值

组件拆分与组件之间的传值父子组件的概念：父组件通过属性的方式，向自组件传值子组件通...

作者：前端之家时间：2020-11-07

React组件的简单演示

src/Test.js import React from 'react'; function Test() { return ( &a...

作者：前端之家时间：2020-11-07