將下面的代碼放入index.ios.js 文件中預(yù)覽就可以看到你想要的了
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,
};
}
//進(jìn)行渲染頁面內(nèi)容
_renderContent(color: string,pageText: string,num?:number) {
return(
{pageText}
第{num}次重復(fù)渲染{pageText}
)
}
render() {
return(
TabBarIOS使用實(shí)例
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);
