import React,{Component}from 'react'; import { AppRegistry, StyleSheet, Text, View, TabBarIOS, } from 'react-native'; import History from './History' class TabBarIOSDemo extends Component { constructor(props){ super(props); this.state={ selectedTab: '发现', notifCount: 0, presses: 0, }; } //进行渲染页面内容 _renderContent(color: string, pageText: string, num: number) { return ( <View style={[styles.tabContent, {backgroundColor: color}]}> <Text style={styles.tabText}>{pageText}</Text> </View> ); } render() { return ( <View style={{flex:1}}> <TabBarIOS style={{flex:1,alignItems:"flex-end"}} tintColor="green"/*被选中状态颜色图片和文字*/ barTintColor="#000"> <TabBarIOS.Item title="主页" icon={require('./img/1.png')} selected={this.state.selectedTab === '主页'} onPress={() => { this.setState({ selectedTab: '主页', }); }} > {this._renderContent('#414A8C', 'one')} </TabBarIOS.Item> <TabBarIOS.Item title="发现" icon={require('./img/2.png')} selected={this.state.selectedTab === '发现'} onPress={() => { this.setState({ selectedTab: '发现', notifCount: this.state.notifCount + 1, }); }} > {this._renderContent('#cccccc', '发现', this.state.notifCount)} </TabBarIOS.Item> <TabBarIOS.Item title="我的" icon={require('./img/3.png')} 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)} </TabBarIOS.Item> <TabBarIOS.Item title="信息" icon={require('./img/4.png')} selected={this.state.selectedTab === '下载'} onPress={() => { this.setState({ selectedTab: '下载', presses: this.state.presses + 1 }); }}> {this._renderContent('#21551C', '下载页面', this.state.presses)} </TabBarIOS.Item> </TabBarIOS> </View> ); } } const styles = StyleSheet.create({ tabContent: { flex: 1, alignItems: 'center', }, welcome: { fontSize: 20, textAlign: 'center', marginTop: 20, }, tabText: { color: 'white', margin: 50, }, }); AppRegistry.registerComponent('Allen', () => TabBarIOSDemo )