createMaterialBottomTabNavigator

import React, {Component} from 'react';
import {createStackNavigator, createMaterialTopTabNavigator, Header} from 'react-navigation';
import {createMaterialBottomTabNavigator} from 'react-navigation-material-bottom-tabs';
import {TabNavigator} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation';
import {Dimensions, Animated, Text, View, Button, Image} from 'react-native';
import HomePage from './pages/mainContent/home'
import AbnormalManagement from './pages/mainContent/abnormalManagement'
import Order from './pages/mainContent/Order'
import Ionicons from 'react-native-vector-icons/Ionicons'
import My from './pages/mainContent/my'
//header 需导入
const ImageHeader = props => (
    <View>
        <Image
            style={{position: "absolute", zIndex: -1, width: "100%", height: "100%", resizeMode: "cover"}}
            source={require('../../public/img/login/1-login_03.png')}
        />
        <Header {...props} style={{backgroundColor: "transparent"}}/>
    </View>
);

// createBottomTabNavigator或者createMaterialTopTabNavigator，对应的标签栏位置
const BottomTabBar = createMaterialBottomTabNavigator({
    首页: {
        screen: HomePage,
        navigationOptions: ({navigation}) => ({
            tabBarColor: '#3F51B5',
            tabBarIcon: ({focused, tintColor}) => {
                return  focused ? <Image style={{width: 40, height: 33}} source={require('../../public/img/login/1-login_04.png')}/> : <Image style={{width: 40, height: 33}} source={require('../../public/img/login/1-login_03.png')}/>
            },
            title: '首页',
        })
    },
    my: {
        screen: My,
        navigationOptions: ({navigation}) => ({
            tabBarColor: '#3F51B5',
            tabBarIcon: ({focused, tintColor}) => {
                const {routeName} = navigation.state;
                let iconName;
                if (routeName === 'home') {
                    iconName = `ios-home${focused ? '' : '-outline'}`;
                } else if (routeName === 'my') {
                    iconName = `ios-options${focused ? '' : '-outline'}`;
                }
                return <Ionicons name={iconName} size={25} color={tintColor}/>
                },
            title: '我的',
        })
    },
    异常管理: {
        screen: AbnormalManagement,
        navigationOptions: ({navigation}) => ({
            tabBarColor: '#3F51B5',
            tabBarIcon: ({focused, tintColor}) => {
                return <Ionicons name={focused ?'ios-home-outline':'ios-options-outline'} size={25} color={tintColor}/>
            },
            title: '异常管理',
        })
    },
}, {
    initialRouteName: '首页',
    shifting: true,
    activeTintColor: '#ffffff',
    inactiveTintColor: '#eeeeee',
    barStyle: {
        backgroundColor: '#4177F6',
        paddingBottom: 20,
        height: 50
    },
    backBehavior: 'home'
});
export default BottomTabBar;