Merge pull request #816 from thundersdata-frontend/rn-issue

fix: 修复多个组件的bug

.changeset/selfish-squids-prove.md

@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': minor
+---
+
+fix: 修复多个组件的bug

packages/react-native/src/accordion/index.tsx

@@ -14,8 +14,6 @@ import { Theme } from '../theme';
 import { AccordionProps, Section } from './type';
 import useAccordion from './useAccordion';
 
-const { ONE_PIXEL, px } = helpers;
-
 const Accordion: FC<AccordionProps> = ({
   sections = [],
   multiple = true,
@@ -76,7 +74,7 @@ const AccordionItem: FC<
 }) => {
   const theme = useTheme<Theme>();
 
-  const { bodyStyle, iconStyle, progress, handleLayout, handlePress } = useAccordion({
+  const { iconStyle, heightStyle, progress, contentRef, handlePress } = useAccordion({
     multiple,
     currentIndex,
     index,
@@ -106,7 +104,7 @@ const AccordionItem: FC<
   }, [content]);
 
   return (
-    <Box backgroundColor={'white'} flex={1}>
+    <Box backgroundColor={'white'} overflow={'hidden'}>
       <Pressable
         activeOpacity={activeOpacity}
         onPress={handlePress}
@@ -117,7 +115,7 @@ const AccordionItem: FC<
             justifyContent: 'space-between',
             paddingHorizontal: theme.spacing.x2,
             paddingVertical: theme.spacing.x2,
-            borderBottomWidth: ONE_PIXEL,
+            borderBottomWidth: helpers.ONE_PIXEL,
             borderBottomColor: theme.colors.border,
             backgroundColor: theme.colors.white,
           },
@@ -129,14 +127,25 @@ const AccordionItem: FC<
           customIcon({ progress })
         ) : (
           <Animated.View style={iconStyle}>
-            <SvgIcon name="down" color={theme.colors.icon} size={px(20)} />
+            <SvgIcon name="down" color={theme.colors.icon} size={helpers.px(20)} />
           </Animated.View>
         )}
       </Pressable>
-      <Animated.View style={[{ position: 'relative', overflow: 'hidden' }, bodyStyle]}>
-        <Box position={'absolute'} collapsable={false} onLayout={handleLayout} style={contentStyle}>
+      <Animated.View style={heightStyle}>
+        <Animated.View
+          ref={contentRef}
+          collapsable={false}
+          style={[
+            contentStyle,
+            {
+              position: 'absolute',
+              width: '100%',
+              top: 0,
+            },
+          ]}
+        >
           {Content}
-        </Box>
+        </Animated.View>
       </Animated.View>
     </Box>
   );

packages/react-native/src/accordion/useAccordion.ts

@@ -1,9 +1,15 @@
 import { useEffect } from 'react';
-import { LayoutChangeEvent } from 'react-native';
-import { interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
-import { mix } from 'react-native-redash';
+import Animated, {
+  measure,
+  runOnUI,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 
-import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
+import { useMemoizedFn } from '@td-design/rn-hooks';
 
 export default function useAccordion({
   multiple,
@@ -16,52 +22,46 @@ export default function useAccordion({
   index: number;
   onPress: (index: number) => void;
 }) {
-  const progress = useSharedValue(0);
-  const [bodySectionHeight, setBodySectionHeight] = useSafeState(0);
+  const contentRef = useAnimatedRef<Animated.View>();
+  const heightValue = useSharedValue(0);
+  const open = useSharedValue(false);
 
-  const handleLayout = (e: LayoutChangeEvent) => {
-    setBodySectionHeight(Math.ceil(e.nativeEvent.layout.height));
-  };
-
-  const bodyStyle = useAnimatedStyle(() => {
-    return {
-      height: interpolate(progress.value, [0, 1], [0, bodySectionHeight]),
-    };
-  });
-
-  const iconStyle = useAnimatedStyle(() => {
-    return {
-      transform: [
-        {
-          rotateZ: `${mix(progress.value, 0, Math.PI)}rad`,
-        },
-      ],
-    };
-  });
+  const progress = useDerivedValue(() => (open.value ? withTiming(1) : withTiming(0)));
 
+  /** 如果 multiple=false，则非当前index的都要收起来 */
   useEffect(() => {
-    if (currentIndex === undefined) return;
-
-    if (!multiple) {
-      if (currentIndex !== index) {
-        progress.value = withTiming(0);
-      } else {
-        progress.value = withTiming(1);
-      }
+    if (!multiple && currentIndex !== index) {
+      heightValue.value = withTiming(0);
+      open.value = false;
     }
-  }, [multiple, currentIndex, index, onPress]);
+  }, [multiple, currentIndex, index]);
+
+  const iconStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${progress.value * -180}deg` }],
+  }));
+
+  const heightStyle = useAnimatedStyle(() => ({
+    height: heightValue.value,
+  }));
 
   const handlePress = () => {
-    progress.value = withTiming(progress.value === 0 ? 1 : 0);
+    if (heightValue.value === 0) {
+      runOnUI(() => {
+        'worklet';
+        heightValue.value = withTiming(measure(contentRef)?.height ?? 0);
+      })();
+    } else {
+      heightValue.value = withTiming(0);
+    }
+    open.value = !open.value;
     onPress(index);
   };
 
   return {
-    bodyStyle,
+    contentRef,
     iconStyle,
-    progress,
-
-    handleLayout,
+    heightStyle,
     handlePress: useMemoizedFn(handlePress),
+    progress,
   };
 }