feat: 把Tabbar高度设置为NestedTabView的默认stickyHeight

Author: mahaaoo

example/src/pages/NestedTabViewExample.tsx

@@ -35,7 +35,6 @@ const HeadTabViewExample: React.FC<TabViewExampleProps> = (props) => {
     <NestedTabView
       ref={ref}
       style={{ flex: 1 }}
-      stickyHeight={55} //TabBar的高度
       renderHeader={() => (
         <View
           style={{

src/components/NestedTabView/NestedScene.tsx

@@ -69,6 +69,7 @@ const NestedScene: React.FC<NestedSceneProps> = (props) => {
   };
 
   const snap = useCallback(() => {
+    // reanimated防抖
     'worklet';
     if (!snapEnabled) return;
     cancelAnimation(checkEndScroll);

src/components/NestedTabView/NestedTabView.tsx

@@ -43,7 +43,7 @@ const NestedTabView = forwardRef<NestedTabViewRef, NestedTabViewProps>(
   (props, ref) => {
     const {
       renderHeader,
-      stickyHeight = 0,
+      stickyHeight: initialStickyHeight,
       children,
       initialIndex = 0,
       style,
@@ -85,6 +85,8 @@ const NestedTabView = forwardRef<NestedTabViewRef, NestedTabViewProps>(
     const sharedTranslate = useSharedValue(0);
     const [headerHeight, setHeaderHeight] = useState(0);
     const [tabViewHeight, setTabViewHeight] = useState(0);
+    const [stickyHeight, setStickyHeight] = useState(0);
+
     const refreshStatus = useSharedValue<RefreshStatus>(RefreshStatus.Idle);
     const isTouching = useSharedValue(false);
 
@@ -192,6 +194,17 @@ const NestedTabView = forwardRef<NestedTabViewRef, NestedTabViewProps>(
       [tabViewHeight]
     );
 
+    const handleTabBarHeightLayout = useCallback(
+      (e: LayoutChangeEvent) => {
+        if (typeof initialStickyHeight === 'number') {
+          setStickyHeight(initialStickyHeight);
+        } else {
+          setStickyHeight(e.nativeEvent.layout.height);
+        }
+      },
+      [stickyHeight, initialStickyHeight]
+    );
+
     const childMinHeight = useMemo(() => {
       return headerHeight + tabViewHeight - stickyHeight;
     }, [headerHeight, tabViewHeight, stickyHeight]);
@@ -431,6 +444,7 @@ const NestedTabView = forwardRef<NestedTabViewRef, NestedTabViewProps>(
                 <TabBar
                   {...{ ...tabProps }}
                   ref={tabRef}
+                  onLayout={handleTabBarHeightLayout}
                   onTabPress={(index) => {
                     pageRef.current && pageRef.current?.setPage(index);
                     onTabPress && onTabPress(index);

src/components/TabBar/TabBar.tsx

@@ -30,6 +30,7 @@ const TabBar = forwardRef<TabBarRef, TabBarProps>((props, ref) => {
     separatorComponent,
     sliderComponent,
     onTabPress,
+    onLayout,
     activeTextColor,
     inactiveTextColor,
 
@@ -70,6 +71,10 @@ const TabBar = forwardRef<TabBarRef, TabBarProps>((props, ref) => {
     onTabPress && onTabPress(index);
   };
 
+  const handleLayout = (e: LayoutChangeEvent) => {
+    onLayout && onLayout(e);
+  };
+
   const onTabBarItemLayout = (index: number, layout: TabBarItemLayout) => {
     layouts[index] = layout;
     const length = layouts.filter((layout) => layout.width > 0).length;
@@ -141,7 +146,7 @@ const TabBar = forwardRef<TabBarRef, TabBarProps>((props, ref) => {
   });
 
   return (
-    <View style={[{ height: 55 }, style]}>
+    <View style={[{ height: 55 }, style]} onLayout={handleLayout}>
       <ScrollView
         ref={scrollRef}
         horizontal

src/components/TabBar/type.ts

@@ -1,4 +1,4 @@
-import { DimensionValue, TextStyle, ViewStyle } from 'react-native';
+import { DimensionValue, LayoutChangeEvent, TextStyle, ViewStyle } from 'react-native';
 import { SharedValue } from 'react-native-reanimated';
 
 export interface TabBarProps {
@@ -20,6 +20,7 @@ export interface TabBarProps {
   inactiveTextColor?: string;
 
   onTabPress?: (index: number) => void;
+  onLayout?: (e: LayoutChangeEvent) => void;
 }
 
 export interface TabBarRef {