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

上一节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';
import {
    View,
    Text,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    ScrollView,
    Animated,
} from 'react-native';
const screenW = Dimensions.get('window').width;
const screenH = Dimensions.get('window').height;
export default class ScrollableTabBar extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }

    render() {
        let {containerWidth, tabs, scrollValue}=this.props;
        //给传过来的动画一个插值器
        const left = scrollValue.interpolate({
            inputRange: [0, 1,], outputRange: [0, containerWidth / tabs.length,],
        });
        let tabStyle = {
            width: 50,
            position: 'absolute',
            bottom: 0,
            left,
        };
        return (
            <View style={[styles.container, this.props.style]}>
                <ScrollView
                    automaticallyAdjustContentInsets={false}
                    ref={(scrollView) => {
                        this._scrollView = scrollView;
                    }}
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    showsVerticalScrollIndicator={false}
                    directionalLockEnabled={true}
                    bounces={false}
                    scrollsToTop={false}
                >
                    <View
                        style={styles.tabContainer}
                    >
                        {tabs.map((tab, index)=> {
                            return this._renderTab(tab, index, index === this.props.activeTab);
                        })}
                        <Animated.View
                            style={[styles.tabLineStyle, tabStyle]}
                        />
                    </View>
                </ScrollView>
            </View>
        );
    }

    /**
     * 渲染tab
     * @param name 名字
     * @param page 下标
     * @param isTabActive 是否是选中的tab
     * @private
     */
    _renderTab(name, page, isTabActive) {
        let tabTextStyle = null;
        //如果被选中的style
        if (isTabActive) {
            tabTextStyle = {
                color: 'green'
            };
        } else {
            tabTextStyle = {
                color: 'red'
            };
        }
        let self = this;
        return (
            <TouchableOpacity
                key={name + page}
                style={[styles.tabStyle]}
                onPress={()=>this.props.onTabClick(page)}
            >
                <Text style={[tabTextStyle]}>{name}</Text>
            </TouchableOpacity>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        width: screenW,
        height: 50,
    },
    tabContainer: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    tabLineStyle: {
        height: 1,
        backgroundColor: 'navy',
    },
    tabStyle: {
        height: 49,
        alignItems: 'center',
        justifyContent: 'center',
        paddingHorizontal: 20,
    },
});

然后我们运行代码：
这里写图片描述

可以看到，有点那种感觉了，但是我们目前看到的东西需要解决的就是：
1、底部那个线条长度计算（目前是定死了一个值）

 render() {
       ....
        let tabStyle = {
            width: 50,
            position: 'absolute',
            bottom: 0,
            left,
        };
        ...

我们线条的长度应该等于当前tab的宽度。

2、我们页面滑动的时候，线条指向有问题。

好了～我们一个一个的解决，我们把下标线view的left跟宽度用两个单独的动画控制，然后监听内容scrollview的scrollValue动画滑动改变控制left和控制width的动画值：

export default class ScrollableTabBar extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            _leftTabUnderline: new Animated.Value(0),
            _widthTabUnderline: new Animated.Value(0),
        };
    }

    render() {
        let {containerWidth, tabs, scrollValue}=this.props;
        //给传过来的动画一个插值器
        let tabStyle = {
            width: this.state._widthTabUnderline,
            position: 'absolute',
            bottom: 0,
            left: this.state._leftTabUnderline,
        };
        return (
            <View style={[styles.container, this.props.style]}>
                <ScrollView
                    ....
                >
                    <View
                        style={styles.tabContainer}
                    >
                        ...
                        <Animated.View
                            style={[styles.tabLineStyle, tabStyle]}
                        />
                    </View>
                </ScrollView>
            </View>
        );
    }

然后跟前一节我们实现的DefaultTabBar.js一样，监听scrollValue动画：

componentDidMount() {
        this.props.scrollValue.addListener(this._updateView);
    }

 /**
     * 根据scrollview的滑动改变底部线条的宽度跟left
     * @param value
     * @private
     */
    _updateView = ({value = 0}) => {
        //因为value 的值是[0-1-2-3-4]变换
        const position = Math.floor(value);
        //取小数部分
        const offset = value % 1;
        const tabCount = this.props.tabs.length;
        const lastTabPosition = tabCount - 1;
        //如果没有tab||（有bounce效果）直接return
        if (tabCount === 0 || value < 0 || value > lastTabPosition) {
            return;
        }
        console.log('position==>' + position + ' offset==>' + offset);
    }

我们运行然后从第一页滑动到第二页：
这里写图片描述

