v4.0.0-rc.3

Example/package.json

@@ -21,7 +21,7 @@
     "react-native": "0.63.4",
     "react-native-gesture-handler": "^1.6.1",
     "react-native-head-tab-view": "file:./react-native-head-tab-view",
-    "react-native-reanimated": "^2.0.1",
+    "react-native-reanimated": "^2.0.0",
     "react-native-safe-area-context": "^2.0.2",
     "react-native-screens": "^2.8.0",
     "react-native-scrollable-tab-view": "^1.0.0",

Example/react-native-head-tab-view/GestureContainer.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react-native-gesture-handler';
 import { HeaderContext } from './HeaderContext'
 import RefreshControlContainer from './RefreshControlContainer'
-import { useSceneInfo } from './hook'
+import { useSceneInfo, useRefreshDerivedValue } from './hook'
 import { IGestureContainerProps, GesturePanContext } from './types'
 import { mScrollTo, toEndSlide, toRunSlide, onActiveRefreshImpl, onEndRefreshImpl, animateToRefresh } from './utils'
 
@@ -28,12 +28,13 @@ import Animated, {
     useAnimatedReaction,
     runOnJS,
 } from 'react-native-reanimated'
-const overflowPull = 50
 const __IOS = Platform.OS === 'ios'
 
 const GestureContainer: React.ForwardRefRenderFunction<any, IGestureContainerProps> = (
     {
         refreshHeight = 80,
+        pullExtendedCoefficient = 0.1,
+        overflowPull = 50,
         overflowHeight = 0,
         scrollEnabled = true,
         frozeTop = 0,
@@ -69,8 +70,8 @@ const GestureContainer: React.ForwardRefRenderFunction<any, IGestureContainerPro
     const isDragging = useSharedValue(false)
     const tabsTrans = useSharedValue(0)
     const tabsRefreshTrans = useSharedValue(refreshHeight)
-    const tabsIsRefreshing = useSharedValue(_isRefreshing)
-    const tabsIsRefreshingWithAnimation = useSharedValue(_isRefreshing)
+    const tabsIsRefreshing = useSharedValue(false)
+    const tabsIsRefreshingWithAnimation = useSharedValue(false)
     const dragIndex = useSharedValue(curIndexValue.value)
     //scene
     const {
@@ -90,7 +91,7 @@ const GestureContainer: React.ForwardRefRenderFunction<any, IGestureContainerPro
         return isDragging.value || tabsIsRefreshing.value || tabsIsRefreshingWithAnimation.value
     })
 
-    const calcHeight = useMemo(() => headerHeight - frozeTop, [headerHeight])
+    const calcHeight = useMemo(() => headerHeight - frozeTop, [headerHeight, frozeTop])
 
     const tabsHasRefresh = useCallback(() => {
         'worklet'
@@ -148,7 +149,7 @@ const GestureContainer: React.ForwardRefRenderFunction<any, IGestureContainerPro
                 isToRefresh: false
             })
         }
-    }, [_isRefreshing, refreshHeight])
+    }, [_isRefreshing, refreshHeight, onStartRefresh])
 
     const stopScrollView = () => {
         'worklet'
@@ -349,6 +350,7 @@ const GestureContainer: React.ForwardRefRenderFunction<any, IGestureContainerPro
                 opacityValue={opacityValue}
                 isRefreshing={tabsIsRefreshing}
                 isRefreshingWithAnimation={tabsIsRefreshingWithAnimation}
+                pullExtendedCoefficient={pullExtendedCoefficient}
                 renderContent={_renderRefreshControl}
             />
         )
@@ -373,7 +375,7 @@ const GestureContainer: React.ForwardRefRenderFunction<any, IGestureContainerPro
         if (overflowHeight > event.nativeEvent.layout.height) {
             console.warn('【react-native-head-tab-view】The overflowHeight must be less than the height of the tabbar')
         }
-        if (Math.abs(tabbarHeight - event.nativeEvent.layout.height) <= 1) return;
+        if (Math.abs(tabbarHeight - event.nativeEvent.layout.height) < 1) return;
 
         setTabbarHeight(event.nativeEvent.layout.height)
     }, [tabbarHeight, overflowHeight])
@@ -410,13 +412,13 @@ const GestureContainer: React.ForwardRefRenderFunction<any, IGestureContainerPro
 
     //slide header
     useAnimatedReaction(() => {
-        return headerTrans.value >= 0 && slideIndex.value === curIndexValue.value
+        return headerTrans.value >= 0 && slideIndex.value === curIndexValue.value && isSlidingHeader.value
     }, (start) => {
         if (!start) return
         if (!childScrollRef[curIndexValue.value]) return;
         if (childScrollYTrans[curIndexValue.value].value === headerTrans.value) return
         mScrollTo(childScrollRef[curIndexValue.value], 0, headerTrans.value, false)
-    }, [headerTrans, slideIndex, curIndexValue, childScrollRef, childScrollYTrans])
+    }, [headerTrans, slideIndex, curIndexValue, childScrollRef, childScrollYTrans, isSlidingHeader])
 
     const headerTransValue = useDerivedValue(() => {
         return interpolate(
@@ -437,12 +439,11 @@ const GestureContainer: React.ForwardRefRenderFunction<any, IGestureContainerPro
         }
     })
 
