React-Native之react-native-scrollable-tab-view（一）

爱被打了一巴掌 2022-05-22 06:17 111阅读 0赞

组件地址：https://github.com/skv-headless/react-native-scrollable-tab-view

# 1：属性及方法介绍 #

1， renderTabBar(Function:ReactComponent)

TabBar的样式，系统提供了两种默认的，分别是DefaultTabBar和ScrollableTabBar。当然，我们也可以自定义一个，我们会在下篇文章重点讲解如何去自定义TabBar样式。   
注意：每个被包含的子视图需要使用tabLabel属性，表示对应Tab显示的文字。   
DefaultTabBar：Tab会平分在水平方向的空间。   
ScrollableTabBar：Tab可以超过屏幕范围，滚动可以显示。

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

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

render() {
      return (
        <ScrollableTabView
          tabBarPosition='top'
          renderTabBar={() => <DefaultTabBar/>}>
          ...
        </ScrollableTabView>
      );
    }

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

render() {
      return (
        <ScrollableTabView
          renderTabBar={() => <DefaultTabBar/>}
          onChangeTab={(obj) => {
              console.log('index:' + obj.i);
            }
          }>
          ...
        </ScrollableTabView>
      );
    }

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

render() {
      return (
        <ScrollableTabView
          renderTabBar={() => <DefaultTabBar/>}
          onScroll={(postion) => {  
              // float类型 [0, tab数量-1]  
              console.log('scroll position:' + postion);
            }
          }>
          ...
        </ScrollableTabView>
      );
    }

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

render() {
      return (
        <ScrollableTabView
          locked={false}
          renderTabBar={() => <DefaultTabBar/>}>
          ...
        </ScrollableTabView>
      );
    }

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

render() {
      return (
        <ScrollableTabView
          initialPage={
       1}
          renderTabBar={() => <DefaultTabBar/>}>
          ...
        </ScrollableTabView>
      );
    }

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

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

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（即：有动画效果）。

render() {
      return (
        <ScrollableTabView
          scrollWithoutAnimation={true}
          renderTabBar={() => <DefaultTabBar/>}>
          ...
        </ScrollableTabView>
      );
    }

# 2：栗子 #

import React, { Component } from 'react';
    import {
        Text,
    } from 'react-native';
    
    import ScrollableTabView, { ScrollableTabBar, } from 'react-native-scrollable-tab-view';
    
    
    type Props = {};
    export default class Page1 extends Component<Props> {
    
        render( ) {
      //渲染函数
            return (
                    <ScrollableTabView
                        initialPage={
      0}
                        renderTabBar={() => <ScrollableTabBar />}
                    >
                        <Text tabLabel='JAVA'>1</Text>
                        <Text tabLabel='IOS'>2</Text>
                        <Text tabLabel='Android'>3</Text>
                        <Text tabLabel='React-Native'>4</Text>
                    </ScrollableTabView>
            );
        }
    }

![70][]

[70]: /images/20220522/a534dd5654d94b0f826b85c496a497f8.png