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

r囧r小猫 2023-01-19 03:28 30阅读 0赞

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

### 文章目录 ###

*   *  简介
     *  应用

--------------------

## 简介 ##

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

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

## 应用 ##

1.引入`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>
            );
        }
    }

2.`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'
        }
    });

3.`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>

这里说明几点：

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

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

1.  `_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大功告成！