TabBarIOS使用实例学习

将下面的代码放入index.ios.js 文件中预览就可以看到你想要的了

importReact,{Component}from'react';

import{AppRegistry,StyleSheet,Text,View,TabBarIOS,}from'react-native';

classTabBarIOSDemoextendsComponent{

constructor(props){

super(props);

this.state={

selectedTab:'历史',

notifCount:0,

presses:0,

};

}

//进行渲染页面内容

_renderContent(color: string,pageText: string,num?:number) {

return(

{pageText}

第{num}次重复渲染{pageText}

)

}

render() {

return(

TabBarIOS使用实例

style={{flex:1,alignItems:"flex-end"}}

tintColor="white"

barTintColor="darkslateblue">

title="自定义"

icon={require('./src/images/timer.png')}

selected={this.state.selectedTab==='自定义'}

onPress={()=>{

this.setState({

selectedTab:'自定义',

});

}}

>

{this._renderContent('#414A8C','自定义界面')}

systemIcon="history"

selected={this.state.selectedTab==='历史'}

badge={this.state.notifCount>0?this.state.notifCount:undefined}

onPress={()=>{

this.setState({

selectedTab:'历史',

notifCount:this.state.notifCount+1,

});

}}

>

{this._renderContent('#783E33','历史记录',this.state.notifCount)}

systemIcon="downloads"

selected={this.state.selectedTab==='下载'}

onPress={()=>{

this.setState({

selectedTab:'下载',

presses:this.state.presses+1

});

}}>

{this._renderContent('#21551C','下载页面',this.state.presses)}

);

}

}

conststyles= StyleSheet.create({

tabContent:{

flex:1,

alignItems:'center',

},

welcome:{

fontSize:20,

textAlign:'center',

marginTop:20,

},

tabText:{

color:'white',

margin:50,

},

});

AppRegistry.registerComponent('AwesomeProject',()=>TabBarIOSDemo);