react-native-scrollable-tabview
English | 简体中文
Based on pure JS scripts, without relying on native, no need for react-native link,Title / Header / Tabs / Sticky / Screen components can be flexibly configured, among which Tabs / Sticky can slide When it reaches the top, it will be topped; what we support is to independently manage its own Sticky / Screen / Badge / tabLabel configuration in the form of a stack, and inject the Screen lifecycle onRefresh / onEndReached They will be triggered when the pull-down refresh and the scroll bar hit the bottom, and finally inject more into Screen / Sticky props
Table of Contents
- Example-API
- Example-TikTok
- Features
- Installation
- Usage
- Props
- Method
- Stack Property
- Badge Property
- Injection lifecycle to Screen
- Injection props to Screen
- Injection props to Sticky
- Known Issues
- Snapshot
Features
- Support to individually set pull-down refresh and up-slide load for each screen (life cycle injection form)
- Flex Tabs and multiple Tabs horizontal scrolling support configuration method
- Allow to set up each Screen’s own Sticky component
- Custom badges can be configured for each Tab
- Support pull down to refresh and slide up to load more pre-functions
onBeforeRefresh/onBeforeEndReached - Support animation title, can support animation as
interpolate.opacityandinterpolate.height
Installation
npm i @itenl/react-native-scrollable-tabview
or
yarn add @itenl/react-native-scrollable-tabview
Usage
import React from 'react';
import ScrollableTabView from '@itenl/react-native-scrollable-tabview';
function App() {
return (
<ScrollableTabView
ref={rf => (this.scrollableTabView = rf)}
mappingProps={{
fromRootEst: this.state.est,
}}
badges={[
null,
[
<View
style={{
position: 'absolute',
zIndex: 100,
top: 10,
right: 0,
}}
>
<Text>new</Text>
</View>,
<View
style={{
position: 'absolute',
width: 150,
height: 50,
zIndex: 100,
marginTop: 35,
right: 0,
opacity: 0.6,
backgroundColor: 'pink',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text>Three Tips</Text>
</View>,
],
]}
stacks={[
{
screen: One,
sticky: Sticky,
tabLabel: 'OneTab',
tabLabelRender: tabLabel => {
return `--- ${tabLabel} ---`;
},
badge: [<Text>one</Text>, <Text>two</Text>],
toProps: {
xx: 123,
},
},
]}
tabsStyle={{}}
tabWrapStyle={{}}
tabInnerStyle={{}}
tabActiveOpacity={0.6}
tabStyle={{}}
textStyle={{}}
textActiveStyle={{}}
tabUnderlineStyle={{}}
firstIndex={0}
syncToSticky={true}
onEndReachedThreshold={0.1}
onBeforeRefresh={(next, toggled) => {
toggled();
next();
}}
onBeforeEndReached={next => {
next();
}}
onTabviewChanged={index => {
alert(index);
}}
header={() => {
return <View style={{ backgroundColor: 'pink', height: 120 }}></View>;
}}
oneTabHidden={true}
enableCachePage={true}
carouselProps={{}}
sectionListProps={{}}
toHeaderOnTab={true}
toTabsOnTab={true}
tabsShown={false}
fixedTabs={false}
fixedHeader={false}
useScroll={false}
fillScreen={true}
></ScrollableTabView>
);
}
Props
All props are optional
| Prop | Type | Default | Description |
|---|---|---|---|
stacks |
Array | [] | Page Stack < Read Stack Property > |
mappingProps |
Object | {} | Associate mapping data to Stack / Sticky |
badges |
Array | [] | Badges for each Tab < Read Badge Property > |
tabsStyle |
Object | {} | The entire Tabs style |
tabWrapStyle |
Object / Function | {} | Single Tab wrap style (The function parameters provide item, index, and need to return the style object, eg. return index == 1 && {zIndex: 10}) |
tabInnerStyle |
Object | {} | Single Tab inner style |
tabActiveOpacity |
Number | 0.6 | Transparency after Tab button click |
tabStyle |
Object | {} | Single Tab style |
textStyle |
Object | {} | Text style in Tab |
textActiveStyle |
Object | {} | Select the active text style |
tabUnderlineStyle |
Object | {} | Select the active underline style |
firstIndex |
Number / Null | null | Set the stack of firstIndex to active (make sure that the number of stacks is greater than to firstIndex when setting the firstIndex value) |
syncToSticky |
Boolean | true | Whether it is synchronized (render triggered in the Screen componentDidUpdate will update Sticky) |
onEndReachedThreshold |
Number | 0.2 | Bottom callback threshold |
onBeforeRefresh |
Function | null | Pull down to refresh the pre-functions, execute next to execute onRefresh function in Screen, execute toggled to switch system loading, you can pass true / false to specify (callback contains next, toggled two formal parameters) |
onBeforeEndReached |
Function | null | Slide up to load more pre-functions, execute next will execute the onEndReached function in the Screen (callback contains next formal parameters) |
onTabviewChanged |
Function | null | Tab switch completion callback (callback contains index, tabLabel two formal parameters) |
screenScrollThrottle |
Number | 60 | Screen Throttle parameters during lateral sliding, Unit (ms) |
header |
Function / JSX Element / Class Component | null | Top component (if the function needs to return Element) |
oneTabHidden |
Boolean | false | Hide itself when there is only one Tab |
enableCachePage |
Boolean | true | Whether the persistent page will not be destroyed after switching |
carouselProps |
Object | {} | The remaining attributes passed to Carousel < Read Carousel > |
sectionListProps |
Object | {} | Remaining attributes passed to SectionList < Read SectionList > |
toHeaderOnTab |
Boolean | false | Click to trigger the activated Tab will scroll to Header (high priority) |
toTabsOnTab |
Boolean | false | Click to trigger the activated Tab will scroll to Tabs |
tabsShown |
Boolean | true | Configure Tabs display and hide |
fixedTabs |
Boolean | false | When enableCachePage is true, slide to switch Screen to set the minimum height to ensure that the Header and Tabs will not bounce |
fixedHeader |
Boolean | false | Render together with Tabs, fix the top Header, do not follow the scroll |
useScroll |
Boolean | false | Does Tabs support horizontal scrolling (it needs to be enabled when there are multiple category Tabs, it is recommended that tabStyle pass in a fixed width) |
useScrollStyle |
Object | {} | Set contentContainerStyle for scrolling Tabs, usually add margins to the left and right sides paddingLeft paddingHorizontal |
fillScreen |
Boolean | true | Fill the entire Screen |
title |
Function / JSX Element / Class Component | null | Animation title |
titleArgs |
Object | { style: {}, interpolateOpacity: {}, interpolateHeight: {} } |
Title parameter configuration < Read interpolate > |
onScroll |
Function | null | Scroll event monitoring |
tabsEnableAnimated |
Boolean | false | Enable sliding effect for Tabs, Need to specify width for tabStyle |
Method
<ScrollableTabView
ref={rf => (this.scrollableTabView = rf)}
>
</ScrollableTabView>
this.scrollableTabView.getCurrentRef();
this.scrollableTabView.toTabView(1);
this.scrollableTabView.scrollTo(0);
this.scrollableTabView.clearStacks(()=>alert('done'));
| Name | Type | Description |
|---|---|---|
getCurrentRef(index: number.optional) |
Function | Get the instance of the currently active view, you can pass index to get the specified instance |
toTabView(index: number.required / label: string.required) |
Function | Jump to the specified Screen |
scrollTo(index: number.required) |
Function | Swipe up and down to the specified position (passing in 0 is the default positioning to tabs / passing in a negative number is set to the top) |
clearStacks(callback: function.optional) |
Function | Clear the Stacks and related state (Tabs / Badge / Stacks)) |
Stack Property
| Name | Type | Description |
|---|---|---|
screen |
Class Component | Screen class components |
sticky |
Class Component | Sticky component, The context of this type of component will be returned in the instance |
tabLabel |
String | Tab display name |
tabLabelRender |
Function | Custom Tab rendering function, priority is higher than tabLabel |
badge |
Array | For the current Tab badge, it is mutually exclusive with the badges attribute, and has a higher priority than the outermost attribute badges < Read Badge Property > |
toProps |
Object | toProps Only pass to Screen without data association |
Badge Property
| Type | Description |
|---|---|
| JSX Element | Badges/Hovering Tips, etc. rendered based on the current Tab |
Injection lifecycle to Screen
| Name | Type | Description |
|---|---|---|
onRefresh |
Function | Triggered when pull-down refresh, the formal parameter toggled function is used to switch the display of the native loading state, if the user switches the tab during loading, it will be forced to hide and reset the state |
onEndReached |
Function | Swipe up to load more triggers |
Injection props to Screen
| Name | Type | Description |
|---|---|---|
refresh() |
Function | Manually trigger refresh and synchronize Screen status to Sticky |
scrollTo(index: number.required) |
Function | Swipe up and down to the specified position (passing in 0 is the default positioning to tabs / passing in a negative number is set to the top) |
toTabView(index: number.required / label: string.required) |
Function | Jump to the specified Screen |
layoutHeight.container |
Number | Total height of the Container |
layoutHeight.header |
Number | Total height of the Header |
layoutHeight.tabs |
Number | Total height of the Tabs |
layoutHeight.screen |
Number | Total height of the Screen |
Injection props to Sticky
| Name | Type | Description |
|---|---|---|
screenContext |
Object | Get Screen context |
Known Issues
- If you just add a
Stack, you canPush, but if you need to update or delete aStack, please use clearStacks and then add theStacksyou need
Snapshot
MIT Licensed
9 Feb 21, 2022
9 Jun 30, 2022
4 Nov 28, 2022
12 Sep 8, 2022
4 Jul 22, 2022
29 Oct 11, 2022
29 Dec 19, 2022
7 Nov 9, 2022
10.9k Dec 31, 2022
14.8k Jan 4, 2023
94 Nov 30, 2022
3 Feb 10, 2022
4 Jun 5, 2022
6 Aug 12, 2022
21 Dec 22, 2022
3 Oct 11, 2021
12 Dec 30, 2022
33 Dec 23, 2022
21.2k Dec 30, 2022