React Native 的组件之底部导航栏 TabBarIOS（一）

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 )