/react-native-head-tab-view

带有头部整体滑动标签页 （tabs with collapsible header）

Primary LanguageTypeScript

React Native Head Tab View

功能

  • 左右滑动标签页
  • 共享滑动状态的头部
  • 头部可控制整个组件上下滚动
  • 头部可以响应点击事件
  • 新增标签页下拉刷新功能（v2.0~）
  • 新增整个组件下拉刷新功能（v2.0.6~）

Demo

iOS效果图

demo_ios.gif

Android效果图：

demo_android.gif

简例

import { ScrollView } from 'react-native';
import { HPageViewHoc, TabView } from 'react-native-head-tab-view'
const HScrollView = HPageViewHoc(ScrollView)

_renderScene = (sceneProps: { item: string, index: number }) => {
        return <HScrollView {...sceneProps}>
            <View style={{ height: 800, backgroundColor: 'red' }} />
            <View style={{ height: 800, backgroundColor: 'green' }} />
            <View style={{ height: 800, backgroundColor: 'blue' }} />
        </HScrollView>
}
    
render() {
        return (
            <View style={{ flex: 1, backgroundColor: '#FFF' }}>
                <TabView
                        tabs={['tab1','tab2','tab3']}
                        renderScene={this._renderScene}
                        makeHeaderHeight={() => { return 180 }}
                        renderScrollHeader={()=><View style={{height:180,backgroundColor:'red'}}/>}
                        onChangeTab={this.onChangeTab}
                    />
            </View>
        )
    }

更加完善的例子请点击Example

运行Example

cd Example
yarn or npm install

//运行 Android 
react-native run-android

//运行 iOS 
cd ios
pod install
cd ../
react-native run-ios

添加到自己项目

yarn add react-native-head-tab-view react-native-gesture-handler @react-native-community/viewpager
or  
npm install react-native-head-tab-view react-native-gesture-handler @react-native-community/viewpager --save

Linking

  1. 依赖了 @react-native-community/viewpager 自动或者手动进行链接

https://github.com/react-native-community/react-native-viewpager#Linking

  1. 依赖了react-native-gesture-handler 自动或者手动进行链接

Versions (@react-native-community/viewpager) 【建议将版本固定为3.3，参考issues28】

以下为@react-native-community/viewpager的版本，请自行选择

1.x 2.x 3.x
iOS support iOS support
Android support Android support AndroidX support

Documentation

Common Props
tabs (required) (tabs :string[])

此组件的数据源，为各个标签页的名字组成的数组 可配合tabNameConvert使用
Example:

<TabView
    tabs={['tab1','tab2','tab3']}
    
/>
<Tabbar
    tabs={['tab1','tab2','tab3']}
/>
averageTab (boolean)

Tabbar组件内元素是否平分
true : 以Tabbar宽度平分所有元素
false : 根据Tabbar元素的长度自动伸展，可左右滑动

Example:

<TabView
    tabs={['tab1','tab2','tab3']}
    averageTab={true|false}
/>
tabNameConvert _((tabname: string) => string)

可以再tabs中设置["a","b","c"],然后通过此方法转换成想要显示在tabbar上的文字

tabsContainerStyle (StyleProp)

tabbar容器的样式

activeTextStyle (StyleProp)

tabbar item选中的样式

inactiveTextStyle (StyleProp)

tabbar item未选中的样式

HPageViewHoc Props （HOC props）
isRefreshing (boolean)

标签页是否处于下拉刷新状态

onStartRefresh (() => void)

开始下拉刷新 回调方法

renderRefreshControl (() => React.ReactElement)

自定义下拉刷新 组件

refreshHeight (number)

下拉刷新的高度 （默认100）

overflowPull (number)

下拉的距离超过 下拉刷新组件的高度 （默认50）

TabView Props - (extends Common Props)
renderScene (required) (renderScene :(info: TabViewItemInfo) => React.ReactElement | null | undefined)

渲染各个标签子页面的方法，传入参数遵从TabViewItemInfo协议包含以下参数

  • item (string) : 标签的名字（tabs数组的其中一个元素）
  • index (number) : 标签页的序号 ，从0开始排序

Example:

<TabView
    renderScene={(sceneProps)=>{
        const {item} = sceneProps
        if (item == 'ScrollView') {
            return <Page1 {...sceneProps} />
        } else if (item == 'FlatList') {
            return <Page2 {...sceneProps} />
        } else if (item == 'SectionList') {
            return <Page3 {...sceneProps} />
        }
        return null;
    }}
    
/>
renderScrollHeader (React.ComponentType | React.ReactElement | null)

渲染标签页组件共有的头部，可整体滑动

<TabView
    makeHeaderHeight={() => { return 180 }}
/>
frozeTop (number)

滑动头部冻结高度，可以让tabbar和子页面滚动到距离顶部frozeTop距离

<TabView
    frozeTop={50}
/>
headerRespond (boolean)

头部是否能响应事件 。默认值 false (如果设置为true，头部会相应滑动事件，Android在debug模式下可能会有卡顿的感觉)

<TabView
    headerRespond={true}
/>
makeHeaderHeight (如果有renderScrollHeader时，必须实现此方法)

返回renderScrollHeader组件的高度

renderScrollHeader={()=><View style={{height:180,backgroundColor:'red'}}/>}
renderHeader (React.ComponentType | React.ReactElement | null)

渲染头部组件(在Tabbar的下方)

renderFooter (React.ComponentType | React.ReactElement | null)

渲染底部组件

initialPage (number)

初始显示的标签页序号 （默认是0）

preInitSceneNum (number)

预加载的屏幕数量 （默认是0）

renderTabBar (React.ComponentType | React.ReactElement | null)

自定义Tabbar的渲染方法

onChangeTab ((value: ChangeTabProperties): void)
<TabView
    onChangeTab={({from,curIndex}) => { console.log('from:'+from+'-to:'+curIndex) }}
/>
onScroll ((value: number): void)

当前标签页左右滑动的进度回调，value:当前滚动的距离/总共可滚动距离

locked (boolean)

是否允许水平滑动

scrollEnabled (boolean)

是否允许标签页滑动

tabbarStyle (StyleProp)

tabbar的样式

extraData (any)

用于重新渲染组件

isRefreshing (boolean)

整个TabView是否处于下拉刷新状态

onStartRefresh (() => void)

整个TabView开始下拉刷新 回调方法

renderRefreshControl (() => React.ReactElement)

自定义下拉刷新 组件

refreshHeight (number)

下拉刷新的高度 （默认100）

Tabbar Props - (extends Common Props)
style (StyleProp)

tabbar样式

underLineHidden (boolean)

是否隐藏下划线

underlineStyle (StyleProp)

下划线容器样式

lineStyle (StyleProp)

下划线样式

tabItemStyle (StyleProp)

tabItem样式

renderTabItem (React.ComponentType | React.ReactElement | null)

渲染tabItem的按钮

renderTabItemButton (React.ComponentType | React.ReactElement | null)

渲染tabbarItem方法

scrollValue (Animated.Value)

当前滚动的距离/总共可滚动距离（水平方向）

renderLeftView (React.ComponentType | React.ReactElement | null)

渲染Tabbar左边组件

renderRightView (React.ComponentType | React.ReactElement | null)

渲染Tabbar右边组件