React Native—使用ScrollableTabView实现APP底部导航栏（带消息圆点）

icon_selected color：#d81e06

icon_unselected color：#515151

一、前言

这段时间在公司开始搞React Native开发，要对APP的主页底部导航栏进行替换，寻找了多种方法，最后使用react-native-scrollable-tab-view库的ScrollableTabView实现了想要的功能（控制Tab页面的显示和隐藏、带消息圆点指示器）。

组件的地址：https://www.npmjs.com/package/react-native-scrollable-tab-view

二、效果图

 

消息圆点位置、样式可以自行设置参数来调整。

三、自定义的tabBar组件（关键代码）

实现这个导航栏的关键点在于自定义的tabBar组件。这个组件里面实现选中页面和非选中页面的图标切换和消息圆点的渲染，很多控制逻辑都封装在了里面。以下是自定义组件的代码（各位可根据需要自行改造）：

import React from 'react';

import PropTypes from 'prop-types';

import {

    View,

    Text,

    Button,

    Image,

    StyleSheet,

    TouchableOpacity,

    ViewPropTypes

} from 'react-native';



import {

    Badge

} from 'teaset';



/**

 * 2018-11-10

 * chenlw

 * work：自定义ScrollableTabViewPage的TabBar

 */

export default class MyTabBar extends React.Component {



    propTypes = {

        goToPage: PropTypes.func, // 跳转到对应tab的方法

        activeTab: PropTypes.number, // 当前被选中的tab下标

        tabs: PropTypes.array, // 所有tabs集合

        goToPage: PropTypes.func,

        backgroundColor: PropTypes.string,

        activeTextColor: PropTypes.string,

        inactiveText