feat: 在NestedTabView组件中接入TabBarProps和PageViewProps

mahaaoo · mahaaoo · commit 1358e8f7f64c · 2024-11-20T00:08:13.000+08:00
diff --git a/example/src/pages/NestedTabViewExample.tsx b/example/src/pages/NestedTabViewExample.tsx
@@ -9,12 +9,16 @@ const HeadTabViewExample: React.FC<TabViewExampleProps> = (props) => {
 
   return (
     <NestedTabView
+      style={{ flex: 1 }}
       stickyHeight={55} //TabBar的高度
       renderHeader={() => (
         <View style={{ backgroundColor: 'lightblue', height: 200 }}>
           <Text>Header</Text>
         </View>
       )}
+      tabs={['tab1', 'tab2', '第三个tabs']}
+      initialIndex={1}
+      tabBarflex={'equal-width'}
     >
       <Nested.ScrollView>
         {new Array(80).fill(0).map((item, index) => {
@@ -35,6 +39,15 @@ const HeadTabViewExample: React.FC<TabViewExampleProps> = (props) => {
           );
         }}
       />
+      <Nested.ScrollView>
+        {new Array(80).fill(0).map((item, index) => {
+          return (
+            <Text key={index} style={{ margin: 10, fontSize: 20 }}>
+              {'ScrollView' + index}
+            </Text>
+          );
+        })}
+      </Nested.ScrollView>
     </NestedTabView>
   );
 };
diff --git a/src/components/NestedTabView/NestedScene.tsx b/src/components/NestedTabView/NestedScene.tsx
@@ -1,8 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import {
-  SharedValue,
-  AnimatedRef,
   useAnimatedRef,
   useSharedValue,
   useDerivedValue,
@@ -12,17 +10,7 @@ import {
 } from 'react-native-reanimated';
 import { scrollTo } from './util';
 import { useNested } from './hooks';
-
-interface NestedSceneProps {
-  registerNativeRef?: (ref: React.RefObject<any>) => void;
-  registerChildInfo?: (
-    index: number,
-    scrollValue: SharedValue<number>,
-    scrollRef: AnimatedRef<any>
-  ) => void;
-  index?: number;
-  ScrollableComponent: any;
-}
+import { NestedSceneProps } from './type';
 
 const NestedScene: React.FC<NestedSceneProps> = (props) => {
   const {
diff --git a/src/components/NestedTabView/NestedTabView.tsx b/src/components/NestedTabView/NestedTabView.tsx
@@ -10,26 +10,27 @@ import Animated, {
   cancelAnimation,
   useDerivedValue,
 } from 'react-native-reanimated';
-import {
-  Gesture,
-  GestureDetector,
-  GestureHandlerRootView,
-} from 'react-native-gesture-handler';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { TabBar, TabBarRef } from '../TabBar';
-import { PageView, PageViewRef } from '../PageView';
-import { NestedContext, useNestRegister } from './hooks';
+import { PageStateType, PageView, PageViewRef } from '../PageView';
+import { NestedContext, useNestRegister, useVerifyProps } from './hooks';
 import { scrollTo } from './util';
-
-const TABS = ['tab1', 'tab2'];
-
-interface NestedTabViewProps {
-  renderHeader: () => React.ReactNode;
-  stickyHeight: number;
-  children: React.ReactNode;
-}
+import { NestedTabViewProps } from './type';
 
 const NestedTabView: React.FC<NestedTabViewProps> = (props) => {
-  const { renderHeader, stickyHeight, children } = props;
+  const {
+    renderHeader,
+    stickyHeight = 0,
+    children,
+    initialIndex = 0,
+    style,
+    tabProps,
+    pageProps,
+    onTabPress,
+    onPageSelected,
+    onPageScroll,
+    onPageScrollStateChanged,
+  } = useVerifyProps(props);
   const pageRef = useRef<PageViewRef>(null);
   const tabRef = useRef<TabBarRef>(null);
 
@@ -45,7 +46,7 @@ const NestedTabView: React.FC<NestedTabViewProps> = (props) => {
   const integralYOffset = useSharedValue(0);
   const totalRef = useRef();
 
-  const currentIdx = useSharedValue(0);
+  const currentIdx = useSharedValue(initialIndex);
 
   // 所有scroll共享的滚动距离，用于控制Header以及顶吸
   const sharedTranslate = useSharedValue(0);
@@ -183,62 +184,61 @@ const NestedTabView: React.FC<NestedTabViewProps> = (props) => {
     });
 
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <NestedContext.Provider
-        value={{
-          sharedTranslate,
-          currentIdx,
-          headerHeight,
-          stickyHeight,
-        }}
-      >
-        <GestureDetector gesture={panGesture}>
-          <Animated.View style={[{ flex: 1 }, containerStyle]}>
-            <PageView
-              ref={pageRef}
-              style={{ flex: 1 }}
-              onPageSelected={(currentPage) => {
-                tabRef.current &&
-                  tabRef.current?.keepScrollViewMiddle(currentPage);
-                // onPageSelected && onPageSelected(currentPage)
-                currentIdx.value = currentPage;
-              }}
-              onPageScroll={(translate) => {
-                tabRef.current && tabRef.current?.syncCurrentIndex(translate);
-                // onPageScroll && onPgeScroll(translate);
-              }}
-              onPageScrollStateChanged={() => {}}
+    <NestedContext.Provider
+      value={{
+        sharedTranslate,
+        currentIdx,
+        headerHeight,
+        stickyHeight,
+      }}
+    >
+      <GestureDetector gesture={panGesture}>
+        <Animated.View style={[style, containerStyle]}>
+          <PageView
+            {...{ ...pageProps }}
+            ref={pageRef}
+            onPageSelected={(currentPage) => {
+              tabRef.current &&
+                tabRef.current?.keepScrollViewMiddle(currentPage);
+              onPageSelected && onPageSelected(currentPage);
+              currentIdx.value = currentPage;
+            }}
+            onPageScroll={(translate) => {
+              tabRef.current && tabRef.current?.syncCurrentIndex(translate);
+              onPageScroll && onPageScroll(translate);
+            }}
+            onPageScrollStateChanged={(state: PageStateType) => {
+              onPageScrollStateChanged && onPageScrollStateChanged(state);
+            }}
+          >
+            {React.Children.map(children, (child: any, index) => {
+              const injectProps = {
+                registerNativeRef,
+                registerChildInfo,
+                index,
+              };
+              return React.cloneElement(child, injectProps);
+            })}
+          </PageView>
+          <GestureDetector gesture={headerPan}>
+            <Animated.View
+              onLayout={handleHeaderLayout}
+              style={[styles.headerContainer, headerStyle]}
             >
-              {React.Children.map(children, (child: any, index) => {
-                const injectProps = {
-                  registerNativeRef,
-                  registerChildInfo,
-                  index,
-                };
-                return React.cloneElement(child, injectProps);
-              })}
-            </PageView>
-            <GestureDetector gesture={headerPan}>
-              <Animated.View
-                onLayout={handleHeaderLayout}
-                style={[styles.headerContainer, headerStyle]}
-              >
-                {renderHeader && renderHeader()}
-                <TabBar
-                  ref={tabRef}
-                  tabs={TABS}
-                  tabBarflex={'equal-width'}
-                  onTabPress={(index) => {
-                    pageRef.current && pageRef.current?.setPage(index);
-                    // onTabPress && onTabPress(index);
-                  }}
-                />
-              </Animated.View>
-            </GestureDetector>
-          </Animated.View>
-        </GestureDetector>
-      </NestedContext.Provider>
-    </GestureHandlerRootView>
+              {renderHeader && renderHeader()}
+              <TabBar
+                {...{ ...tabProps }}
+                ref={tabRef}
+                onTabPress={(index) => {
+                  pageRef.current && pageRef.current?.setPage(index);
+                  onTabPress && onTabPress(index);
+                }}
+              />
+            </Animated.View>
+          </GestureDetector>
+        </Animated.View>
+      </GestureDetector>
+    </NestedContext.Provider>
   );
 };
 
diff --git a/src/components/NestedTabView/hooks.ts b/src/components/NestedTabView/hooks.ts
@@ -1,11 +1,17 @@
-import {
+import React, {
   useState,
   useMemo,
   useCallback,
   createContext,
   useContext,
 } from 'react';
+import { Dimensions } from 'react-native';
 import { SharedValue, AnimatedRef } from 'react-native-reanimated';
+import {
+  NestedContextProps,
+  NestedTabViewProps,
+  NestedTabViewVerifyProps,
+} from './type';
 
 interface ChildInfoType {
   scrollValue: SharedValue<number>;
@@ -69,14 +75,112 @@ export const useNestRegister = () => {
   };
 };
 
-interface NestedContextProps {
-  sharedTranslate: SharedValue<number>;
-  currentIdx: SharedValue<number>;
-  headerHeight: number;
-  stickyHeight: number;
-}
-
 export const NestedContext = createContext<NestedContextProps>(
   {} as NestedContextProps
 );
 export const useNested = () => useContext(NestedContext);
+
+const { width } = Dimensions.get('window');
+
+export const useVerifyProps = (
+  props: NestedTabViewProps
+): NestedTabViewVerifyProps => {
+  const {
+    tabs,
+    tabBarflex,
+    tabScrollEnabled,
+    spacing,
+    showSeparator,
+    separatorComponent,
+    hideSlider,
+    sliderComponent,
+    defaultSliderStyle,
+    tabBarItemStyle,
+    tabBarItemTitleStyle,
+    activeTextColor,
+    inactiveTextColor,
+    tabStyle,
+
+    pageScrollEnabled,
+    bounces,
+    gestureBack,
+    pageStyle,
+
+    onTabPress,
+    onPageScroll,
+    onPageScrollStateChanged,
+    onPageSelected,
+
+    initialIndex,
+    style,
+    renderHeader,
+    stickyHeight,
+    children,
+  } = props;
+
+  if (!Array.isArray(tabs)) {
+    throw new Error('TabBar tabs must be array');
+  }
+  if (tabs.length <= 0) {
+    throw new Error("TabBar tabs can't be empty");
+  }
+
+  const pageSize = React.Children.count(children);
+  if (pageSize === 0) {
+    throw new Error('PageView must be contains at least one chid');
+  }
+
+  if (pageSize !== tabs.length) {
+    throw new Error('TabView tabs length must be equal children');
+  }
+
+  let contentSize: number = width;
+  if (style && style.width) {
+    if (typeof style.width === 'number') {
+      contentSize = style.width;
+    } else {
+      throw new Error('TabView width only support number');
+    }
+  }
+
+  const tabProps = {
+    tabs,
+    tabBarflex,
+    tabScrollEnabled,
+    spacing,
+    showSeparator,
+    separatorComponent,
+    hideSlider,
+    sliderComponent,
+    defaultSliderStyle,
+    tabBarItemStyle,
+    tabBarItemTitleStyle,
+    activeTextColor,
+    inactiveTextColor,
+    style: { width: contentSize, ...tabStyle },
+    initialTab: initialIndex,
+  };
+
+  const pageProps = {
+    pageScrollEnabled,
+    bounces,
+    gestureBack,
+    style: { flex: 1, width: contentSize, ...pageStyle },
+    initialPage: initialIndex,
+  };
+
+  return {
+    pageProps,
+    tabProps,
+    style,
+    children,
+    renderHeader,
+    stickyHeight,
+    initialIndex,
+
+    onTabPress,
+    onPageScroll,
+    onPageScrollStateChanged,
+    onPageSelected,
+  };
+};
diff --git a/src/components/NestedTabView/type.ts b/src/components/NestedTabView/type.ts
