React Native－11.React Native TabBarIOS TabBarIOS.Item组件详解

TabBarIOS组件简介

等同于iOS中的UITabBar

TabBarIOS 组件属性介绍：

barTintColor: Tab栏的背景颜色。

tintColor : 当我们选中了某一个Tab时，该Tab的图标颜色。

translucent ： Tab栏是否透明。

TabBarIOS.Item组件简介

等同于iOS中UITabBarItem

badge : 红色的提示数字，可以用作消息提醒。

icon：Tab的图标，如果不制定，默认显示系统图标。

onPress：点击事件。当某个Tab被选中时，需要改变该组件的selected＝｛true｝设置。

selectedIcon : 选中状态的图标，如果为空，则将图标变为蓝色。

systemIcon：系统图标，其值是枚举类型，可选值有

bookmarks、contacts、downloads、favorites、featured、history、more、most－recent、most－viewed、recents、search、top－rated

。

title：标题。他会出现在图标底部，当我们使用了系统图标时，将会忽略该标题。

来个demo：尝尝鲜儿

代码：

'use strict';
var React = require('react-native');
var Dimensions = require('Dimensions');
var {
AppRegistry,
StyleSheet,
Text,
View,
Image,
ScrollView,
TabBarIOS,
} = React;

var MyImage = React.createClass({
getInitialState : function(){
var imgs = this.props.imgs;
return{
imgs : imgs,
count : 0,
};
},
goNext : function(){
var count = this.state.count;
count++;
if(count < imgs.length){
this.setState({
count: count
});
}
},
goPreview: function() {
var count = this.state.count;
count--;
if(count >= 0){
this.setState({
count:count
});
}
},
render: function(){
return(
<View style = {[styles.flex,{marginTop: 25}]}>
<View style = {[styles.image]}>
<Image style = {styles.img}
source = {{uri:this.state.imgs[this.state.count]}}
resizeMode = "contain"></Image>
</View>
<View style = {styles.btns}>
<TouchableOpacity onPress = {this.goPreview}
style = {[styles.btn]}>
<Text>
上一张
</Text>
</TouchableOpacity>
<TouchableOpacity onPress = {this.goNext}
style = {[styles.btn]}>
<Text>
下一张
</Text>
</TouchableOpacity>
</View>

</View>
);
}
})

var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height - 70;

var styles = StyleSheet.create({
flex : {
flex: 1,
},

message : {
fontSize : 18,
color: '#18b5ff',
marginBottom: 5,
},

message_title: {
fontSize: 18,
color:'#18b5ff',
marginBottom : 5,
},
list: {
height: 30,
fontSize : 15,
marginLeft: 10,
marginTop: 10,
},
})

var wxsPrj = React.createClass({
getInitialState : function() {
return{
tab: 'message'
};
},

select: function(tabName){
this.setState({
tab: tabName
});
},

render: function() {
return (
<TabBarIOS style = {styles.flex}
barTintColor = '#ffff22'>
<TabBarIOS.Item title = "位置"
icon = {require('image!marker')}
onPress = {this.select.bind(this,'message')}
selected = {this.state.tab === 'message'}>
<ScrollView style = {StyleSheet.message}>
<Text style = {styles.message_title}>
TabBarIOS Test
</Text>
<Text>
这是一个测试TabBarIOS 的demo
</Text>
</ScrollView>
</TabBarIOS.Item>
<TabBarIOS.Item title = "联系人"
icon = {require('image!user')}
onPress = {this.select.bind(this,'phoneList')}
badge = "5"
selected = {this.state.tab === 'phoneList'}>
<ScrollView>
<Text style = {styles.list}>
王小二
</Text>
<Text>
18900000000
</Text>
<Text style = {styles.list}>
王小三
</Text>
<Text>
18900000001
</Text>
<Text style = {styles.list}>
王小四
</Text>
<Text>
18900000002
</Text>
</ScrollView>
</TabBarIOS.Item>
<TabBarIOS.Item
title = "动态"
icon = {require('image!hearts')}
onPress = {this.select.bind(this,'star')}
selected = {this.state.tab === 'star'}>
<ScrollView style = {styles.flex}>
<Image style = {{width : width,height: height}}
source = {{uri: 'http://ww4.sinaimg.cn/bmiddle/684e8299gw1f139744lfwj20c80c8abo.jpg'}}/>
</ScrollView>
</TabBarIOS.Item>
</TabBarIOS>
);
}
});

AppRegistry.registerComponent('wxsPrj', () => wxsPrj);

我们会发现icon = {require(‘image!hearts’)} ，这里都是本地的，是因为，RN不支持远程图片，我觉得这一点很不好，不知道有没有解决办法。

附上三张图片的下载地址

联系人：

‘http://ww4.sinaimg.cn/square/006bdQ7qjw1f14h428p3jj300p00p0sh.jpg‘,

坐标：

‘http://ww4.sinaimg.cn/square/006bdQ7qjw1f14h435x6sj300p00p3y9.jpg‘,

动态：

‘http://ww3.sinaimg.cn/square/006bdQ7qjw1f14h44pk3wj300p00p0sh.jpg‘,

Dimensions

是一个处理尺寸的工具类，里边的api我们以后再学习，主要我也不会。。。