TabBarIOS，TabBarIOS.Item

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,TabBarIOS,} from 'react-native';



export default class App extends Component {
    constructor(props){
        super(props);
        this.state={
            selectedTabBarItem:'home'
        }

    }


render(){



      return(



            <View style={styles.container}>

          <View style={{alignItems: 'center'}}><Text>页面导航</Text></View>
          {/*底部选项*/}
          <TabBarIOS>
              {/*第一个*/}
              <TabBarIOS.Item
                  systemIcon="bookmarks"
                  badge="3"
                  selected={this.state.selectedTabBarItem== 'home'}
                  onPress={()=>{this.setState({selectedTabBarItem:'home'})}}


              >
                  <View style={{flex: 1, justifyContent: "center", backgroundColor: "yellow",alignItems:'center'}}>
                      <Text> 首页</Text>


                  </View>


              </TabBarIOS.Item>

              {/*第2个*/}
              <TabBarIOS.Item
                  systemIcon="contacts"

                  selected={this.state.selectedTabBarItem== 'downloads'}
                  onPress={()=>{this.setState({selectedTabBarItem:'downloads'})}}


              >
                  <View style={{flex: 1, justifyContent: "center", backgroundColor: "red",alignItems:'center'}}>
                      <Text> 第二页</Text>


                  </View>


              </TabBarIOS.Item>

              {/*第3个*/}
              <TabBarIOS.Item
                  systemIcon="favorites"
                  selected={this.state.selectedTabBarItem== 'search'}
                  onPress={()=>{this.setState({selectedTabBarItem:'search'})}}




              >
                  <View style={{flex: 1, justifyContent: "center", backgroundColor: "blue",alignItems:'center'}}>
                      <Text> 第3页</Text>


                  </View>


              </TabBarIOS.Item>

              {/*第4个*/}
              <TabBarIOS.Item
                  systemIcon="history"
                  selected={this.state.selectedTabBarItem== 'bookmarks'}
                  onPress={()=>{this.setState({selectedTabBarItem:'bookmarks'})}}


              >
                  <View style={{flex: 1, justifyContent: "center", backgroundColor: "green",alignItems:'center'}}>
                      <Text> 第4页</Text>


                  </View>


              </TabBarIOS.Item>


          </TabBarIOS>


      </View>
      )
  }

}
const styles = StyleSheet.create({
  container: {
    flex: 1,

    backgroundColor: '#F5FCFF',
  },

});