react-native系列(15)导航篇：底部导航TabNavigator参数及使用详解

淩亂°似流年 2021-09-18 10:48 1336阅读 0赞

本篇主要介绍的是TabNavigator，假设你已经对它的用法已经有了基本的认识，或重新去官网看一下

官网地址：[https://reactnavigation.org/zh-Hans/][https_reactnavigation.org_zh-Hans]

底部导航TabNavigator的效果类似于微信，效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70][]

TabNavigator生成的底部导航的结构，它包括4部分：

*  选项卡栏
 *  选项卡
 *  图标
 *  标签文本

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70 1][]

# createBottomTabNavigator函数 #

使用createBottomTabNavigator函数来创建底部导航，它包括2个参数对象：第一个参数用来配置路由页面，第二个参数用来配置底部导航的信息，如样式等。

创建时，相关参数详解如下：

贴上完整代码：

import React, { Component } from 'react';
    import { View, Text } from 'react-native';
    import { HomeScreen, SettingsScreen } from './TabScreen';
    import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
    
    const rootTab = createBottomTabNavigator(
        {
            Home: HomeScreen,
            Settings: SettingsScreen,
        },
        {
            initialRouteName: 'Home', // 第一次加载时初始选项卡路由的 routeName
            order: ['Home', 'Settings'], // 定义选项卡顺序的 routeNames 数组
            backBehavior: 'initialRoute', // 触发navigation.goBack()方法时是否包括Tab页间切换的的返回操作，不包括为none，包括为initialRoute(默认包括)
            // tabBarComponent : (props) => {return <BottomTabBar {...props} />}, // 可选，覆盖用作标签栏的组件，一般会用不上
            tabBarOptions: {
                activeTintColor: 'red', // 活动选项卡标签文本和图标颜色
                activeBackgroundColor: '#FFFFFF', // 活动选项卡的背景色
                inactiveTintColor: 'gray', // 非活动选项卡的标签文本和图标颜色
                inactiveBackgroundColor: '#FFFFFF', // 非活动选项卡的背景色
                showLabel: true, // 是否显示选项卡的标签, 默认值为 true
                showIcon: true, // 是否显示 Tab 的图标，默认为false
                // 选项卡栏的样式
                style: {
                    borderTopColor: 'red',
                    height: 50
                }, 
                // 选项卡的默认样式
                tabStyle: {
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center'
                }, 
                // 选项卡标签文本的默认样式
                labelStyle: {
                    fontSize: 14
                }, 
                allowFontScaling: true // 允许标签字体自动缩放以对界面更友好，默认为: true
            },
            defaultNavigationOptions: ({ navigation }) => ({
                tabBarVisible: true, // true或false用于显示或隐藏标签栏，如果未设置，则默认为true
                // 选项卡 默认自定义图标
                // eslint-disable-next-line
                tabBarIcon: ({ focused, horizontal, tintColor }) => {
                    const { routeName } = navigation.state; // 选项卡名称
                    console.log(focused); // 是否处于活动状态,是为true
                    console.log(horizontal); // 是否处于横屏,是为true
                    console.log(tintColor); // 状态颜色值
                    let textStyle = {};
                    if(focused){
                        textStyle = {
                            color: 'red'
                        };
                    }
                    return(
                        <View>
                            <Text style={textStyle}>{routeName}-Icon</Text>
                        </View>
                    );
                },
                // 选项卡 默认自定义标签文本
                // eslint-disable-next-line
                // tabBarLabel: ({focused, tintColor}) => {
                //     const { routeName } = navigation.state; // 选项卡名称
                //     console.log(focused); // 是否处于活动状态,是为true
                //     console.log(tintColor); // 状态颜色值
                //     return(
                //         <View>
                //             <Text>{routeName}-Label</Text>
                //         </View>
                //     );
                // }
            })
        }
    );
    const AppNavigatorContainer  = createAppContainer(rootTab);
    
    class TabNavigator extends Component {
        render(){
            return(
                <View style={
       {flex:1}}>
                    <AppNavigatorContainer />
                </View>
            );
        }
    }
    
    export default TabNavigator;

