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

上一节React Native带你实现scrollable-tab-view（一）中我们最后实现了我们scrollable-tab-view的效果为：

代码为：

/**
 * @author YASIN
 * @version [React-Native Pactera V01, 2017/9/5]
 * @date 2017/9/5
 * @description index
 */
......

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

作为一个第三方性的组件，这样写耦合性太高，不太容易复用，所以我们改改：
index.js：

export default class ScrollableTab extends Component {
    static propTypes = {}
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }

    render() {
        return (
            <View
                style={styles.container}
            >
                {/*渲染tabview*/}
                {this._renderTabView()}
                {/*渲染主体内容*/}
                {this._renderScrollableContent()}
            </View>
        );
    }

    /**
     * 渲染tabview
     * @private
     */
    _renderTabView() {
        let tabParams = {
            tabs: this._children().map((child)=>child.props.tabLabel),
        };
        return (
            <DefaultTabBar
                {...tabParams}
            />
        );
    }

    /**
     * 渲染主体内容
     * @private
     */
    _renderScrollableContent() {
        return (
            <Animated.ScrollView
                style={styles.scrollStyle}
                pagingEnabled={true}
                horizontal={true}
            >
                {this.props.children}
            </Animated.ScrollView>
        );
    }

    /**
     * 获取子控件数组集合
     * @param children
     * @returns {*}
     * @private
     */
    _children(children = this.props.children) {
        return React.Children.map(children, (child)=>child);
    }
}

然后把之前的渲染_renderTabView的代码变成了一个单独的组件DefaultTabBar.js，然后传入tabs即为我们需要的tab内容：

DefaultTabBar.js：

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

    render() {
        return (
            <View style={styles.container}>
                {this.props.tabs.map((name, page) => {
                    return this._renderTab(name, page);
                })}
            </View>
        );
    }

    /**
     * 渲染tab
     * @param name 名字
     * @param page 下标
     * @private
     */
    _renderTab(name, page) {
        return (
            <TouchableOpacity
                key={name + page}
                style={styles.tabStyle}
            >
                <Text>{name}</Text>
            </TouchableOpacity>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        width: screenW,
        flexDirection: 'row',
        alignItems: 'center',
        height: 50,
    },
    tabStyle: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});

然后我们用的时候只需要渲染自己的内容模块就可以了：

export default class ScrollTabDemo extends Component {
    render() {
        return (
            <View style={styles.container}>
                <ScrollableTab>
                    {['页面一', '页面二', '页面三'].map((item, index)=> {
                        return (
                            <Text
                                tabLabel={item}
                                key={item + index}
                                style={{
                                    width: screenW,
                                    flex: 1,
                                }}
                            >
                                {item}
                            </Text>
                        );
                    })}
                </ScrollableTab>
                {/*<App/>*/}
            </View>
        );
    }
}

哈哈～～ 是不是很熟悉呢？ scrollable-tab-view第三方库就是这么用的，没有啥高大上的东西，只是把公共部分提取出来了，这也就是自定义组件存在的目的。

然后运行代码，跟我们一开始一样的效果～～～

接下来我们得知道我们每次滑动scrollview后我们停留在哪个页面，主要就是用到scrollview的onMomentumScrollBegin跟onMomentumScrollEnd属性，这两个是干嘛的呢？就是当滑动开始跟滑动结束时候的回调。

怎么拿到我们的当前页面呢？
onMomentumScrollBegin跟onMomentumScrollEnd会返回event，event里面包含scrollview在y轴的偏移量，Math.round（y轴的偏移量／控件的宽度）即为当前页面。

有了思路我们就开动了哈～

获取控件的宽度应该是没问题哈，我们定义一个叫containerWidth的变量，然后默认宽度为屏幕宽：

render() {
        return (
            <View
                style={styles.container}
                onLayout={this._onLayout}
            >
                {/*渲染tabview*/}
                {this._renderTabView()}
                {/*渲染主体内容*/}
                {this._renderScrollableContent()}
            </View>
        );
    }

/**
     * 获取控件宽度
     * @param e
     * @private
     */
    _onLayout = (e)=> {
        let {width}=e.nativeEvent.layout;
        if (this.state.containerWidth !== width) {
            this.setState({
                containerWidth: width,
            });
        }
    }

好了，我们已经获取到我们控件的宽度了，于是我们开始处理_onMomentumScrollBeginAndEnd方法：

  /**
     * 渲染主体内容
     * @private
     */
    _renderScrollableContent() {
        return (
            <Animated.ScrollView
                style={{width: this.state.containerWidth}}
                pagingEnabled={true}
                horizontal={true}
                onMomentumScrollBegin={this._onMomentumScrollBeginAndEnd}
                onMomentumScrollEnd={this._onMomentumScrollBeginAndEnd}
            >
                {this.props.children}
            </Animated.ScrollView>
        );
    }

 /**
     * scrollview开始跟结束滑动回调
     * @param e
     * @private
     */
    _onMomentumScrollBeginAndEnd = (e) => {
        let offsetX = e.nativeEvent.contentOffset.x;
        let page = Math.round(offsetX / this.state.containerWidth);
        if (this.state.currentPage !== page) {
            console.log('当前页面-->'+page);
            this.setState({
                currentPage: page,
            });
        }
    }

我们运行代码：

既然我们拿到了当前当前页面页码，然后我们试着把对应的tab置为红色,没选中的为绿色：

于是我们把页码传入DefaultTabView:

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

然后在DefaultTabView中，如果当前tab的下标为activeTab就显示红色：

DefaultTabView.js:

/**
 * @author YASIN
 * @version [React-Native Pactera V01, 2017/9/5]
 * @date 17/2/23
 * @description DefaultTabBar
 */
import React, {
    Component, PropTypes,
} from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Dimensions,
} from 'react-native';
const screenW = Dimensions.get('window').width;
const screenH = Dimensions.get('window').height;
export default class DefaultTabBar extends Component {
    static propTypes = {
        tabs: PropTypes.array,
        activeTab: PropTypes.number,//当前选中的tab
        style: View.propTypes.style,
    }
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }

    render() {
        return (
            <View style={[styles.container, this.props.style]}>
                {this.props.tabs.map((name, page) => {
                    const isTabActive = this.props.activeTab === page;
                    return this._renderTab(name, page, isTabActive);
                })}
            </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'
            };
        }
        return (
            <TouchableOpacity
                key={name + page}
                style={[styles.tabStyle]}
            >
                <Text style={[tabTextStyle]}>{name}</Text>
            </TouchableOpacity>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        width: screenW,
        flexDirection: 'row',
        alignItems: 'center',
        height: 50,
    },
    tabStyle: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});

然后运行代码：

可以看到，我们简单的就可以玩起来了，好啦～ 这一节先到这里了，下一节我们来完成点击tab切换到指定页面，然后把tabview的指示线显示出来。

欢迎入群，欢迎交流，大牛勿喷～～