React Native带你实现scrollable-tab-view（五）

最新推荐文章于 2025-04-23 19:11:12 发布

原创

最新推荐文章于 2025-04-23 19:11:12 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍如何在React Native中实现scrollable-tab-view，通过使用scrollview包裹tab来实现滚动效果。通过动画控制底部线条的长度和位置，以达到跟随页面滑动的效果。在遇到特殊情况如最后一个tab时，进行了相应的逻辑处理，最终成功实现在滑动和点击时线条正确指向。

上一节React Native带你实现scrollable-tab-view（三）中我们最后实现了我们scrollable-tab-view的效果为：
这里写图片描述

比如有很多页面，我们的tabview需要跟随scrollview的滑动而滑动：

这里写图片描述

我们现在用的还是默认的tabview，比如我们多加一些页面，
这里写图片描述
这样肯定不行，我们需要的是上面的那种效果，所以每个view的flex=1这种模式肯定不适合了，我们需要用一个scrollview去包涵tab，使它也能滑动，所以也算是scrollable-tab-view的一个难点了，好啦～我们来一步一步实现一下scrollable-tab-view中的ScrollableTabBar.js。

我们先创建一个view叫ScrollableTabBar.js：

/**
 * @author YASIN
 * @version [React-Native Pactera V01, 2017/9/7]
 * @date 17/2/23
 * @description ScrollableTabBar
 */
import React, {
    Component
} from 'react';
import {
    View,
    Text,
    StyleSheet,
} from 'react-native';
export default class ScrollableTabBar extends Component {
   
   
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }

    render() {
        return (
            <View>
                <Text>ScrollableTabBar</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {}
});

然后替换掉index文件中的DefaultTabBar组件：

  /**
     * 渲染tabview
     * @private
     */
    _renderTabView() {
        let tabParams = {
            tabs: this._children().map((child)=>child.props.tabLabel),
            activeTab: this.state.currentPage,
            scrollValue: this.state.scrollValue,
            containerWidth: this.state.containerWidth,
        };
        return (
            <ScrollableTabBar
                {...tabParams}
                style={[{width: this.state.containerWidth}]}
                onTabClick={(page)=>this.goToPage(page)}
            />
        );
    }

这里写图片描述

然后我们开始实现ScrollableTabBar组件：

我们用一个scrollview去包裹tab,然后其它的东西直接copy一份DefaultTabBar的内容：

/**
 * @author YASIN
 * @version [React-Native Pactera V01, 2017/9/7]
 * @date 17/2/23
 * @description ScrollableTabBar
 */
import React, {
    Component
} from 'react';
im