Need help with react-native-head-tab-view?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

zyslife
146 Stars 26 Forks 64 Commits 10 Opened issues

Description

带有头部整体滑动标签页 (tabs with collapsible header)

Services available

!
?

Need anything else?

Contributors list

No Data

React Native Head Tab View

Features

  • Scrollable tabs
  • All Tab pages share Collapsible headers
  • Collapsible Headers controls the slide of the Tabview in the vertical direction
  • Collapsible Headers can respond to an event
  • Add a drop-down refresh for the Tab page(v2.0~)
  • Add a drop-down refresh for the Tabview(v2.0.6~)
  • Add the new slide mode to Collapsible Headers and Tabview(v2.1.0~)

Demo

iOS demo

demo_ios.gif

Android demo:

demo_android.gif

Example

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 }

render() { return ( { return 180 }} renderScrollHeader={()=>} onChangeTab={this.onChangeTab} /> ) }

More examples:Example

Run the example

cd Example
yarn or npm install

//run Android react-native run-android

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

Add to your project

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. dependencies: @react-native-community/viewpager Autolinking and Manually link

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

  1. dependencies: react-native-gesture-handler Autolinking and Manually link

Versions (@react-native-community/viewpager) 【It is recommended that you fix the version for V3.3,reference issues28

Some versions of @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[])

The data source for Tabbar and TabView Example:

<tabview tabs="{['tab1','tab2','tab3']}"></tabview>
<tabbar tabs="{['tab1','tab2','tab3']}"></tabbar>
averageTab (boolean)

Whether items in a Tabbar divide the width of the container of the Tabbar equally
it defaults to true. true : All TAB items divide the width of the tabbar equally false : The width depends on the text of the label item. Wrapped in a ScrollView

Example:

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

Convert the elements in tabs into the titles you want example: tabNameConvert={(tabname)=&gt;return tabname+'_aguai'}

tabsContainerStyle (StyleProp)

These styles will be applied to the Tabbar view content container which wraps all of the child views.

activeTextStyle (StyleProp)

The style of the tab item when active defaults to { fontSize: 14, color: '#4D4D4D', fontWeight: 'bold' }

inactiveTextStyle (StyleProp)

The style of the tab item when inactive defaults to { fontSize: 14, color: '#848484', fontWeight: 'bold' }

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

Takes an item from tabs and render the scene of the TAB item When renderScrollHeader is assigned, pass info to the component wrapped by HPageViewHoc

  • item (string) : An element in the Tabs array
  • index (number) : index

Example:

<tabview renderscene="{(sceneProps)=">{
        const {item} = sceneProps
        if (item == 'ScrollView') {
            return <page1></page1>
        } else if (item == 'FlatList') {
            return <page2></page2>
        } else if (item == 'SectionList') {
            return <page3></page3>
        }
        return null;
    }}

/&gt;
renderScrollHeader (React.ComponentType | React.ReactElement | null)

render the collapsible header

<tabview makeheaderheight="{()"> { return 180 }}
/&gt;
slideAnimated (boolean)

Whether to animate the entire Tabview when the head appears on the screen
On Android, if the header is too long, it might be better to set SlideAnimated to true.

it defaults to false.
| | slide the header | slide the Tab page | --------------- | --------------- |--------| |false| I'm going to listen for headerTrans, and then I'm going to call the scrollTo method on the Tab|I'm going to enable the Transform animation of the Tabview until the head disappears completely
|true | I'm going to listen for headerTrans, and then enable the transformation animation for the header. |I'm going to enable the Transform animation of the Tabview until the head disappears completely

frozeTop (number)

The height at which the top area of the Tabview is frozen

<tabview frozetop="{50}"></tabview>
headerRespond (boolean) 【This property has been deprecated,By default, the header responds to events.】

Collapsible headers can respond to an event it defaults to false

<tabview headerrespond="{true}"></tabview>
makeHeaderHeight

The height of collapsible header

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

render the header of the Tabview

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

render the footer of the Tabview

initialPage (number)

The sequence number of the initial scene. it defaults to 0

preInitSceneNum (number)

Number of pre-loaded pages
it defaults to 0

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

Render the custom tabbar

onChangeTab ((value: ChangeTabProperties): void)

This method is called when the scene is switched

<tabview onchangetab="{({from,curIndex})"> { console.log('from:'+from+'-to:'+curIndex) }}
/&gt;
onScroll ((value: number): void)

Horizontal scrolling invokes this method
value: Progress relative to total length

locked (boolean)

Whether horizontal sliding is allowed.
it defaults to false

scrollEnabled (boolean)

Whether to allow the scene to slide vertically

tabbarStyle (StyleProp)

The style of the Tabbar

extraData (any)

A marker property for telling the tabview to re-render (since it implements PureComponent).
stick it here and treat it immutably.

isRefreshing (boolean)

Whether the TabView is refreshing

onStartRefresh (() => void)

If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality.
Make sure to also set the isRefreshing prop correctly.

renderRefreshControl (() => React.ReactElement)

A custom RefreshControl

refreshHeight (number)

If this height is reached, a refresh event will be triggered (onStartRefresh)

bounces (boolean)

When true, the scroll view bounces when it reaches the end of the content if it slides the tabs horizontally

HPageViewHoc Props (HOC props)
isRefreshing (boolean)

Whether the scene is refreshing

onStartRefresh (() => void)

If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality.
Make sure to also set the isRefreshing prop correctly.

renderRefreshControl (() => React.ReactElement)

A custom RefreshControl for scene

refreshHeight (number)

If this height is reached, a refresh event will be triggered (onStartRefresh)
it defaults to 100

overflowPull (number)

It's the distance beyond the refreshHeight, the distance to continue the displacement, when the pull is long enough,
it defaults to 50.

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

The style of the tabbar

underLineHidden (boolean)

Whether the underline is displayed
it defaults to false

underlineStyle (StyleProp)

The style of the underlined container

lineStyle (StyleProp)

The style of the underline

tabItemStyle (StyleProp)

The style of the tab item

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

Takes an item from data and renders it

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

Takes an item from data and renders it to the TAB Item button

scrollValue (Animated.Value)

Progress relative to total length

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

Render the view to the left of the Tabbar

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

Render the view to the right of the Tabbar

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.