可以看到，我们position是从（0-1）而offset为0–>1的一个小数，所以我们：
1、底部线条view的宽度应该为(第position页tab宽度)*(1-offset)+(第positon+1页tab的宽度)*offset。
2、底部线条view的left应该为（第position页tab的x轴）+（第position+1页tab的宽度）*offset。

所以我们接下来要做的就是通过o nLayout方法计算出每个tab的x轴跟宽度然后保存起来。

我们在渲染tabbar的时候提供view o nLayout方法去测量view：

 /**
     * 渲染tab
     * @param name 名字
     * @param page 下标
     * @param isTabActive 是否是选中的tab
     * @private
     */
    _renderTab(name, page, isTabActive) {
        ....
        let self = this;
        return (
            <TouchableOpacity
               .....
                onLayout={(event)=>this._onMeasureTab(page, event)}
            >
                <Text style={[tabTextStyle]}>{name}</Text>
            </TouchableOpacity>
        );
    }

每次测量完毕后去更新tab底部线view的宽度：

/**
     * 测量tabview
     * @param page 页面下标
     * @param event 事件
     * @private
     */
    _onMeasureTab(page, event) {
        let {nativeEvent:{layout:{x, width}}}=event;
        this._tabsMeasurements[page] = {left: x, right: width + x, width: width};
        this._updateView({value: this.props.scrollValue._value})
    }

按照我们前面所说的“1、底部线条view的宽度应该为(第position页tab宽度)*(1-offset)+(第positon+1页tab的宽度)*offset。”所以我们必须要拿到tab的测量值，并且有下一个tab，或者特殊情况就是到最后一个tab了，最后才去做改变width的操作。

 /**
     * 根据scrollview的滑动改变底部线条的宽度跟left
     * @param value
     * @private
     */
    _updateView = ({value = 0}) => {
        //因为value 的值是[0-1-2-3-4]变换
        const position = Math.floor(value);
        //取小数部分
        const offset = value % 1;
        const tabCount = this.props.tabs.length;
        const lastTabPosition = tabCount - 1;
        //如果没有tab||（有bounce效果）直接return
        if (tabCount === 0 || value < 0 || value > lastTabPosition) {
            return;
        }
        if (this._necessarilyMeasurementsCompleted(position, position === tabCount - 1)) {
            this._updateTabLine(position, offset);
        }
    }

  /**
     * 判断是否需要跟新的条件是否初始化
     * @param position
     * @param isLast 是否是最后一个
     * @private
     */
    _necessarilyMeasurementsCompleted(position, isLast) {
        return (
            this._tabsMeasurements[position] &&
            (isLast || this._tabsMeasurements[position + 1])
        );
    }

然后套去我们前面说的公式：

(第position页tab宽度)*(1-offset)+(第positon+1页tab的宽度)*offset
但是有一种特殊情况，就是position+1不存在，所以我们要做好判断：

 /**
     * 更新底部线view的left跟width
     * @param position
     * @param offset
     * @private
     */
    _updateTabLine(position, offset) {
        //当前tab的测量值
        const currMeasure = this._tabsMeasurements[position];
        //position+1的tab的测量值
        const nextMeasure = this._tabsMeasurements[position + 1];
        let width = currMeasure.width * (1 - offset);
        if (nextMeasure) {
            width += nextMeasure.width * offset;
        }
        this.state._widthTabUnderline.setValue(width);
    }

然后我们运行代码：
这里写图片描述

可以看到，我们滑动的时候tab底部线条的宽度再改变，宽度=我们的tab的宽度，好啦！！我们接着只要使线条view的left跟着scrollview滑动而改变到对应的tab位置就可以了。

我们继续套入公式：

（第position页tab的x轴）+（第position+1页tab的宽度）*offset

/**
     * 更新底部线view的left跟width
     * @param position
     * @param offset
     * @private
     */
    _updateTabLine(position, offset) {
        //当前tab的测量值
        const currMeasure = this._tabsMeasurements[position];
        //position+1的tab的测量值
        const nextMeasure = this._tabsMeasurements[position + 1];
        let width = currMeasure.width * (1 - offset);
        let left= currMeasure.left;
        if (nextMeasure) {
            width += nextMeasure.width * offset;
            left+=nextMeasure.width*offset;
        }
        this.state._leftTabUnderline.setValue(left);
        this.state._widthTabUnderline.setValue(width);
    }

然后运行代码：

这里写图片描述

好啦！可以看到，我们底部线条view可以跟随了，到这我们还差最后一步，那就是当我们点击tab的时候如果后面的tab被遮住了就得向后移动。

有点晚了，该洗洗睡啦～～

欢迎入群，欢迎交流，大牛勿喷，下一节见！

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

猜你喜欢