react-native icon使用方式

为什么80%的码农都做不了架构师？>>>

用的是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/ 目录下即可

转载于:https://my.oschina.net/kaykie/blog/1599895

react-native icon使用方式相关推荐

转载: React Native 采用Fetch方式发送跨域POST请求
转载:http://blog.csdn.net/u012620506/article/details/52346264 小白林宇风的技术博客关于跨域: A上的页面获取B上的资源,浏览器会检查服务器B ...
为什么 React Native 连遭 Airbnb、Udacity 抛弃？
投稿 | 亦枫责编 | 唐小引 Udacity 移动端团队最近删除了 App 中使用 React Native 语言开发的相关功能. 我们收到大量有关我们用法或 React Native 的问题以及 ...
H5、React Native、Native应用对比分析
@王利华,vczero "存在即合理".凡是存在的,都是合乎规律的.任何新事物的产生总要的它的道理:任何新事物的发展总是有着取代旧事物的能力.React Native来的正是时候, ...
Web前端：React Native Web与React — 比较指南
React 是Facebook开发的用于构建交互式用户界面的JavaScript库.React 在 Apache 许可下作为开源软件提供,可用于个人和商业网站.客户端 Web 应用程序和服务器应用 ...
React Native 入门实战视频教程（36 个视频）
React Native 入门实战视频教程(36 个视频) #1 React Native 课程介绍「02:14」 #2 搭建 React Native 开发与运行环境跑起来「05:07」 #3 演示 ...
React Native 调研报告
Facebook三月份开源了React Native iOS平台的框架,让移动开发人员和web开发者都各自兴奋了一把:native的移动开发者想的比较多的估计是Facebook的那句:"le ...
React Native 入门实战视频教程（37 个视频）
我这里有视频教程,全部是我自己辛苦录的,有兴趣的可以看下. React Native 入门实战视频教程(37 个视频) 从零开始入门学习 React Native 开发,手把手教你写 App 项目 # ...
从 React Native 到 Flutter，移动跨平台方案的真相
转载自「LeanCloud通讯」公众号作者:LeanCloud 郑鹏 2018 年 12 月,Google 发布了 Flutter 1.0 正式版,似乎再次点燃了人们对移动跨平台开发的热情.上一次出 ...
React Native开发速记
文章目录引子 React Native适用场景 React基础 JSX 组件的定义高阶组件(HOC) 生命周期函数与组件渲染组件的缺省属性组件之间的通信基础API Flex弹性布局例子: ...
【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框获取组件实例常用的两种方式...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2346.html ...

react-native icon使用方式

react-native icon使用方式相关推荐

最新文章

热门文章