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,
            }
        }

    }
);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值