-    const translateYValue = useDerivedValue(() => {
-        return interpolate(
-            tabsTrans.value,
-            [0, refreshHeight + overflowPull, refreshHeight + overflowPull + 10],
-            [0, refreshHeight + overflowPull, refreshHeight + overflowPull + 1],
-        )
+    const translateYValue = useRefreshDerivedValue({
+        animatedValue: tabsTrans,
+        refreshHeight,
+        overflowPull,
+        pullExtendedCoefficient
     })
 
     const animateStyle = useAnimatedStyle(() => {
@@ -508,11 +509,13 @@ const GestureContainer: React.ForwardRefRenderFunction<any, IGestureContainerPro
         shareAnimatedValue,
         headerTrans,
         tabbarHeight,
-        expectHeight: headerHeight + Math.floor(tabviewHeight),
+        expectHeight: headerHeight + Math.floor(tabviewHeight) - frozeTop,
         tabsIsWorking,
         tabsRefreshEnabled: onStartRefresh !== undefined,
         headerHeight,
         refreshHeight,
+        overflowPull,
+        pullExtendedCoefficient,
         refHasChanged,
         curIndexValue,
         frozeTop,

Example/react-native-head-tab-view/README.md

@@ -35,6 +35,8 @@ For detailed usage, please refer to [Example](https://github.com/zyslife/react-n
 #### v4.0.0-rc  
 - **Fix for TAB slider stuttering when dragging headers**
 - **Optimized pull-down refresh for easier expansion and better performance** 
+- **When switching tabbars, the scene is no longer re-rendered**
+
 >#### dependencies:
 >1.react-native-gesture-handler  
 >2.react-native-reanimated
@@ -268,12 +270,19 @@ Whether the TabView is refreshing
 ##### `renderRefreshControl`  _(() => React.ReactElement)_   
 A custom RefreshControl
 
+##### `scrollEnabled` _(boolean)_
+Whether to allow the scene to slide vertically  
+
 ##### `refreshHeight`  _(number)_   
 If this height is reached, a refresh event will be triggered （onStartRefresh）  
  it defaults to 80
-
-##### `scrollEnabled` _(boolean)_
-Whether to allow the scene to slide vertically
+
+##### `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.
+
+##### `pullExtendedCoefficient`  _(number)_   
+When the maximum drop-down distance is reached(refreshHeight+overflowPull), the refreshControl moves the distance for each pixel the finger moves The recommended number is between 0 and 1.
 
 ---  
 
@@ -302,9 +311,7 @@ Whether the scene is refreshing
 ##### `renderRefreshControl`  _(() => React.ReactElement)_   
 A custom RefreshControl for scene
 
-##### `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.
+
 
 </details>
 

Example/react-native-head-tab-view/RefreshControlContainer.tsx

@@ -13,7 +13,8 @@ import Animated, {
     interpolate,
     useAnimatedReaction,
 } from 'react-native-reanimated'
-import { RefreshControlProps ,RefreshType} from './types'
+import { RefreshControlProps, RefreshType } from './types'
+import { useRefreshDerivedValue } from './hook'
 interface RefreshControlContainerProps {
     top: number
     refreshHeight: number
@@ -22,7 +23,7 @@ interface RefreshControlContainerProps {
     refreshValue: Animated.SharedValue<number>
     isRefreshing: Animated.SharedValue<boolean>
     isRefreshingWithAnimation: Animated.SharedValue<boolean>
-    transValue?: Animated.SharedValue<number>
+    pullExtendedCoefficient: number
     renderContent?: (refreshProps: RefreshControlProps) => React.ReactElement
 }
 
@@ -32,30 +33,22 @@ const RefreshControlContainer: React.FC<RefreshControlContainerProps> = ({
     overflowPull,
     opacityValue,
     refreshValue,
-    transValue,
     isRefreshing,
     isRefreshingWithAnimation,
+    pullExtendedCoefficient,
     renderContent
 }) => {
     const refreshType: { value: RefreshType } = useSharedValue('pullToRefresh')
     const progress = useDerivedValue(() => {
         if (isRefreshingWithAnimation.value) return 1
         return Math.min(refreshValue.value / refreshHeight, 1)
     })
-    const tranYValue = useDerivedValue(() => {
-        if (transValue) {
-            return interpolate(
-                refreshValue.value - transValue.value,
-                [0, refreshHeight + overflowPull, refreshHeight + overflowPull + 10],
-                [0, refreshHeight + overflowPull, refreshHeight + overflowPull + 1],
-            )
-        }
 
-        return interpolate(
-            refreshValue.value,
-            [0, refreshHeight + overflowPull, refreshHeight + overflowPull + 10],
-            [0, refreshHeight + overflowPull, refreshHeight + overflowPull + 1],
-        )
+    const tranYValue = useRefreshDerivedValue({
+        animatedValue: refreshValue,
+        refreshHeight,
+        overflowPull,
+        pullExtendedCoefficient
     })
 
     useAnimatedReaction(() => {
@@ -170,7 +163,7 @@ const styles = StyleSheet.create({
     },
     textStyle: {
         color: '#26323F',
-        marginTop: 10,
+        marginTop: 5,
         fontSize: 17,
         width:100,
         textAlign:'center'