React Native之TabBar的简单搭建

先上效果动态图

Untitled.gif

代码附上：

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

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

var test5 = React.createClass({
  
  //设置初始值
  getInitialState(){
    return{
      //默认选择的item
    selectTabBarItem:'home',
    }
  },
  
  
  render() {
    return (
            <View style={styles.container}>
            <View style={styles.headStyle}>
            <Text style={{color:'white'}}>Tab选项卡</Text>
            </View>
            
            
            <TabBarIOS
            barTintColor='black'
            //tintColor='purple'
            >
            
            {/*第一*/}
            <TabBarIOS.Item
            systemIcon="contacts"
            badge="3"
            title="张三"
            selected={this.state.selectTabBarItem == 'home'}
            onPress = {()=>{this.setState({selectTabBarItem:'home'})}}
            >
            <View style={[styles.commonViewStyle,{backgroundColor:'red'}] }>
            <Text style={{color:'white'}}>首页</Text>
            </View>
            
            </TabBarIOS.Item>
            
            
            
            {/*第2*/}
            <TabBarIOS.Item
            systemIcon="bookmarks"
            selected={this.state.selectTabBarItem == 'second'}
            onPress = {()=>{this.setState({selectTabBarItem:'second'})}}
            >
            <View style={[styles.commonViewStyle,{backgroundColor:'blue'}]}>
            <Text style={{color:'white'}}>2页</Text>
            </View>
            </TabBarIOS.Item>
            
            
            {/*第3*/}
            <TabBarIOS.Item
            systemIcon="downloads"
            selected={this.state.selectTabBarItem == 'three'}
            onPress = {()=>{this.setState({selectTabBarItem:'three'})}}
            >
            <View style={[styles.commonViewStyle,{backgroundColor:'yellow'}]}>
            <Text style={{color:'white'}}>3页</Text>
            </View>
            </TabBarIOS.Item>
            
            
            {/*第4*/}
            <TabBarIOS.Item
            systemIcon="search"
            selected={this.state.selectTabBarItem == 'four'}
            onPress = {()=>{this.setState({selectTabBarItem:'four'})}}
            >
            <View style={[styles.commonViewStyle,{backgroundColor:'purple'}]}>
            <Text style={{color:'white'}}>4页</Text>
            </View>
            </TabBarIOS.Item>
            
            
            </TabBarIOS>
            
            </View>
            );
  }
})

const styles = StyleSheet.create({
container: {
  
flex:1,
  
backgroundColor: '#F5FCFF',
},
headStyle:{
height:64,
backgroundColor:'black',
justifyContent:'center',
alignItems:'center'
},
commonViewStyle:{
flex:1,
justifyContent:'center',
alignItems:'center'
  
}
  
});

AppRegistry.registerComponent('test5', () => test5);