React Native顶|底部导航使用小技巧

- 日理万妓 2023-10-17 21:03 46阅读 0赞

导航一直是App开发中比较重要的一个组件，ReactNative提供了两种导航组件供我们使用，分别是：NavigatorIOS和Navigator，但是前者只能用于iOS平台，后者在ReactNative0.44版本以后已经被移除了。

好在有人提供了更好的导航组件，就是我们今天要讲的react-navigation，并且ReactNative官方更推荐我们使用此组件。

本篇文章只讲解基础用法，如果你想了解更多，请戳这里->[戳我][Link 1]。

## 简介 ##

react-navigation主要包括导航，底部tab，顶部tab，侧滑等，分别为：

*  导航 -> StackNavigator
 *  底部或者顶部tab -> TabNavigator
 *  侧滑 -> DrawerNavigator

我们今天主要讲TabNavigator。

## 效果展示 ##

![172074-20170913172346985-291758482.gif][]

## 实现代码 ##

import React, { Component } from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Button,
        Text,
        View,
        Image,
        StatusBar
    } from 'react-native';
    import { StackNavigator, TabBarBottom, TabNavigator } from "react-navigation";
    
    
    class Home extends React.Component {
        static navigationOptions = {
            tabBarLabel: '热点',
            tabBarIcon: ({ focused, tintColor }) => (
                <Image
                    source={focused ? require('../res/images/hot_hover.png') : require('../res/images/hot.png')}
                    style={
       { width: 26, height: 26, tintColor: tintColor }}
                />
            )
        };
        render() {
            return (
                <View style={styles.container}>
                    <Text>！这是热点</Text>
                </View>
            );
        }
    }
    
    class Circle extends React.Component {
        static navigationOptions = {
            tabBarLabel: '圈子',
            tabBarIcon: ({ focused, tintColor }) => (
                <Image
                    source={focused ? require('../res/images/coterie.png') : require('../res/images/coterie.png')}
                    style={
       { width: 26, height: 26, tintColor: tintColor }}
                />
            )
        };
        render() {
            return (
                <View style={styles.container}>
                    <Text>！这是圈子</Text>
                </View>
            );
        }
    }
    
    class Tools extends React.Component {
        static navigationOptions = {
            tabBarLabel: '工具',
            tabBarIcon: ({ focused, tintColor }) => (
                <Image
                    source={focused ? require('../res/images/tool.png') : require('../res/images/tool.png')}
                    style={
       { width: 26, height: 26, tintColor: tintColor }}
                />
            )
        };
        render() {
            return (
                <View style={styles.container}>
                    <Text>！这是工具</Text>
                </View>
            );
        }
    }
    
    class Mypage extends React.Component {
        static navigationOptions = {
            tabBarLabel: '我的',
            tabBarIcon: ({ focused, tintColor }) => (
                <Image
                    source={focused ? require('../res/images/my_hover.png') : require('../res/images/my.png')}
                    style={
       { width: 26, height: 26, tintColor: tintColor }}
                />
            )
        };
        render() {
            return (
                <View style={styles.container}>
                    <Text>！这是我的</Text>
                </View>
            );
        }
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#fff',
        }
    });
    
    
    const MyApp = TabNavigator(
        {
            Home: {
                screen: Home,
            },
            Circle: {
                screen: Circle,
            },
            Tools: {
                screen: Tools,
            },
            Mypage: {
                screen: Mypage,
            },
        },
        {
            tabBarOptions: {
                activeTintColor: '#4BC1D2',
                inactiveTintColor: '#000',
                showIcon: true,
                showLabel: true,
                upperCaseLabel: false,
                pressColor: '#823453',
                pressOpacity: 0.8,
                style: {
                    backgroundColor: '#fff',
                    paddingBottom: 0,
                    borderTopWidth: 0.5,
                    borderTopColor: '#ccc',
                },
                labelStyle: {
                    fontSize: 12,
                    margin: 1
                },
                indicatorStyle: { height: 0 }, //android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了
            },
            tabBarPosition: 'bottom',
            swipeEnabled: false,
            animationEnabled: false,
            lazy: true,
            backBehavior: 'none',
        });
    
    module.exports = MyApp;

## 配置说明 ##

**NavigationOptions**  
当然，通过NavigationOptions来配置我们的tabBarItem:  
title - 标题  
tabBarVisible - 是否可见  
tabBarIcon - 配置图片，当然，完全可以不使用图片  
tabBarLabel - 也是配置标题，只不过title既能配置tab的标题，也能配置navigation的标题

**TabNavigatorConfig**   
tabBarComponent- 用作标签栏的组件，例如 （这是iOS上的默认设置）， （这是Android上的默认设置）TabBarBottomTabBarTop  
tabBarPosition- 标签栏的位置可以是或'top''bottom'  
swipeEnabled - 是否允许在标签之间进行滑动  
animationEnabled - 是否在更改标签时动画  
lazy - 是否根据需要懒惰呈现标签，而不是提前制作  
tabBarOptions - 配置标签栏，如下所示。  
几个选项被传递到底层路由器来修改导航逻辑：  
initialRouteName - 首次加载时初始标签路由的routeName  
order - 定义选项卡顺序的routeNames数组  
paths - 将routeName映射到路径配置，该配置将覆盖routeConfigs中设置的路径。  
backBehavior - 后退按钮是否会使Tab键切换到初始选项卡？如果是，否则设置。默认为行为。initialRoutenoneinitialRoute

**tabBarOptions for （iOS上的默认标签栏）TabBarBottom**  
activeTintColor - 活动标签的标签和图标颜色  
activeBackgroundColor - 活动选项卡的背景颜色  
inactiveTintColor - 非活动标签的标签和图标颜色  
inactiveBackgroundColor - 非活动标签的背景颜色  
showLabel - 是否显示标签的标签，默认为true  
style - 标签栏的样式对象  
labelStyle - 标签标签的样式对象  
tabStyle - 标签的样式对象

**tabBarOptions for （Android上的默认标签栏）TabBarTop**  
activeTintColor - 活动标签的标签和图标颜色  
inactiveTintColor - 非活动标签的标签和图标颜色  
showIcon - 是否显示标签的图标，默认值为false  
showLabel - 是否显示标签的标签，默认为true  
upperCaseLabel - 是否使标签大写，默认为true  
pressColor - 材质波纹颜色（Android> = 5.0）  
pressOpacity - 按压标签的不透明度（iOS和Android <5.0 only）  
scrollEnabled - 是否启用可滚动选项卡  
tabStyle - 标签的样式对象  
indicatorStyle - 标签指示器的样式对象（选项卡底部的行）  
labelStyle - 标签标签的样式对象  
iconStyle - 标签图标的样式对象  
style - 标签栏的样式对象

##  ##

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

[Link 1]: https://github.com/react-community/react-navigation
[172074-20170913172346985-291758482.gif]: https://images2017.cnblogs.com/blog/172074/201709/172074-20170913172346985-291758482.gif