feat: 新增onNestedScroll

mahaaoo · Nov 25, 2024 · 037f2d3 · 037f2d3
1 parent 0c01acd
commit 037f2d3
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 9 deletions.
diff --git a/example/src/pages/NestedTabViewExample.tsx b/example/src/pages/NestedTabViewExample.tsx
@@ -77,6 +77,9 @@ const HeadTabViewExample: React.FC<TabViewExampleProps> = (props) => {
       refreshing={refreshing}
       refreshControl={() => <NestedRefresh />}
       onRefresh={handleRefresh}
+      onNestedScroll={(offset) => {
+        console.log(offset);
+      }}
     >
       <Nested.ScrollView contentContainerStyle={{ backgroundColor: 'orange' }}>
         {new Array(80).fill(0).map((item, index) => {

diff --git a/src/components/NestedTabView/NestedScene.tsx b/src/components/NestedTabView/NestedScene.tsx
@@ -17,7 +17,7 @@ const NestedScene: React.FC<NestedSceneProps> = (props) => {
   const {
     registerNativeRef,
     registerChildInfo,
-    index,
+    nestedIndex,
     ScrollableComponent,
     ...restProps
   } = props;
@@ -40,7 +40,7 @@ const NestedScene: React.FC<NestedSceneProps> = (props) => {
   // 非当前活动的scrollview不允许滚动
   const scrollEnabledValue = useDerivedValue(() => {
     return (
-      currentIdx.value === index &&
+      currentIdx.value === nestedIndex &&
       refreshStatus.value === RefreshStatus.Idle &&
       integralY.value === 0
     );
@@ -52,7 +52,7 @@ const NestedScene: React.FC<NestedSceneProps> = (props) => {
       return sharedTranslate.value;
     },
     (sharedTranslate) => {
-      if (currentIdx.value !== index) {
+      if (currentIdx.value !== nestedIndex) {
         // 处理切换tab之间，scroll是否重置
         // 当任意一个scroll滑动展示head区域，则重置所有的scrollValue
         let syncTanslate = 0;
@@ -74,17 +74,18 @@ const NestedScene: React.FC<NestedSceneProps> = (props) => {
   }, [nativeGes]);
 
   useEffect(() => {
-    if (!!scrollValue && !!animatedRef && typeof index === 'number') {
-      registerChildInfo && registerChildInfo(index, scrollValue, animatedRef);
+    if (!!scrollValue && !!animatedRef && typeof nestedIndex === 'number') {
+      registerChildInfo &&
+        registerChildInfo(nestedIndex, scrollValue, animatedRef);
     }
-  }, [scrollValue, animatedRef, index]);
+  }, [scrollValue, animatedRef, nestedIndex]);
 
   const scrollHandler = useAnimatedScrollHandler(
     {
       onBeginDrag: () => {},
       onScroll: (event) => {
         if (
-          currentIdx.value === index &&
+          currentIdx.value === nestedIndex &&
           refreshStatus.value === RefreshStatus.Idle
         ) {
           const moveY = Math.max(0, event.contentOffset.y);

diff --git a/src/components/NestedTabView/NestedTabView.tsx b/src/components/NestedTabView/NestedTabView.tsx
@@ -53,6 +53,7 @@ const NestedTabView = forwardRef<NestedTabViewRef, NestedTabViewProps>(
       refreshing = false,
       refreshControl,
       onRefresh,
+      onNestedScroll,
       onTabPress,
       onPageSelected,
       onPageScroll,
@@ -98,6 +99,13 @@ const NestedTabView = forwardRef<NestedTabViewRef, NestedTabViewProps>(
       }
     );
 
+    useAnimatedReaction(
+      () => sharedTranslate.value,
+      (value) => {
+        onNestedScroll && runOnJS(onNestedScroll)(value);
+      }
+    );
+
     useEffect(() => {
       if (!needRefresh) return;
       if (refreshing) {
@@ -386,7 +394,7 @@ const NestedTabView = forwardRef<NestedTabViewRef, NestedTabViewProps>(
                 const injectProps = {
                   registerNativeRef,
                   registerChildInfo,
-                  index,
+                  nestedIndex: index,
                 };
                 return React.cloneElement(child, injectProps);
               })}

diff --git a/src/components/NestedTabView/hooks.ts b/src/components/NestedTabView/hooks.ts
@@ -136,6 +136,7 @@ export const useVerifyProps = (
     refreshing,
     refreshControl,
     onRefresh,
+    onNestedScroll,
     children,
   } = props;
 
@@ -203,6 +204,7 @@ export const useVerifyProps = (
     refreshControl,
 
     onRefresh,
+    onNestedScroll,
     onTabPress,
     onPageScroll,
     onPageScrollStateChanged,

diff --git a/src/components/NestedTabView/type.ts b/src/components/NestedTabView/type.ts
@@ -17,7 +17,9 @@ export interface NestedTabViewProps
   triggerHeight?: number;
   refreshing?: boolean;
   refreshControl?: () => React.ReactNode;
+
   onRefresh?: () => void;
+  onNestedScroll?: (offset: number) => void;
 }
 
 export interface NestedTabViewVerifyProps {
@@ -37,6 +39,7 @@ export interface NestedTabViewVerifyProps {
   refreshControl?: () => React.ReactNode;
 
   onRefresh?: () => void;
+  onNestedScroll?: (offset: number) => void;
   onTabPress?: (index: number) => void;
   onPageScroll?: (translate: number) => void;
   onPageScrollStateChanged?: (state: PageStateType) => void;
@@ -56,7 +59,7 @@ export interface NestedSceneProps {
     scrollValue: SharedValue<number>,
     scrollRef: AnimatedRef<any>
   ) => void;
-  index?: number;
+  nestedIndex?: number;
   ScrollableComponent: any;
 }