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'@H_301_40@;
var@H_301_40@ React = require('react-native'@H_301_40@);
var@H_301_40@ Dimensions = require('Dimensions'@H_301_40@);
var@H_301_40@ {
AppRegistry,StyleSheet,Text,View,Image,ScrollView,TabBarIOS,} = React;
var@H_301_40@ MyImage = React.createClass({
getInitialState : function@H_301_40@()@H_301_40@{@H_301_40@
var@H_301_40@ imgs = this@H_301_40@.props.imgs;
return@H_301_40@{
imgs : imgs,count : 0@H_301_40@,};
},goNext : function@H_301_40@()@H_301_40@{@H_301_40@
var@H_301_40@ count = this@H_301_40@.state.count;
count++;
if@H_301_40@(count < imgs.length){
this@H_301_40@.setState({
count: count
});
}
},goPreview: function@H_301_40@()@H_301_40@ {@H_301_40@
var@H_301_40@ count = this@H_301_40@.state.count;
count--;
if@H_301_40@(count >= 0@H_301_40@){
this@H_301_40@.setState({
count:count
});
}
},render: function@H_301_40@()@H_301_40@{@H_301_40@
return@H_301_40@(
<View style = {[styles.flex,{marginTop: 25@H_301_40@}]}>
<View style = {[styles.image]}>
<Image style = {styles.img}
source = {{uri:this@H_301_40@.state.imgs[this@H_301_40@.state.count]}}
resizeMode = "contain"@H_301_40@></Image>
</View>
<View style = {styles.btns}>
<TouchableOpacity onPress = {this@H_301_40@.goPreview}
style = {[styles.btn]}>
<Text>
上一张
</Text>
</TouchableOpacity>
<TouchableOpacity onPress = {this@H_301_40@.goNext}
style = {[styles.btn]}>
<Text>
下一张
</Text>
</TouchableOpacity>
</View>
</View>
);
}
})
var@H_301_40@ width = Dimensions.get@H_301_40@('window'@H_301_40@).width;
var@H_301_40@ height = Dimensions.get@H_301_40@('window'@H_301_40@).height - 70@H_301_40@;
var@H_301_40@ styles = StyleSheet.create({
flex : {
flex: 1@H_301_40@,},message : {
fontSize : 18@H_301_40@,color: '#18b5ff'@H_301_40@,marginBottom: 5@H_301_40@,message_title: {
fontSize: 18@H_301_40@,color:'#18b5ff'@H_301_40@,marginBottom : 5@H_301_40@,list: {
height: 30@H_301_40@,fontSize : 15@H_301_40@,marginLeft: 10@H_301_40@,marginTop: 10@H_301_40@,})
var@H_301_40@ wxsPrj = React.createClass({
getInitialState : function@H_301_40@()@H_301_40@ {@H_301_40@
return@H_301_40@{
tab: 'message'@H_301_40@
};
},select: function@H_301_40@(tabName)@H_301_40@{@H_301_40@
this@H_301_40@.setState({
tab: tabName
});
},render: function@H_301_40@()@H_301_40@ {@H_301_40@
return@H_301_40@ (
<TabBarIOS style = {styles.flex}
barTintColor = '#ffff22'@H_301_40@>
<TabBarIOS.Item title = "位置"@H_301_40@
icon = {require('image!marker'@H_301_40@)}
onPress = {this@H_301_40@.select.bind(this@H_301_40@,'message'@H_301_40@)}
selected = {this@H_301_40@.state.tab === 'message'@H_301_40@}>
<ScrollView style = {StyleSheet.message}>
<Text style = {styles.message_title}>
TabBarIOS Test
</Text>
<Text>
这是一个测试TabBarIOS 的demo
</Text>
</ScrollView>
</TabBarIOS.Item>
<TabBarIOS.Item title = "联系人"@H_301_40@
icon = {require('image!user'@H_301_40@)}
onPress = {this@H_301_40@.select.bind(this@H_301_40@,'phoneList'@H_301_40@)}
badge = "5"@H_301_40@
selected = {this@H_301_40@.state.tab === 'phoneList'@H_301_40@}>
<ScrollView>
<Text style = {styles.list}>
王小二
</Text>
<Text>
18900000000@H_301_40@
</Text>
<Text style = {styles.list}>
王小三
</Text>
<Text>
18900000001@H_301_40@
</Text>
<Text style = {styles.list}>
王小四
</Text>
<Text>
18900000002@H_301_40@
</Text>
</ScrollView>
</TabBarIOS.Item>
<TabBarIOS.Item
title = "动态"@H_301_40@
icon = {require('image!hearts'@H_301_40@)}
onPress = {this@H_301_40@.select.bind(this@H_301_40@,'star'@H_301_40@)}
selected = {this@H_301_40@.state.tab === 'star'@H_301_40@}>
<ScrollView style = {styles.flex}>
<Image style = {{width : width,height: height}}
source = {{uri: 'http://ww4.sinaimg.cn/bmiddle/684e8299gw1f139744lfwj20c80c8abo.jpg'@H_301_40@}}/>
</ScrollView>
</TabBarIOS.Item>
</TabBarIOS>
);
}
});
AppRegistry.registerComponent('wxsPrj'@H_301_40@,() => wxsPrj);
我们会发现icon = {require(‘image!hearts’)} ，这里都是本地的，是因为，RN不支持远程图片，我觉得这一点很不好，不知道有没有解决办法。
附上三张图片的下载地址
联系人：
‘http://ww4.sinaimg.cn/square/006bdQ7qjw1f14h428p3jj300p00p0sh.jpg‘,
坐标：
‘@L_404_1@‘,
动态：
‘http://ww3.sinaimg.cn/square/006bdQ7qjw1f14h44pk3wj300p00p0sh.jpg‘,
Dimensions
是一个处理尺寸的工具类，里边的api我们以后再学习，主要我也不会。。。
