解决折叠卡片列表点击折叠报错

Author: hy

example/examples/src/routes/CardCollapse/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import {ScrollView, View, Image} from 'react-native';
-import {CardCollapse} from '@uiw/react-native';
+import { ScrollView, View, Image } from 'react-native';
+import { CardCollapse } from '@uiw/react-native';
 import Layout from '../../Layout';
 import map from 'lodash/map';
 
@@ -12,20 +12,20 @@ const contents = [
 ];
 
 const CardCollapseDemo = (props: any) => {
-  const {Header} = Layout;
-  const {route} = props;
+  const { Header } = Layout;
+  const { route } = props;
   const description = route.params.description;
   const title = route.params.title;
 
   const renderItem = (_: string, index: number) => {
     return (
-      <View key={index} style={{padding: 12}}>
-        <Image source={{uri: contents[index]}} style={{height: 180}} />
+      <View key={index} style={{ padding: 12 }}>
+        <Image source={{ uri: contents[index] }} style={{ height: 180 }} />
       </View>
     );
   };
   return (
-    <ScrollView style={{flex: 1}}>
+    <ScrollView style={{ flex: 1 }}>
       <Header title={title} description={description} />
       <Header description={'基本使用'} />
       <CardCollapse isCollapsed={false} disablePresses={false}>

packages/core/src/CardCollapse/README.md

@@ -23,10 +23,10 @@ const contents = [
 
 class Demo extends Component {
   render() {
-      const renderItem = (_, index) => {
+  const renderItem = (_, index) => {
     return (
-      <View key={index} style={{ padding: 18 }}>
-        <Image source={{uri: contents[index]}} style={{ height: 150 }} />
+      <View key={index} style={{ padding: 20,backgroundColor: '#fff'}}>
+          <Image source={{uri: contents[index]}} style={{ height: 120 }} /> 
       </View>
     );
   }

packages/core/src/CardCollapse/index.tsx

@@ -92,17 +92,6 @@ export default function CardCollapse(props: CardCollapseProps) {
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
   }, [collapsed]);
 
-  function getItemScale(index: number) {
-    if (collapsed) {
-      if (index === itemsCount - 2) {
-        return 0.95;
-      }
-      if (index === itemsCount - 1) {
-        return 0.9;
-      }
-    }
-    return 1;
-  }
   // 动画
   const animate = async () => {
     return Promise.all([animateValues(), animateCards()]);
@@ -133,6 +122,13 @@ export default function CardCollapse(props: CardCollapseProps) {
     });
   };
 
+  function getItemScale(index: number) {
+    if (collapsed) {
+      return 0.9;
+    }
+    return 1;
+  }
+
   const animateCards = () => {
     const promises = [];
     for (let index = 0; index < itemsCount; index++) {
@@ -210,21 +206,23 @@ export default function CardCollapse(props: CardCollapseProps) {
 
   const renderItem = (item: JSX.Element | JSX.Element[], index: number) => {
     return (
-      <Animated.View
+      < Animated.View
         key={index}
-        onLayout={index === 0 ? onLayout : undefined}
-        style={[
-          Platform.OS === 'ios' && styles.containerShadow,
-          getStyle(index),
-          {
-            borderRadius: Platform.OS === 'ios' ? itemBorderRadius : undefined,
-            alignSelf: 'center',
-            zIndex: itemsCount - index,
-            transform: [{ scaleX: animatedScaleArray[index] }],
-            width: Dimensions.get('screen').width - 40,
-            height: collapsed ? firstItemHeight : undefined,
-          },
-        ]}
+        onLayout={index === 0 ? onLayout : undefined
+        }
+        style={
+          [
+            Platform.OS === 'ios' && styles.containerShadow,
+            getStyle(index),
+            {
+              borderRadius: Platform.OS === 'ios' ? itemBorderRadius : undefined,
+              alignSelf: 'center',
+              zIndex: itemsCount - index,
+              transform: [{ scaleX: animatedScaleArray[index] }],
+              width: Dimensions.get('screen').width - 40,
+              height: collapsed ? firstItemHeight : undefined,
+            },
+          ]}
         collapsable={false}
       >
         <Container
@@ -237,7 +235,7 @@ export default function CardCollapse(props: CardCollapseProps) {
             </Animated.View>
           </TouchableOpacity>
         </Container>
-      </Animated.View>
+      </Animated.View >
     );
   };
   return (