ScrollableTabView详解

代码案例：

<ScrollableTabView
          renderTabBar={() => <DefaultTabBar style={styles.tabStyle} />}
          tabBarActiveTextColor="#28C35A"
          tabBarUnderlineStyle={styles.lineStyle}
          tabBarInactiveTextColor="#000000"
          tabBarBackgroundColor="#fff"
          locked={false}
          onScroll={(obj) => {
            //无需写业务逻辑，滑动会自动调用onChangeTab事件
          }}
          onChangeTab={obj => {
            //业务逻辑 obj.i 标识第几个tab，从0开始
            if (obj.i == 0) {
            } else if (obj.i == 1) {
            } else if (obj.i == 2) {
            }
          }}
        >
          <View tabLabel="图文">
            <FlatList
              data={this.state.textImageList}
              renderItem={this.renderImageTextItem.bind(this)}
              onEndReachedThreshold={0.01}
              onRefresh={() => this.getFirstThreadList(0,0,true)}
              onEndReached={() => this.loadMore(0)}
              ListFooterComponent={
                this.state.textImageList.length > 0 && this.state.isImageAll
                  ? this._footer
                  : null
              }
              refreshing={this.state.refreshing}
              keyExtractor={this.keyExtractor}
            />
          </View>
          <View tabLabel="问答">
            <FlatList
              data={this.state.questionAnswerList}
              renderItem={this.renderQuestionItem.bind(this)}
              onEndReachedThreshold={0.01}
              onRefresh={() => this.getFirstThreadList(3,0,true)}
              onEndReached={() => this.loadMore(3)}
              ListFooterComponent={
                this.state.questionAnswerList.length > 0 &&
                this.state.isQuestionAll
                  ? this._footer
                  : null
              }
              refreshing={this.state.refreshing}
              keyExtractor={this.keyExtractor}
            />
          </View>
          <View tabLabel="视频">
            <FlatList
              data={this.state.videoList}
              renderItem={this.renderVideoItem.bind(this)}
              onEndReachedThreshold={0.01}
              onRefresh={() => this.getFirstThreadList(2,0,true)}
              onEndReached={() => this.loadMore(2)}
              ListFooterComponent={
                this.state.videoList.length > 0 && this.state.isVideoAll
                  ? this._footer
                  : null
              }
              refreshing={this.state.refreshing}
              keyExtractor={this.keyExtractor}
            />
          </View>
        </ScrollableTabView>

属性及方法介绍：

1. renderTabBar(Function:ReactComponent)

TabBar的样式，系统提供了两种默认的，分别是DefaultTabBar和ScrollableTabBar。
注意：每个被包含的子视图需要使用tabLabel属性，表示对应Tab显示的文字。 
DefaultTabBar：Tab会平分在水平方向的空间。 
ScrollableTabBar：Tab可以超过屏幕范围，滚动可以显示。

2. tabBarPosition(String，默认值’top’) 
top：位于屏幕顶部 
bottom：位于屏幕底部 
overlayTop：位于屏幕顶部，悬浮在内容视图之上（看颜色区分：视图有颜色，Tab栏没有颜色） 
overlayBottom：位于屏幕底部，悬浮在内容视图之上（看颜色区分：视图有颜色，Tab栏没有颜色）

3.  onChangeTab(Function) 
Tab切换之后会触发此方法，包含一个参数（Object类型），这个对象有两个参数: 
i：被选中的Tab的下标（从0开始） 
ref：被选中的Tab对象（基本用不到）

4. onScroll(Function) 
视图正在滑动的时候触发此方法，包含一个Float类型的数字，范围是[0, tab的数量-1]

5. locked(Bool，默认为false) 
表示手指是否能拖动视图，默认为false（表示可以拖动）。设为true的话，我们只能“点击”Tab来切换视图。

6. initialPage(Integer) 
初始化时被选中的Tab下标，默认是0（即第一页）。

7.page(Integer) 
设置选中指定的Tab。

8.children(ReactComponents) 
表示所有子视图的数组，比如下面的代码，children则是一个长度为6的数组，元素类型为Text。

render() {
  return (
    <ScrollableTabView
      renderTabBar={() => <DefaultTabBar/>}>
      <Text tabLabel='Tab1'/>
      <Text tabLabel='Tab2'/>
      <Text tabLabel='Tab3'/>
      <Text tabLabel='Tab4'/>
      <Text tabLabel='Tab5'/>
      <Text tabLabel='Tab6'/>
    </ScrollableTabView>
  );
}

9，tabBarUnderlineStyle(style) 
设置DefaultTabBar和ScrollableTabBarTab选中时下方横线的颜 色。 
10.，tabBarBackgroundColor(String) 
设置整个Tab这一栏的背景颜色 
11，tabBarActiveTextColor(String) 
设置选中Tab的文字颜色。 
12，tabBarInactiveTextColor(String) 
设置未选中Tab的文字颜色。 
13，contentProps(Object) 
这里要稍微说下react-native-scrollable-tab-view的实现，其实在Android平台底层用的是ViewPagerAndroid，iOS平台用的是ScrollView。这个属性的意义是：比如我们设置了某个属性，最后这个属性会被应用在ScrollView/ViewPagerAndroid，这样会覆盖库里面默认的，通常官方不建议我们去使用。 
14，scrollWithoutAnimation(Bool，默认为false) 
设置“点击”Tab时，视图切换是否有动画，默认为false（即：有动画效果）。

--------------------- 
原文：https://blog.csdn.net/xiangzhihong8/article/details/72730951