ReactNative 进阶（十五）：应用 react-native-tab-navigator 实现底部导航栏

2022 年 1 月 14 日
本文字数：2391 字
阅读完需：约 8 分钟

一、简介

第三方组件库react-native-tab-navigator是用于在场景之间切换的选项卡栏，用JS编写以提供跨平台支持。它适用于iOS和Android。该组件与React Native 0.16和更高版本兼容。外观与本地导航器略有不同，但在某些方面会更好。也是纯JavaScript。

注：这是与TabNavigation不一样的，使用了ExNavigation，API和实现方式略有不同，不依赖于任何其他导航库。

二、应用

引入react-native-tab-navigator

使用npm i react-native-tab-navigator --save引入tab库，目前最新版本为0.3.4。

接着，我们在 MainScreen 类中将Tab控件import进来，具体代码如下：

import TabNavigator from 'react-native-tab-navigator';
export default class MainScreen extends Component {    render() {        return (            <View style={{flex:1}}>                <Header />                <TabNavigator>
                </TabNavigator>            </View>        );    }}

复制代码

TabNavigator样式设置

上面代码当中，TabNavigator继承于View类，除了可以和View控件一样设置外，它还具有其他一些独特属性，用于控制样式：

sceneStyle：场景样式，即Tab页容器的样式，可按View的style设置；
tabBarStyle：TabBar的样式，基本也可按照普通的style写法进行设置；
tabBarShadowStyle：TabBar阴影的样式，不过对于扁平化的设计，这个属性应该用处不大；
hidesTabTouch：bool类型，即是否隐藏Tab按钮的按下效果；

根据我们上面对TabBar样式的分析，可以按照如下样式，为TabNavigator指定tabBarStyle。

const styles = StyleSheet.create({    tab: {        height: 52,        backgroundColor: '#333333',        alignItems: 'center'    }});

复制代码

Item构建

TabNavigator的Item就是我们所看到的 5 个 Tab 按钮以及它们所对应的页面，这些页面在Android中可能以Fragment呈现，在iOS中可能以UIView呈现，而在React Native中，则是一个<View>，可以自己义，也可以直接放置其他控件。

这些Item在TabNavigator中，以<TabNavigator.Item>形式呈现，其可设置的相关属性如下：

renderIcon: 必填项，即图标，为function类型，所以这里需要用到Arrow Function;
renderSelectedIcon: 选中状态的图标，非必填，也是function类型;
badgeText: 即Tab右上角的提示文字，可为String或Number，类似 QQ 中Tab右上角的消息提示，非必填;
renderBadge: 提示角标渲染方式，function类型，类似render的使用，非必填;
title: 标题，String类型，非必填;
titleStyle: 标题样式，style类型，非必填;
selectedTitleStyle: 选中标题样式，style类型，非必填;
selected: bool型，是否选中状态，可使用setState进行控制，默认false;
onPress: function型，即点击事件的回调函数，这里需要控制的是state，而切换页面已经由控件本身帮我们实现好了
allowFontScaling: bool型，是否允许字体缩放，默认false;

对于所关心的页面切换，在TabNavigator.Item中，可将其置于<TabNavigator.Item>{<View/>}</TabNavigator.Item>之中，即作为Item的子元素存在，这里请注意：如果添加了一个Item，必须为其添加一个View，否则将无法运行！

接着，我们将相关的图标导入工程中，具体方法在上一篇博客中已经介绍，这里不再赘述。

为了代码的简洁，我们可以设计一个TabItem的渲染函数_renderTabItem.

这个函数可以为我们创建Item，所以我们必须提供图片资源（包括选中状态）、Tag（区分 Tab）、子元素View，那么函数代码就可以写成如下形式：

_renderTabItem(img, selectedImg, tag, childView) {  return (    <TabNavigator.Item      selected={this.state.selectedTab === tag}      renderIcon={() => <Image style={styles.tabIcon} source={img}/>}      renderSelectedIcon={() => <Image style={styles.tabIcon} source={selectedImg}/>}      onPress={() => this.setState({ selectedTab: tag })}>      {childView}    </TabNavigator.Item>  );}

复制代码

注意点：如果使用本地图片，即在<Image>中，source属性内使用require的形式引用图片，由于js本身的性质，不可以使用动态的require，而应该直接把require后的图片资源当做参数传递！而使用uri形式获取在线资源不受影响！

在上面的代码中，由于TabBar控件的问题，可以在tabIcon样式中，控制Icon的上边距，以达到居中效果，代码如下：

tabIcon: {        width: 30,        height: 35,        resizeMode: 'stretch',        marginTop: 10    }

复制代码

根据设计的函数，现在就可以方便地创建 Tab 了：

<TabNavigator hidesTabTouch={true} tabBarStyle={styles.tab}>    {this._renderTabItem(HOME_NORMAL, HOME_FOCUS, HOME, this._createChildView(HOME))}    {this._renderTabItem(CATEGORY_NORMAL, CATEGORY_FOCUS, CATEGORY, this._createChildView(CATEGORY))}    {this._renderTabItem(FAXIAN_NORMAL, FAXIAN_FOCUS, FAXIAN, this._createChildView(FAXIAN))}    {this._renderTabItem(CART_NORMAL, CART_FOCUS, CART, this._createChildView(CART))}    {this._renderTabItem(PERSONAL_NORMAL, PERSONAL_FOCUS, PERSONAL, this._createChildView(PERSONAL))}  </TabNavigator>

复制代码

这里说明几点：

由于在onPress函数中调用了this.setState，所以必须在类的使用构造函数，并对state进行初始化：

constructor(props) {  super(props);  this.state = {selectedTab: HOME}}

复制代码

_createChildView仅仅为了区分Tab的切换，以后需要换成不同的View，这里给出代码：

_createChildView(tag) {  return (    <View style={{flex:1,backgroundColor:'#00baff',alignItems:'center',justifyContent:'center'}}>        <Text style={{fontSize:22}}>{tag}</Text>    </View>  )}

复制代码

此时，应用react-native-tab-navigator构建的Tab大功告成！