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 条评论
登录 后参与评论

相关文章

来自专栏L宝宝聊IT

MySQL架构组成、逻辑模块组成

Mysql逻辑结构可以看成是二层架构,第一层通常叫做SQL Layer,在mysql数据库系统处理底层数据之前的所有工作都在这一层完成的,包括权...

673
来自专栏大数据和云计算技术

MongoDB Compass--MongoDB DBA必备的管理工具

MongoDB Compass是MongoDB官网提供的一个集创建数据库、管理集合和文档、运行临时查询、评估和优化查询、性能图表、构建地理查询等功能为一体的...

3595
来自专栏happyJared

Elasticsearch 6.3.2版本踩填坑指南

  前端时间利用ES开发一个"附近地理位置+其它信息"查询搜索的功能(据了解,Redis和PostgreSQL也能实现同样的功能),实践中遇到了不少的问题,所以...

1492
来自专栏我的博客

PHP命令行模式

1.PHP运行指定文件 php my_script.php php -f my_script.php 2.命令行直接运行php代码 php -r ‘pri...

2634
来自专栏电光石火

eclipse tomcat下网页修改不生效

大家打开eclipse JavaEE新建一个动态网页工程(File,new,project,web,Dynamic Web Project)。新建一个html静...

1855
来自专栏狐狸

2 目录结构

vonic-webpack-starter 是vonic-template下载后的目录,自动生成结构保持不变,只需要改变Src目录下的目录结构,对修改后的结构进...

893
来自专栏运维小白

12.23 open_basedir

php-fpm定义open_basedir目录概要 vim /usr/local/php-fpm/etc/php-fpm.d/test.conf//加入如下内容...

1946
来自专栏Golang语言社区

Golang 命令

go buildgo build 命令用于编译我们指定的源码文件或代码包以及它们的依赖包。go build [-o output] [-i] [build fl...

40014
来自专栏python3

python之读写文件

在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序直接操作磁盘,所以,读写文件就是请求操作系统打开一个文件对象(通常称为文件描述符),然后...

751
来自专栏前端vue

(0)webpack学习笔记—哈喽~沃德

webpack是一个现代javascript应用程序的模块打包器(module bundler),他会递归的构建一个依赖关系图,其中包含应用程序需要的每个模块,...

1214

扫码关注云+社区