将下面的代码放入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);
