React Native之TabBar基礎使用

/**
 * 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';

export default class TabBar extends Component {

    constructor(pros){
        super(pros);
        this.state={
            //默认被选中的Item
            selectedTabBarItem:'home'
        }
    }

    render() {
        return (
        
            {/*头部*/}
            
                TabBar练习
            
            {/*选项卡*/}
            
                {/*第一个*/}
                {this.setState({selectedTabBarItem:'home'})}}
                >
                
                    首页
                
                
                {/*第二个*/}
                {this.setState({selectedTabBarItem:'second'})}}
                >
                
                    第二页
                
                
                {/*第三个*/}
                {this.setState({selectedTabBarItem:'three'})}}
                >
                
                    第三个
                
                
                {/*第四个*/}
                {this.setState({selectedTabBarItem:'four'})}}
                >
                
                    第四个
                
                

            


        
        );
    }
}

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