diff --git a/example/src/pages/NestedTabViewExample.tsx b/example/src/pages/NestedTabViewExample.tsx index 7a78d7f..00f0405 100644 --- a/example/src/pages/NestedTabViewExample.tsx +++ b/example/src/pages/NestedTabViewExample.tsx @@ -77,6 +77,9 @@ const HeadTabViewExample: React.FC = (props) => { refreshing={refreshing} refreshControl={() => } onRefresh={handleRefresh} + onNestedScroll={(offset) => { + console.log(offset); + }} > {new Array(80).fill(0).map((item, index) => { diff --git a/src/components/NestedTabView/NestedScene.tsx b/src/components/NestedTabView/NestedScene.tsx index 793dfbf..e173c89 100644 --- a/src/components/NestedTabView/NestedScene.tsx +++ b/src/components/NestedTabView/NestedScene.tsx @@ -17,7 +17,7 @@ const NestedScene: React.FC = (props) => { const { registerNativeRef, registerChildInfo, - index, + nestedIndex, ScrollableComponent, ...restProps } = props; @@ -40,7 +40,7 @@ const NestedScene: React.FC = (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 = (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 = (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 index 527774d..7c059c3 100644 --- a/src/components/NestedTabView/NestedTabView.tsx +++ b/src/components/NestedTabView/NestedTabView.tsx @@ -53,6 +53,7 @@ const NestedTabView = forwardRef( refreshing = false, refreshControl, onRefresh, + onNestedScroll, onTabPress, onPageSelected, onPageScroll, @@ -98,6 +99,13 @@ const NestedTabView = forwardRef( } ); + useAnimatedReaction( + () => sharedTranslate.value, + (value) => { + onNestedScroll && runOnJS(onNestedScroll)(value); + } + ); + useEffect(() => { if (!needRefresh) return; if (refreshing) { @@ -386,7 +394,7 @@ const NestedTabView = forwardRef( 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 index dd65520..a44ab73 100644 --- 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 index 235eff3..fce5901 100644 --- 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, scrollRef: AnimatedRef ) => void; - index?: number; + nestedIndex?: number; ScrollableComponent: any; }