React Native-11.React Native TabBarIOS TabBarIOS.Item组件详
发布时间:2020-12-15 04:40:07 所属栏目:百科 来源:网络整理
导读:TabBarIOS组件简介 等同于iOS中的UITabBar TabBarIOS 组件属性介绍: barTintColor: Tab栏的背景颜色。 tintColor : 当我们选中了某一个Tab时,该Tab的图标颜色。 translucent : Tab栏是否透明。 TabBarIOS.Item组件简介 等同于iOS中UITabBarItem badge :
TabBarIOS组件简介等同于iOS中的UITabBar
TabBarIOS.Item组件简介等同于iOS中UITabBarItem
来个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);
附上三张图片的下载地址 Dimensions是一个处理尺寸的工具类,里边的api我们以后再学习,主要我也不会。。。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |