react-native-head-tab-view

React Native Head Tab View

带有头部组件，可以整体上下滑动的标签页组件
点击跳转博客文章

最新版本v2.0如果不稳定，可以退回上一个版本v1.1.6

功能

• 左右滑动标签页
• 可定制的Tabbar
• 标签页可以添加头部，并且整体上下滑动
• 兼容iOS和Android
• 头部可控制整个组件上下滚动
• 新增各个标签页下拉刷新功能（v2.0~）

Demo

iOS效果图

Android效果图：

运行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

简例

import { HPageViewHoc, TabView } from 'react-native-head-tab-view'

_renderScene = (sceneProps: { item: string, index: number }) => {
        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;
}
    
render() {
        return (
            <View style={{ flex: 1, backgroundColor: '#FFF' }}>
                <StatusBar
                    barStyle={'dark-content'}
                    translucent={true}
                />
                {this._renderNavBar()}
                <TabView
                        tabs={this.state.tabs}
                        renderScene={this._renderScene}
                        makeHeaderHeight={() => { return 180 }}
                        renderScrollHeader={()=><View style={{height:180,backgroundColor:'red'}}/>}
                        onChangeTab={this.onChangeTab}
                    />
            </View>
        )
    }

更加完善的例子请点击Example

---

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 （标签页的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)

用于重新渲染组件

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右边组件