【代码片-1】 react-native-vector-icons的简单使用,图片,按钮,标签视图,导航条
标签： 导航条&&&&视图&&&&标签&&&&按钮&&&&图片&&&&
'use strict';
import React, {
//导入下面需要使用的原生组件
AppRegistry,
Component,
StyleSheet,
TabBarIOS,
NavigatorIOS,
} from 'react-native';
var Icon = require('react-native-vector-icons/FontAwesome');&span style=&white-space:pre&& &/span&
import FindComponent from './FindComponent';&span style=&white-space:pre&& &/span&//发现页组件
import SearchComponent from './SearchComponent';&span style=&white-space:pre&& &/span&//搜索页组件
class Demo extends Component {
selectedTab: 'find',
loginWithFacebook = () =& {
//点击&Login with Facebook&按钮后触发的方法
AlertIOS.alert(&facebook&);
render() {
&View style={styles.container}&
name=&rocket&
//图片名连接,可以到这个网址搜索:/, 使用时:去掉前面的 &icon-& !!!!
//图片大小
color=&red&
//图片颜色
&Icon.Button
//在图片后加文字
name=&facebook&
backgroundColor=&#3b5998&
onPress={this.loginWithFacebook} //点击该按钮后触发的方法
Login with Facebook
&/Icon.Button&
&Icon.Button
//在图片后加, 自定义样式的文字
name=&facebook&
backgroundColor=&#3b5998&&
&Text style={{fontFamily: 'Arial', fontSize: 15}}&Login with Facebook&/Text&
&/Icon.Button&
&TabBarIOS
//和标签视图一起使用
tintColor=&#4977f0&
barTintColor=&#E6E6E6&&
&Icon.TabBarItem
//用 Icon.TabBarItem 代替 TabBarIOS.Item
title=&发现&
iconName=&home&
selectedIconName=&home&
selected = {this.state.selectedTab === 'find'}
onPress={() =& {
this.setState({
selectedTab: 'find',
&NavigatorIOS
style={styles.container}
tintColor='#FFFFFF'
barTintColor='#;
initialRoute={{
title: &发现&,
titleTextColor: 'white',
component: FindComponent
&/Icon.TabBarItem&
&Icon.TabBarItem
//用 Icon.TabBarItem 代替 TabBarIOS.Item
title=&搜索&
iconName=&search&
selectedIconName=&search&
selected = {this.state.selectedTab === 'search'}
onPress={() =& {
this.setState({
selectedTab: 'search',
&NavigatorIOS
style={styles.container}
tintColor='#FFFFFF'
barTintColor='#;
initialRoute={{
title: &搜索&,
titleTextColor: 'white',
component: SearchComponent
&/Icon.TabBarItem&
&/TabBarIOS&
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
AppRegistry.registerComponent('Demo', () =& Demo);
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？1951人阅读
技术问题（68）
1.把字符对应表给整出来
var map = {"arrow":"62976","checked":"62977","checked-s":"62978","tag-svip":"62995"};
module.exports = (name)=&String.fromCharCode(map[name]);
使用的时候：
import icon from "./fontConf";
export default class
IconExample extends Component {
render() {
style={styles.container}&
style={{fontFamily: 'FontIconQui',fontSize:30}}
arrow-icon:{icon('arrow')}
style={{fontFamily: 'FontIconQui',fontSize:30, color:"#ff4444"}}
vip-icon:{icon('tag-svip')}
style={{fontFamily: 'FontIconQui',fontSize:30, color:"#ff4444"}}
tag-svip:{icon('tag-svip')}
2.在工程中，需要引入字体文件：
Android： 把字体文件拷贝到[project root]/android/app/src/main/assets/fonts/
iOS: 把字体文件拖到对应的Xcode工程里面，勾选Add to targets和Create groups，修改Info.plist文件，添加属性Fonts provided by application，在这个属性下添加相应字体文件名的item，如下图：
iOS上添加字体文件具体的流程可以参考。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：36856次
排名：千里之外
原创：50篇
转载：40篇
(1)(1)(1)(1)(1)(2)(4)(1)(3)(10)(7)(4)(1)(1)(8)(8)(1)(1)(1)(4)(1)(25)(5)966,690 二月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
用React Native开发第一个iOS应用
用React Native开发第一个iOS应用
日. 估计阅读时间:
欲知区块链、VR、TensorFlow等潮流技术和框架，请锁定
Author Contacted
相关厂商内容
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
架构 & 设计
文化 & 方法
<及所有内容，版权所有 &#169;
C4Media Inc.
服务器由 提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司
京ICP备号-7
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷，但为了保证InfoQ能够继续以免费方式为您服务，我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单，感谢您的理解与支持。4911人阅读
项目缺少ui，但是又需要很多icon，为了和web的界面统一，android中，我也采用里iconfont的方案。写一个iconTextView继承TextView
package com.edusohoapp.app.
import android.content.C
import android.graphics.T
import android.widget.TextV
* Created by suju on 14-5-12.
public class EduSohoIconView extends TextView{
private Context mC
public EduSohoIconView(Context context) {
super(context);
mContext =
initView();
public EduSohoIconView(android.content.Context context, android.util.AttributeSet attrs) {
super(context, attrs);
mContext =
initView();
private void initView()
Typeface iconfont = Typeface.createFromAsset(mContext.getAssets(), &normal.ttf&);
setTypeface(iconfont);
去网上选择一个齐全一点的iconfont库，然后下载ttf文件放到安卓的assets目录中。“normal.ttf”是我这里使用的字体名称。
下载一个fontlab studio 可以查看font字体的unicode编码，因为在安卓中TextView 要使用unicode&#20540;。
如上图，F002就是字体的unicode&#20540;。
这样更改TextView的text&#20540;为&#xf002; 就可以显示自定义的font
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：271426次
积分：2806
积分：2806
排名：第10706名
原创：61篇
转载：14篇
评论：28条
(1)(1)(1)(1)(1)(10)(2)(2)(8)(14)(3)(5)(11)(9)(2)(4)
小毛病中的大问题。转载丛书&鞋里的沙&