React Native实现android的tablayout：TabNavigator（1.0和2.0的区别）

1.效果图

2.代码

import React, {Component} from 'react';
import {
    TabNavigator,
} from 'react-navigation';
import {
    Image,
} from 'react-native';
import PayView from "./PayView";
import MainView from "./MainView";
import TaskMoneyView from './TaskMoneyView'
import MyView from './MyView'
const Dimensions = require('Dimensions'); //必须要写这一行，否则报错，无法找到这个变量
const ScreenWidth = Dimensions.get('window').width;
const ScreenHeight = Dimensions.get('window').height;
const TabNav = TabNavigator({


        MainView: {
            screen: MainView,
            navigationOptions: ({navigation}) => ({
                tabBarLabel: '首页',
                tabBarIcon: ({tintColor, focused}) => (
                    <Image style={{width: 25, height: 25}}
                           source={focused ? require('../image_jingdong/mian_press.png') : require('../image_jingdong/main.png')}></Image>
                )

            }),
        },

        PayView: {
            screen: PayView,
            navigationOptions: ({navigation}) => ({
                tabBarLabel: '支付',
                tabBarIcon: ({tintColor, focused}) => (
                    <Image style={{width: 25, height: 25}}
                           source={focused ? require('../image_jingdong/pay_press.png') : require('../image_jingdong/pay.png')}></Image>
                )
            }),
        },

        TaskMoneyView: {
            screen: TaskMoneyView,
            navigationOptions: ({navigation}) => ({
                tabBarLabel: '谈钱',
                tabBarIcon: ({tintColor, focused}) => (
                    <Image style={{width: 25, height: 25}}
                           source={focused ? require('../image_jingdong/task_press.png') : require('../image_jingdong/task.png')}></Image>
                )
            }),
        },
        MyView: {
            screen: MyView,
            navigationOptions: ({navigation}) => ({
                tabBarLabel: '我',
                tabBarIcon: ({tintColor, focused}) => (
                    <Image style={{width: 25, height: 25}}
                           source={focused ? require('../image_jingdong/my_press.png') : require('../image_jingdong/my.png')}></Image>
                )
            }),
        },
    },
    {
        // 位置，可以在顶部
        tabBarPosition: 'bottom',
        //是否可以滑动切换
        swipeEnabled: true,
        //切换是否有动画
        animationEnabled: true,
        //首页
        initialRouteName: 'MainView',
        //对于导航的设置
        tabBarOptions: {
            //选中时的颜色，可以用来设置图片和文字，自动设置的
            activeTintColor: '#000000',
            //未选中的颜色
            inactiveTintColor: 'gray',
            //android特有下划线的颜色
            indicatorStyle: {height: 0},
            //文字的样式
            labelStyle: {
                fontSize: 10
            },
            //是否显示图标，默认不显示
            showIcon: true,
            //是否显示文字
            showLabel: true,
            //对于导航的stytle
            style :{
                borderTopColor:'#ebebeb',
                borderTopWidth:1,
                backgroundColor:'white',
                height:ScreenHeight*0.08,
            }
        }

    }
);
export default class TabNav_Home extends React.Component {
    render() {
        return (
            <TabNav />
        );
    }

}

3.18.05.09升级到2.0,结果报错，修改如下：

在返回TabNav的时候不能像1.0+呢样写作<TabNav/>，而应该直接export default TabNav

//这是2.0的正确写法
export default TabNav;

4.创建的方法也有改动，如下：

import {
    createBottomTabNavigator,
} from 'react-navigation';

const TabNav = createBottomTabNavigator({
        MainView: {
            screen: MainView,
            navigationOptions: ({navigation}) => ({
                tabBarLabel: '首页',
                tabBarIcon: ({tintColor, focused}) => (
                    <Image style={{width: 25, height: 25}}
                           source={focused ? require('../image_jingdong/mian_press.png') : require('../image_jingdong/main.png')}></Image>
                )

            }),
        },

        PayView: {
            screen: PayView,
            navigationOptions: ({navigation}) => ({
                tabBarLabel: '支付',
                tabBarIcon: ({tintColor, focused}) => (
                    <Image style={{width: 25, height: 25}}
                           source={focused ? require('../image_jingdong/pay_press.png') : require('../image_jingdong/pay.png')}></Image>
                )
            }),
        },

        TaskMoneyView: {
            screen: TaskMoneyView,
            navigationOptions: ({navigation}) => ({
                tabBarLabel: '谈钱',
                tabBarIcon: ({tintColor, focused}) => (
                    <Image style={{width: 25, height: 25}}
                           source={focused ? require('../image_jingdong/task_press.png') : require('../image_jingdong/task.png')}></Image>
                )
            }),
        },
        MyView: {
            screen: MyView,
            navigationOptions: ({navigation}) => ({
                tabBarLabel: '我',
                tabBarIcon: ({tintColor, focused}) => (
                    <Image style={{width: 25, height: 25}}
                           source={focused ? require('../image_jingdong/my_press.png') : require('../image_jingdong/my.png')}></Image>
                )
            }),
        },
    },
    {
        // // 位置，可以在顶部
        tabBarPosition: 'bottom',
        //是否可以滑动切换
        swipeEnabled: false,
        //切换是否有动画
        animationEnabled: true,
        //首页
        initialRouteName: 'MainView',
        //对于导航的设置
        tabBarOptions: {
            //选中时的颜色，可以用来设置图片和文字，自动设置的
            activeTintColor: '#000000',
            //未选中的颜色
            inactiveTintColor: 'gray',
            //android特有下划线的颜色
            indicatorStyle: {height: 0},
            //文字的样式
            labelStyle: {
                fontSize: 10
            },
            //是否显示图标，默认不显示
            showIcon: true,
            //是否显示文字
            showLabel: true,
            //对于导航的stytle
            style: {
                borderTopColor: '#ebebeb',
                borderTopWidth: 1,
                backgroundColor: 'white',
                height: ScreenHeight * 0.08,
            }
        }

    }
);