文档章节

react-native字体react-native-vector-icons在ios下的使用

o
 osc_zoa3moe9
发布于 2019/12/08 12:02
字数 371
阅读 3
收藏 0

精选30+云产品,助力企业轻松上云!>>>

react-native字体react-native-vector-icons在ios下的使用

官网和网上有各种针对ios/android的安装和使用方法;能够使用了,基本就等于安装成功了。

react-native-vector-icons 的图标分为几个模块, 使用的时候先import FontAwesome from 'react-native-vector-icons/FontAwesome'; 这样才能使用 FontAwesome 标签, 标签内使用 name 字段指定某个图标.

  1. 项目添加依赖:
    yarn add react-native-vector-icons
    
  2. 修改Podfile文件,使用CocoaPods对ios安装这个字体库:
    vim project_dir/ios/Podfile
    pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
    在ios目录下执行pod install,使用CocoaPods安装这个依赖
    
  3. 修改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>
    
  4. 简单使用

    图标名字库

    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里也可以看到所有图标的名字
    
  5. android下的使用:据说项目添加依赖后(执行步骤1)执行下面的命令关联下就可以了,待验证
    react-native link react-native-vector-icons
    
  6. react-native-vector-icons自定义图标

  7. 生成svg和字体文件

参考:
  1. https://www.npmjs.com/package/react-native-vector-icons#examples
  2. https://oblador.github.io/react-native-vector-icons/
  3. https://www.jianshu.com/p/2b74ba057287
  4. https://blog.csdn.net/yingBi2014/article/details/102933684
  5. https://www.jianshu.com/p/71e31894877a
o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
react-native-vector-icons 安装、使用

前言 任何库的安装与使用都离不开官文,按照官方文档一步步操作可以规避大多数问题。不过很多库只有英文文档,想要完全参透需要时间。react-native-vector-icons 是最近学习React Native时所...

osc_xxbg6mig
04/16
8
0
IT 资讯 APP - ITNews

IT 资讯 APP,使用 React Native 编写. 功能非常简单: 列表(listview)+ 详情(webview)+ 分享功能。 使用到的组件 react-navigation(StackNavigator, TabNavigator) AsyncStorage react-...

朋也
2017/08/04
2.1K
2
[RN] React Native 使用 阿里巴巴 矢量图标库 iconfont

React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 阿里巴巴 矢量图标库 iconfont 一、找字体文件...

osc_f85py9gf
2019/05/14
4
0
做个简单的 React-Native application 处理旧书

做个简单的 React-Native application 一个简单的 React-Native(0.53) application,只有两页面。 几张图 用到的插件 react-native-vector-icons react-navigation react-native-root-toast......

三毛丶
2018/10/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

写技术博客的一些心得体会

目录 1. 是什么 2. 为什么 2.1. 优秀的学习方法 2.2. 知识的备份 2.3. 体系的形成 2.4. 知识的交流 2.5. 写作能力和思维能力 3. 怎么做 1. 是什么 不知不觉已经写了近百篇技术博文了,其实在...

osc_873fteab
3分钟前
0
0
android组件间共享数据的常用方法

使用Intent在激活组件的时候携带数据,以进行数据的传递 使用广播进行组件间数据的伟递 使用外部存储(sharedPreference,文件,数据库,网络)进行组件间数据共享 使用Static静态成员进行数...

osc_sdnu59mg
5分钟前
0
0
Chrome浏览器的插件扩展默认安装目录

1:打开谷歌浏览器在地址栏输入:chrome://version 并回车 2:如上图个人资料路径,该路径下的Extensions文件夹即默认的插件安装目录:

osc_zg8wy3xa
7分钟前
0
0
知识圈APP开发记录(二十一)

今日完成:新增学习情况概览功能 花费时间:4小时 剩余时间:2小时 遇到问题:图标刷新时X轴成倍数刷新(已解决) 部分代码截图: 明日将完成:个性化模块及其附属功能测试

osc_bodzcw38
8分钟前
0
0
在做python大作业自己设计学生信息管理的增删改查操作遇到的问题

数据库的创建 conn = sqlite3.connect('student1.db') """ #在该数据库下创建学生信息表 conn.execute ('''CREATE TABLE StudentTable( ID INTEGER PRIMARY KEY AUTOINCREMENT, StuId INTEGE......

osc_7dwwmolq
9分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部