react-navigation实现tabbar源码记录

import React, { Component } from 'react'
import { View, StyleSheet, Text, Image, StatusBar } from 'react-native'
import { StackNavigator, TabNavigator } from 'react-navigation'
import px2dp from '../utils/px2dp';
import Home from './Home/home'
import User from './User/user'
import City from './City/city'
import Classm from './Home/classmore'
const TabNav = TabNavigator({
    Home: {
        screen: Home,
        navigationOptions: ({ navigation }) => ({
            tabBarLabel: '首页',
            tabBarIcon: ({ tintColor }) => (
                <Image
                    source={require('../assets/images/icon_tabnav-4.png')}
                    style={[styles.icon, { tintColor: tintColor }]}
                />
            )
        })
    },
    City: {
        screen: City,
        navigationOptions: ({ navigation }) => ({
            tabBarLabel: '同城',
            tabBarIcon: ({ tintColor }) => (
                <Image
                    source={require('../assets/images/icon_tabnav-1.png')}
                    style={[styles.icon, { tintColor: tintColor }]}
                />
            )
        }),
    },
    User: {
        screen: User,
        navigationOptions: ({ navigation }) => ({
            tabBarLabel: '我的',
            tabBarIcon: ({ tintColor }) => (
                <Image
                    source={require('../assets/images/icon_tabnav-5.png')}
                    style={[styles.icon, { tintColor: tintColor }]}
                />
            )
        }),
    }
}, {
        tabBarPosition: 'bottom',
        swipeEnabled: false,
        animationEnabled: true,
        lazy: true,
        backBehavior: 'none',
        tabBarOptions: {
            activeTintColor: 'rgb(22,131,251)',
            inactiveTintColor: '#959595',
            pressColor: 'rgb(22,131,251)',
            style: { backgroundColor: '#ffffff', height: px2dp(98),borderTopColor:'#e6e6e6',borderTopWidth:1},
            indicatorStyle: { height: 1 },
            showIcon: true,
            labelStyle: {
                fontSize: px2dp(20),
                marginTop: px2dp(4)
            },
            iconStyle: {
                width: px2dp(48),
                height: px2dp(42)
            }
        }
    })

const Navigator = StackNavigator({
    TabNav: { screen: TabNav },
    Classm:{screen:Classm}
})

const styles = StyleSheet.create({
    icon: {
        width: px2dp(48),
        height: px2dp(42),
        resizeMode: 'contain'
    }
});

export default class App extends Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <StatusBar backgroundColor="rgba(0,0,0,0.1)" translucent={true} />
                <Navigator />
            </View>
        )
    }
}