React Native关于ScrollableTabView组件

最近工作中使用ScrollableTabView组件的问题，实现如下图所示的效果：

render方法中判断state中状态，进行布局控制

render(){
    if(this.state.error){
        return(
            <LoadingView/>
        )
    }
    if(!this.state.isLoading){
        return (
            <LoadingView/>
        );
    }
    if (this.state.isLoading){
        return (
            <ScrollableTabView 
                initialPage={0}
                style={styles.container}
                locked={true}
                renderTabBar={() => <ScrollableTabBar/>}
                tabBarActiveTextColor='#FF0000'>
                {
                    this.state.dataSource.map((item, key) => {
                        return (
                            <View key={key} tabLabel={item} style={{flex: 1,backgroundColor:'transparent'}}>
                                <CategoryList navigate={this.props.navigation.navigate} category={item} classification = {this.classification} {...this.props}/>
                            </View>
                        );
                    })
                }
            </ScrollableTabView>
        );
    }
}

ScrollableTabView有tabBarPosition属性，默认为top，也可以设置为bottom
两种提供的TabBar方式：
DefaultTabBar和ScrollableTabBar
DefaultTabBar无法使Tab进行滑动，适合tabLabel较少的情况，这里我们采用ScrollableTabBar，可以滑动。
Locked属性是表示手指是否能滑动视图，选择true是不能滑动，但可以通过点击tab切换视图，initialPage设置为0，即默认选择第一页，
因为ScrollableTabView中的每一个tabLabel中的内容布局都是一样，所以将页面封装成一个单独的组件。

 <CategoryList navigate={this.props.navigation.navigate} category={item} classification = {this.classification} {...this.props}/>

网络请求到的数据是一个数组，对数组进行遍历，向CategoryList页面传递一些参数的方式：

category={item} classification = {this.classification} {...this.props}

在CategoryList页面进行数据的接收：

this.category = this.props.category;
this.classification = this.props.classification;

另外ScrollableTabView还有几个方法：
onChangeTab(Function)
Tab切换之后会触发此方法，包含一个参（(obj类型），这个对象有两个参数
i：被选中的Tab的下标（从0开始）
ref：被选中的Tab对象

onChangeTab={(obj) => {
	console.log('obj.i:' + obj.i);//当前选中的页面的下标，从0开始
}

tabBarUnderlineStyle(style)
设置DefaultTabBar和ScrollableTabBar中Tab选中时下方横线的颜色

tabBarBackgroundColor(String)
设置整个Tab这一栏的背景颜色

tabBarActiveTextColor(String)
设置选中Tab的文字颜色

tabBarInactiveTextColor(String)
设置未选中Tab的文字颜色

tabBarTextStyle(Object)
设置Tab文字的样式，比如字号、字体等

后边再介绍CategoryList页面…