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

前言：项目中很多地方用到了react-native-scrollable-tab-view这个第三方框架，觉得有必要拿出来研究一下，因为其中也遇到了很多bug，哈哈！都是些小bug，这框架写的还是很牛逼的，所以就开启我们的scrollable-tab-view之旅吧。

先看一下react-native-scrollable-tab-view的效果图：

小伙伴貌似都比较熟悉此框架，主体分为两个部分：
一个是头部模块、另外一个是内容模块。
先说一下原理：
1、设置横向scrollview的pagingEnabled属性为true，使之有页面切换的效果。
2、监听横向scrollview的滑动，然后改变tabview的状态。

原理是不是soeasy呢？哈哈～ 只能说看起来很简单。

我们创建一个项目叫ScrollTabDemo，然后创建一个文件夹叫scrollabletab,然后组件里面摆放一个横向的scrollview，scrollview的pageeabled属性设置为true，然后放三个view：

/**
 * @author YASIN
 * @version [React-Native Pactera V01, 2017/9/5]
 * @date 2017/9/5
 * @description index
 */
import React, {
    Component
} from 'react';
import {
    View,
    Text,
    StyleSheet,
    ScrollView,
    Dimensions,
} from 'react-native';
const screenW = Dimensions.get('window').width;
const screenH = Dimensions.get('window').height;
export default class ScrollableTab extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }

    render() {
        return (
            <ScrollView
                style={styles.container}
                pagingEnabled={true}
                horizontal={true}
            >
                {['页面一', '页面二', '页面三'].map((item, index)=> {
                    return (
                        <Text
                            key={item+index}
                            style={{
                                width:screenW,
                                flex:1,
                            }}
                        >
                            {item}
                        </Text>
                    );
                })}
            </ScrollView>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        width: screenW,
        flex: 1,
        marginTop: 22,
    }
});

然后就可以玩起来了：

好吧～ 这样就完了吗？哈哈～革命还刚刚开始。

然后我们再把tabview加上：

/**
 * @author YASIN
 * @version [React-Native Pactera V01, 2017/9/5]
 * @date 2017/9/5
 * @description index
 */
import React, {
    Component
} from 'react';
import {
    View,
    Text,
    StyleSheet,
    ScrollView,
    Dimensions,
    TouchableOpacity,
} from 'react-native';
const screenW = Dimensions.get('window').width;
const screenH = Dimensions.get('window').height;
export default class ScrollableTab extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }

    render() {
        return (
            <View
                style={styles.container}
            >
                {/*渲染tabview*/}
                {this._renderTabView()}
                <ScrollView
                    style={styles.scrollStyle}
                    pagingEnabled={true}
                    horizontal={true}
                >
                    {['页面一', '页面二', '页面三'].map((item, index)=> {
                        return (
                            <Text
                                key={item + index}
                                style={{
                                    width: screenW,
                                    flex: 1,
                                }}
                            >
                                {item}
                            </Text>
                        );
                    })}
                </ScrollView>
            </View>
        );
    }

    /**
     * 渲染tabview
     * @private
     */
    _renderTabView() {
        return (
            <View
                style={styles.tabContainer}
            >
                {['页面一', '页面二', '页面三'].map((item, index)=> {
                    return (
                        <TouchableOpacity
                            key={item + index}
                            style={styles.tabStyle}
                        >
                            <Text>{item}</Text>
                        </TouchableOpacity>
                    );
                })}
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        width: screenW,
        flex: 1,
        marginTop: 22,
    },
    scrollStyle: {
        flex: 1,
    },
    tabContainer: {
        width: screenW,
        flexDirection: 'row',
        alignItems: 'center',
        height: 50,
    },
    tabStyle: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});

最后出来的效果是这样的：

嗯嗯，看着有那么点意思了，我们接下来要做的就是监听scrollview 的滚动，看它滑动到第几页了，然后选中我们的tabview，小伙伴可以先自己练练手哈～～ 欢迎入群，欢迎交流，大牛勿喷，下一节见！