ReactNative tarbarAndorid工具实战

/**
 * Sam+-ple React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
'use strict';
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TabBarIOS,
    Image,
    ScrollView,
    PixelRatio
} from 'react-native';
//import TestProject  from "./index.android"
import Dimensions from "Dimensions";
import TabNavigator from 'react-native-tab-navigator';
import Header from './header';
const TabNavigatorItem =TabNavigator.Item;
var width = Dimensions.get('window').width;
var height= Dimensions.get('window').height;
const TAB_NORMAL_1=require('./img/tabbar_1.png');
const TAB_NORMAL_2=require('./img/tabbar_2.png');
const TAB_NORMAL_3=require('./img/tabbar_3.png');
const TAB_PRESS_1=require('./img/tabbar_1_press.png');
const TAB_PRESS_2=require('./img/tabbar_2_press.png');
const TAB_PRESS_3=require('./img/tabbar_3_press.png');

export default class TestProject extends Component {
    onPress(tabName)
    {
        if(tabName)
        {
            this.setState(
                {
                    selectedTab:tabName,
                }
            )
        }
    }
    select(){
        this.setState({
            selectedTab: tabName
        });
    }
    constructor(){
        super();
        this.state = {
            selectedTab:'Home',
        };
    }
    renderTabView(title,tabName,tabContent,isBadge) {
        var tabNomal;
        var tabPress;
        switch (tabName) {
            case 'Home':
                tabNomal = TAB_NORMAL_1;
                tabPress = TAB_PRESS_1;
                break;
            case 'Video':
                tabNomal = TAB_NORMAL_2;
                tabPress = TAB_PRESS_2;
                break;
            case 'Mine':
                tabNomal = TAB_NORMAL_3;
                tabPress = TAB_PRESS_3;
                break;
            default:

        }
        return(
            <TabNavigatorItem
                title={title}
                renderIcon={()=><Image style={styles.tabIcon} source={tabNomal}/>}
                renderSelectedIcon={()=><Image style={styles.tabIcon} source={tabPress}/>}
                selected={this.state.selectedTab===tabName}
                selectedTitleStyle={{color:'#f85959'}}
                onPress={()=>this.onPress(tabName)}
                renderBadge={()=>isBadge?<View style={styles.badgeView}><Text style={styles.badgeText}>15</Text></View>:null}
            >


                <View style={{flex:1,justifyContent:'center',alignItems:'center'}}><Text>{tabContent}</Text></View>

            </TabNavigatorItem>
        );
    }
    tabBarView(){
        return (
            <View style={{flex:1}}>
                <Header></Header>
                <TabNavigator
                    tabBarStyle={styles.tab}
                >
                    {this.renderTabView('首页','Home','头条板块',false)}
                    {this.renderTabView('视频监控','Video','视频板块',false)}
                    {this.renderTabView('个人中心','Mine','关注板块',false)}
                </TabNavigator>
            </View>
        );
    }

    render(){
        var tabBarView=this.tabBarView();
        return (
            <View style={styles.container}>
                {tabBarView}
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#13f8c3',
        marginBottom: 5,
    },
    tab:{
        height: 52,
        alignItems:'center',
        backgroundColor:'#f4f5f6',
    },
    tabIcon:{
        width:25,
        height:25,
    },
    badgeView:{
        width:22,
        height:14 ,
        backgroundColor:'#d1f8b1',
        borderWidth:1,
        marginLeft:10,
        marginTop:3,
        borderColor:'#FFF',
        alignItems:'center',
        justifyContent:'center',
        borderRadius:8,
    },
    badgeText:{
        color:'#fff',
        fontSize:8,
    }
});
AppRegistry.registerComponent('TestProject', () => TestProject);