react-native 入门之标签栏(TabNavigator)的使用

简介

react-navigation分为三个部分。
StackNavigator类似顶部导航条，用来跳转页面和传递参数。
TabNavigator类似底部标签栏，用来区分模块。
DrawerNavigator抽屉导航，类似从App左侧滑出一个页面。

这篇主要介绍底部标签栏(TabNavigator)的简单使用。好了，废话不多说，直接切入正题吧。

属性配置

  以下介绍的只是本例程会涉及到的一些属性，关于更详细的介绍，请参阅这篇文章。

• screen：对应界面名称，可以在其他页面通过这个screen传值和跳转。
• tabBarIcon：设置标签栏的图标。
• tabBarLabel：设置标签栏的标题(title)。
• tabBarOptions：配置标签栏的一些属性。
• activeTintColor：label和icon的前景色 活跃状态下（选中） 。
• inactiveTintColor：label和icon的前景色 不活跃状态下(未选中)。
• showIcon：是否显示图标，默认关闭。最好设置一下。
• showLabel：是否显示label，默认开启。最好设置一下。
• upperCaseLabel：是否使标签大写，默认为true。
• pressColor：material涟漪效果的颜色。
• pressOpacity：按压标签的透明度变化。
• style：标签栏(tabbar)的样式。
• labelStyle：标签(label)的样式。
• indicatorStyle：android 中标签栏(TabBar)下面会显示一条线，高度设为 0 后就不显示线了。
• tabBarPosition：设置tabbar的位置，iOS默认在底部，安卓默认在顶部。（属性值：top，bottom）。
• swipeEnabled：是否允许在标签之间进行滑动。
• animationEnabled：是否在更改标签时显示动画。
• lazy：是否在app打开的时候将底部标签栏全部加载，默认false,推荐改成true哦。
• initialRouteName： 设置默认的页面组件。
• backBehavior：按 back 键是否跳转到第一个Tab(首页)， none 为不跳转。

小技巧

小技巧引自此处
 1、去掉安卓下的下划线，设置：tabBarOptions => indicatorStyle:{ height: 0 }；
 2、底部导航在导航最上方添加一条分割线，设置：tabBarOptions => style => borderTopWidth: 0.5, borderTopColor: '#ccc'；
 3、导航安卓图标和文字间隙比较大，手动调整小设置：tabBarOptions => labelStyle => margin: 0；

程序代码

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';
import { TabNavigator } from "react-navigation";

class Find extends Component {
    static navigationOptions = {
        tabBarLabel: '发现',
        tabBarIcon: ({ focused }) =>
        {
            if (focused) {
                return (
                    
                );
            }
            return (
                
            );
        },
    };

    render() {
        return (
            
                发现界面
            
        );
    }
}

class Me extends Component {
    static navigationOptions = {
        tabBarLabel: '我的',

        tabBarIcon: ({ focused }) =>
        {
            if (focused) {
                return (
                    
                );
            }
            return (
                
            );
        },
    };

    render() {
        return (
            
                我的界面
            
        );
    }
}

class Tong extends Component {
    static navigationOptions = {
        tabBarLabel: '通讯录',
        tabBarIcon: ({ focused }) =>
        {
            if (focused) {
                return (
                    
                );
            }
            return (
                
            );
        },
    };

    render() {
        return (
            
                通讯录界面
            
        );
    }
}

class Chat extends Component {
    static navigationOptions = {
        tabBarLabel: '聊天',

        tabBarIcon: ({ focused }) =>
        {
            if (focused) {
                return (
                    
                );
            }
            return (
                
            );
        },
    };

    render() {
        return (
            
                聊天界面
            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    tabBarIcon: {
        width: 24,
        height: 24,
    }
});


  export const MyApp = TabNavigator(
    {
        Chat: {
            screen: Chat,
        },
        Tong: {
            screen: Tong,
        },
        Find: {
            screen: Find,
        },
        Me: {
            screen: Me,
        },
    },
    {
        tabBarOptions: {
            activeTintColor: '#4BC1D2',
            inactiveTintColor: '#000',
            showIcon: true,
            showLabel: true,
            upperCaseLabel: false,
            pressColor: '#788493',
            pressOpacity: 0.8,
            style: {
                backgroundColor: '#fff',
                paddingBottom: 0,
                borderTopWidth: 0.5,
                borderTopColor: '#ccc',
            },
            labelStyle: {
                fontSize: 12,
                margin: 1
            },
            indicatorStyle: {height: 0},
        },
        tabBarPosition: 'bottom',
        swipeEnabled: true,
        animationEnabled: false,
        lazy: true,
        backBehavior: 'none',
    });

AppRegistry.registerComponent('work', () => MyApp);

效果图

 正常界面

正常界面

 点击时样式

点击时样式

 左右滑动切换界面

左右滑动切换界面