上面代码的图标部分为了方便我用文本表示，这里建议用Image组件或引用Iconfont或svg图标。

另外，贴上其中一个Home页面代码：

import React from 'react';
    import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
    import PropTypes from 'prop-types';
    
    class HomeScreen extends React.Component {
      render() {
        const { navigation } = this.props;
        return (
            <View style={styles.viewContainer}>
                <Text style={styles.contextTextStyle}>HomeScreen!</Text>
                <TouchableOpacity 
                    style={styles.buttonContainer}
                    onPress={()=>{navigation.navigate('Settings');}}
                >
                    <Text>To SettingsScreen</Text>
                </TouchableOpacity>
            </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      viewContainer: {
          flex: 1, 
          alignItems: 'center', 
          justifyContent: 'center'
      },
      contextTextStyle: {
          fontSize: 30
      },
      buttonContainer: {
          backgroundColor: '#FFFFFF',
          borderRadius: 30,
          borderWidth: 1,
          height: 30,
          justifyContent: 'center',
          alignItems: 'center',
          padding: 5
      }
    });
    
    HomeScreen.propTypes = {
      navigation: PropTypes.object
    };
    
    export default HomeScreen;

效果：

![2019030902242796.gif][]

如果参照微信的需求，还有一种情况就是需要知道当前有多少条信息，并有个红色的小图标显示在右上角。如果按照上面那种自定义默认图标的方法将无法实现，因为它无法获取Home页面的状态值。那如果我们可以在Hemo页面中也能实现自定义图标不就可以了吗？对的，只要在Home中定义一个静态navigationOptions函数即可，修改上面的Hoem页面代码如下：

import React from 'react';
    import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
    import PropTypes from 'prop-types';
    
    class HomeScreen extends React.Component {
      static navigationOptions = ({ navigation }) => ({
        tabBarVisible: true, // true或false用于显示或隐藏标签栏，如果未设置，则默认为true
        // 选项卡 自定义图标
        // eslint-disable-next-line
        tabBarIcon: ({ focused, horizontal, tintColor }) => {
            const { routeName } = navigation.state; // 选项卡名称
            console.log(focused); // 是否处于活动状态,是为true
            console.log(horizontal); // 是否处于横屏,是为true
            console.log(tintColor); // 状态颜色值
            let textStyle = {};
            if(focused){
                textStyle = {
                    color: 'red'
                };
            }
            return(
                <View>
                    <Text style={textStyle}>{routeName}-Icon-信息({navigation.getParam('msg')})</Text>
                </View>
            );
        },
      })
    
      state = {
        msg: 100
      }
    
      componentDidMount() {
          this.props.navigation.setParams({ msg: this.state.msg });
      }
    
      render() {
        const { navigation } = this.props;
        return (
            <View style={styles.viewContainer}>
                <Text style={styles.contextTextStyle}>HomeScreen!</Text>
                <TouchableOpacity 
                    style={styles.buttonContainer}
                    onPress={()=>{navigation.navigate('Settings');}}
                >
                    <Text>To SettingsScreen</Text>
                </TouchableOpacity>
            </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      viewContainer: {
          flex: 1, 
          alignItems: 'center', 
          justifyContent: 'center'
      },
      contextTextStyle: {
          fontSize: 30
      },
      buttonContainer: {
          backgroundColor: '#FFFFFF',
          borderRadius: 30,
          borderWidth: 1,
          height: 30,
          justifyContent: 'center',
          alignItems: 'center',
          padding: 5
      }
    });
    
    HomeScreen.propTypes = {
      navigation: PropTypes.object
    };
    
    export default HomeScreen;

效果：

![20190309024809205.gif][]

[https_reactnavigation.org_zh-Hans]: https://reactnavigation.org/zh-Hans/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70]: /images/20210812/a0b1825c67a44821b931c7927d1caceb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70 1]: /images/20210812/9d210a61497c434ca29ec21993f300dc.png
[2019030902242796.gif]: /images/20210812/077b844d1a6d4a0d8ae0f1b7d1c02c8f.png
[20190309024809205.gif]: /images/20210812/82df103cade54d89971da9d7f9e44e4c.png