react-native字体react-native-vector-icons在ios下的使用
react-native字体react-native-vector-icons在ios下的使用
官网和网上有各种针对ios/android的安装和使用方法;能够使用了,基本就等于安装成功了。
react-native-vector-icons 的图标分为几个模块, 使用的时候先import FontAwesome from 'react-native-vector-icons/FontAwesome'; 这样才能使用 FontAwesome 标签, 标签内使用 name 字段指定某个图标.
项目添加依赖:
yarn add react-native-vector-icons
修改Podfile文件,使用CocoaPods对ios安装这个字体库:
vim project_dir/ios/Podfile
pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
在ios目录下执行pod install,使用CocoaPods安装这个依赖
修改Info.plist,添加:
vim project_dir/ios/project_name/Info.plist,添加:
<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>
</array>
简单使用
import Icon from 'react-native-vector-icons/Ionicons'; function ExampleView(props) {
return <Icon name="ios-person" size={30} color="#4F8EF7" />;
} 不同的图标使用名字区分;上例的图标名字(Icon-->name)在 [图标名字库](https://oblador.github.io/react-native-vector-icons/)里查找。
在文件node_modules/react-native-vector-icons/glyphmaps/*.json里也可以看到所有图标的名字
android下的使用:据说项目添加依赖后(执行步骤1)执行下面的命令关联下就可以了,待验证
react-native link react-native-vector-icons
参考:
- https://www.npmjs.com/package/react-native-vector-icons#examples
- https://oblador.github.io/react-native-vector-icons/
- https://www.jianshu.com/p/2b74ba057287
- https://blog.csdn.net/yingBi2014/article/details/102933684
- https://www.jianshu.com/p/71e31894877a
react-native字体react-native-vector-icons在ios下的使用的更多相关文章
- Native VS React Native VS 微信小程序
随着React Native和 微信小程序的出现,Native一家独大的局面出现裂痕,很多小公司使用已经正在着手微信小程序和React Native了,我公司就已经走上React Native之路.那 ...
- React Native微信分享 朋友圈分享 Android/iOS 通用
超详细React Native实现微信好友/朋友圈分享功能-Android/iOS双平台通用 2016/06/16 | React Native技术文章 | Sky丶清| 暂无评论 | 1 ...
- 一、React Native 搭建开发环境(1)(Mac OS - IOS项目)
React Native是Facebook推出的一个开发IOS和安卓APP的技术.至于更多的详情,这里不再描述,大家可以自行百度它的定义. 目的: 由于我想在一台电脑上同时开发IOS和Android两 ...
- React Native & react-native-web-player & React Native for Web
React Native & react-native-web-player & React Native for Web https://github.com/dabbott/rea ...
- React Native之图片保存到本地相册(ios android)
React Native之图片保存到本地相册(ios android) 一,需求分析 1,react native保存网络图片到相册,iOS端可以用RN自带的CameraRoll完美解决,但是andr ...
- 一、React Native 搭建开发环境(1)(Mac OS - IOS项目篇)
React Native是Facebook推出的一个开发IOS和安卓APP的技术.至于更多的详情,这里不再描述,大家可以自行百度它的定义. 原因:由于我想在一台电脑上同时开发IOS和Android两个 ...
- React Native之React速学教程(下)
概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习Reac ...
- React Native之React速学教程(中)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
- React Native之React速学教程(上)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
- 【React Native】React Native项目设计与知识点分享
闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...
随机推荐
- 深入V8引擎-默认Platform之mac篇(2)
先说结论,V8引擎在默认Platform中初始化的这个线程是用于处理类似于setTimeout的延时任务. 另外附一些图,包括继承树.关键属性归属.纯逻辑工作流程,对代码木得兴趣的看完图可以X掉了. ...
- 前端面试01:描述一下cookices sessionStorage 和 localStorage 的区别
相同点:都可以存储在客户端 不同点: 1.存储大小 cookie数据大小不能超过4K. sessionStorage 和 localStorage 虽然也有大小限制,但是比cookie大得多,可以达到 ...
- .Net IOC框架入门之——Autofac
一.简介 Autofac是.NET领域最为流行的IOC框架之一,传说是速度最快的一个 目的 1.依赖注入的目的是为了解耦.2.不依赖于具体类,而依赖抽象类或者接口,这叫依赖倒置.3.控制反转即IoC ...
- PIE SDK栅格矢量化算法
1.算法功能简介 栅格数据矢量化较为复杂,如果由一幅扫描的数字化地图来建立矢量数据库,则需要经过数字图象处理,如边缘增强.细化.二值化.特征提取及模式识别才能获得矢量数据.人们通常将多色地图分色后逐个 ...
- React路由安装使用和多种方式传参
安装路由 npm i react-router-dom -S 引入路由 import { BowserRouter as Router, Route, Switch, ... } from " ...
- Django模板系统:Template
一.模板常用语法 1.1 变量 符号:{{ }} 表示变量,在模板渲染的时候替换成值 使用方式:{{ 变量名 }}:变量名由字母数字和下划线组成 点(.)在模板语言中有特殊的含义,用来获取对象的相应属 ...
- android studio学习---Android studio 导入github工程
无论是那种方式,都最好是先把github上的工程项目下载到本地,然后修改文件再import 首先要知道 自己的build.gradle,在project下面的版本号是多少,比如我的: depende ...
- kubernetes学习之二进制部署1.16
服务器规划和系统初始化 一.服务器规划 10.255.20.205 Master01 kube-apiserver.kube-controller-manager.kube-scheduler.ETC ...
- 在ubuntu更新时,出现错误E: Some index files failed to download, they have been ignored, or old ones used inst
原文:https://blog.csdn.net/tian_ciomp/article/details/51339635 在ubuntu更新时,出现错误E: Some index files fail ...
- idea 2019 集成activiti, idea activiti 新建bpmn文件, 解决idea activiti中文乱码
idea 在线安装activiti插件 1. File-->Settings 2. 点击Plugins, 右侧界面点击Marketplace后在搜索框搜索 actiBPM 注: 网络原因没有加载 ...