react-native scroll-head-tab-view

Common nested Tab page, the head of the public view follows each Tab slide, TabBar to a certain position to adsorb at the top.

GitHub Repository

Effect:

The react-native scrollable tab-view is used by many developers to implement tab-switching. The react-native scrollable Tab-View is called ScrollHeadTabView. Since we only need to add head view scrolling and TabBar adsorption to it, I personally don’t feel the need to bother doing what others already do well, so I made our ScrollHeadTabView based on scrollable-Tab-View.

First of all, we need to be familiar with the core code of Scrollable tab-View, mainly state and TAB rendering. We need to add scrollHeaders, manage offsetY for each Tab, and implement TabBar adsorption.

Add the header:

The header height is calculated externally with the headerHeight, wrapped internally with a View layer, and then containerOffsetY is used to move the header up and down.

Processing containerOffsetY

Modified the original _composeScenes (method for handling each TAB view), we passed additional parameters to each TAB, the core of which was to pass containerOffsetY and calculate the TAB height sceneHeight.Here’s how you use these parameters for each Tab, sceneHeight for those that don’t have the height of the container calculate the padding at the bottom, change the value of containerOffsetY as the current Tab slides, and the main thing to notice here is that the onScroll event listener for each Tab needs to change dynamically.Because the UI processing logic above is the same for each Tab, we can add a HOC to handle the Scrollable view in RN. The outermost layer of each Tab must be a Flatlist or ScrollView that has been HOC.

example

The ScrollView here is processed