react-native icon使用方式

用的是antd官方带的antd  icon组件,

组件中的代码是这样写的:

/**
 * Created by apple on 2017/12/30.
 */
import React from 'react';
import { Icon, Grid } from 'antd-mobile';

const list = [
  'check-circle', 'check', 'check-circle-o',
  'cross-circle', 'cross', 'cross-circle-o',
  'up', 'down', 'left',
  'right', 'ellipsis',
];

export default class IConDemo extends React.Component<any, any> {
  componentDidMount(){
    console.log('icon render')
  }
  render() {
    const data = list.map(item => ({
      icon: (<Icon type={item} />),
      text: item,
    })).concat([{
      icon: (<Icon type={'\ue601'} size={55} color="red" />),
      text: 'Customized',
    }]);
    return (
      <Grid data={data} columnNum={3} hasLine={false} />
    );
  }
}

icon的名称需要和type里的一样,

写好这些代码还是不能够正确展示的,在ios下需要用xcode打开project,然后把存放Icon的tff文件引入:如下

在左侧创建一个文件夹叫iconFont(可以随便取 ,用来存放iconfont),然后在左侧点加号 先添加,Fonts provied by application,然后再点加号添加一个item, 取名和ttf文件名一样即可,这样即可以关联上了;

在android中就简单多了,只要一步,把.ttf文件放入到 放在 android/app/src/main/assets/fonts/ 目录下即可

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Youngxj

[源码分享]Emlog博客后台自适应主题 N+

6864
来自专栏Django中文社区

支持 Markdown 语法和代码高亮

为了让博客文章具有良好的排版,显示更加丰富的格式,我们使用 Markdown 语法来书写我们的博文。Markdown 是一种 HTML 文本标记语言,只要遵循它...

3427
来自专栏PHP技术大全

使用PHP辅助 快速制作一套自己的手写字体实践

笔者以前在网上看到有民间高手制作字体的相关事迹,觉得把自己的手写字用键盘敲出来是一件很有意思的事情,所以一直有时间想制作一套自己的手写体,前几天在网上搜索了一下...

1413
来自专栏腾讯社交用户体验设计

vuejs初体验-Chrome插件开发实录

2052
来自专栏技术小黑屋

实时预览Markdown利器

使用MBP15寸有点高不成低不就,接显示器分辨率下降(浪费Retina屏),不接显示器屏幕不是很大。

2113
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native调试技巧与心得

本文出自《React Native学习笔记》系列文章。 在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位...

5215
来自专栏全栈之路

css 关于图片上显示文字

图片上显示文字,现在有很多主流的方法,最常用的就是position设置为relative或者absolute。

1855
来自专栏娱乐心理测试

xcode 9以后导入图片遇到显示不出的问题

1542
来自专栏向治洪

React Native开发之调试

在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低B...

2708
来自专栏PHP技术大全

使用PHP辅助快速制作一套自己的手写字体实践

笔者以前在网上看到有民间高手制作字体的相关事迹,觉得把自己的手写字用键盘敲出来是一件很有意思的事情,所以一直有时间想制作一套自己的手写体,前几天在网上搜索了一下...

1433

扫码关注云+社区