@xhsreds/reds-rn-next 0.8.3 → 0.8.4-beta202510231402

package/src/components/Carousel/Carousel.tsx

@@ -2,11 +2,13 @@ import React, { useEffect, useRef, useState, useMemo, ReactElement } from "react
 import { View, ScrollView, Dimensions, NativeSyntheticEvent, NativeScrollEvent, Image, Text } from "react-native";
 import getStyle from "./styles";
 import { useThemeColor } from "../ConfigProvider";
+import useMounted from "../../pvCount/useUnmountedProcess";
 import { RedsCarousel, DOTTYPE, DOTPLACEMENT, NUMBERPLACEMENT, CarouselDefaultProps } from "./interface";
 
 export const Carousel: React.FC<RedsCarousel> = (props) => {
+  useMounted("Carousel");
   const scrollViewRef = useRef<ScrollView>(null);
-  const [currentIndex, setCurrentIndex] = useState(0);
+  const [currentIndex, setCurrentIndex] = useState(1);
   const [isScrolling, setIsScrolling] = useState(false);
   const autoPlayTimer = useRef<any>(null);
   const [normalSize, setNormalSize] = useState({
@@ -19,32 +21,116 @@ export const Carousel: React.FC<RedsCarousel> = (props) => {
   const [distance, setDistance] = useState(0);
   const [realIndex, setRealIndex] = useState(0);
 
-  const themeColor = useThemeColor();
+  // 新增：存储children的实际尺寸
+  const [childrenSize, setChildrenSize] = useState({
+    width: 0,
+    height: 0,
+  });
+  const [isChildrenSizeMeasured, setIsChildrenSizeMeasured] = useState(false);
 
+  const themeColor = useThemeColor();
   const styles = getStyle(themeColor);
 
-  // Add duplicate items at the start and end for infinite scroll effect
+  // 修改：根据children实际尺寸计算容器尺寸
+  const containerSize = useMemo(() => {
+    let width = (props.style?.width as number) || Dimensions.get("window").width;
+    let height = (props.style?.height as number) || 300;
+
+    // 如果使用children且已测量出尺寸，则使用children的实际尺寸
+    if (props.children && isChildrenSizeMeasured && childrenSize.width > 0 && childrenSize.height > 0) {
+      if (!props.style?.width) {
+        width = childrenSize.width;
+      }
+      if (!props.style?.height) {
+        height = childrenSize.height;
+      }
+    }
+
+    return { width, height };
+  }, [props.style?.width, props.style?.height, props.children, isChildrenSizeMeasured, childrenSize]);
+
+  // 修改：处理children的onLayout事件
+  const handleChildLayout = (event: any) => {
+    const { width, height } = event.nativeEvent.layout;
+
+    // 只在尺寸发生变化时更新
+    if (width !== childrenSize.width || height !== childrenSize.height) {
+      setChildrenSize({ width, height });
+      setIsChildrenSizeMeasured(true);
+    }
+  };
+
   const extendedData = useMemo(() => {
     if (props.data?.length) {
+      // 如果不是无限循环，直接返回原数据
+      if (!props.infinite) {
+        return props.data;
+      }
       return [props.data[props.data.length - 1], ...(props.data || []), props.data[0]];
     } else if (props.children?.length) {
+      // 如果不是无限循环，直接返回原children
+      if (!props.infinite) {
+        return React.Children.map(props.children, (child: any, index: number) => {
+          if (React.isValidElement(child)) {
+            return React.cloneElement(child as any, {
+              onLayout: (e: any) => {
+                if (index === 0) {
+                  handleChildLayout(e);
+                }
+                if (!props.style?.height && index === 0) {
+                  setNormalSize((prev) => ({
+                    x: containerSize.width,
+                    y: e.nativeEvent?.layout.height,
+                  }));
+                }
+                // @ts-ignore
+                if (child.props?.onLayout) {
+                  // @ts-ignore
+                  child.props.onLayout?.(e);
+                }
+              },
+              ...((child.props || {}) as object),
+            });
+          }
+        });
+      }
+
       const cloneChild = [props.children[props.children.length - 1], ...(props.children || []), props.children[0]];
-      return React.Children.map(cloneChild, (child: any) => {
+      return React.Children.map(cloneChild, (child: any, index: number) => {
         if (React.isValidElement(child)) {
           return React.cloneElement(child as any, {
             onLayout: (e: any) => {
-              setNormalSize({
-                x: (props.style?.width || Dimensions.get("window").width) as number,
-                y: props.style?.height || e.nativeEvent.layout.height,
-              });
+              if (index === 1) {
+                handleChildLayout(e);
+              }
+              if (!props.style?.height && index === 1) {
+                setNormalSize((prev) => ({
+                  x: containerSize.width,
+                  y: e.nativeEvent?.layout.height,
+                }));
+              }
+              // @ts-ignore
+              if (child.props?.onLayout) {
+                // @ts-ignore
+                child.props.onLayout?.(e);
+              }
             },
+            ...((child.props || {}) as object),
           });
         }
       });
     } else {
       return [];
     }
-  }, [props.data, props.children, props.style]);
+  }, [props.data, props.children, containerSize.width, props.style?.height, props.infinite]);
+
+  // 初始化 normalSize
+  useEffect(() => {
+    setNormalSize({
+      x: containerSize.width,
+      y: containerSize.height,
+    });
+  }, [containerSize]);
 
   /**
    * 长度
@@ -58,12 +144,7 @@ export const Carousel: React.FC<RedsCarousel> = (props) => {
    */
   const dotList = useMemo(() => {
     return new Array(props.dotType === DOTTYPE.INDEFINITE ? props.initDotNumber : length).fill(0);
-  }, [props.dotType]);
-
-  /**
-   *
-   * @returns
-   */
+  }, [props.dotType, props.initDotNumber, length]);
 
   // Calculate dimensions based on mode
   const getItemDimensions = () => {
@@ -97,22 +178,14 @@ export const Carousel: React.FC<RedsCarousel> = (props) => {
   };
 
   useEffect(() => {
-    const { distance: DISTANCE, spacing: SPACING, containerPadding: CONTAINER_PADDING } = getItemDimensions();
-    setOffsetPerItem(DISTANCE + SPACING);
-    setContainerPadding(CONTAINER_PADDING);
-    setDistance(distance);
-    setSpacing(SPACING);
-  }, [normalSize]);
-
-  // 初始化时滚动到第一个实际元素
-  // useEffect(() => {
-  //   setTimeout(() => {
-  //     scrollViewRef.current?.scrollTo({
-  //       x: OFFSET_PER_ITEM * currentIndex,
-  //       animated: false,
-  //     });
-  //   }, 100);
-  // }, []);
+    if (normalSize.x > 0 && normalSize.y > 0) {
+      const { distance: DISTANCE, spacing: SPACING, containerPadding: CONTAINER_PADDING } = getItemDimensions();
+      setOffsetPerItem(DISTANCE + SPACING);
+      setContainerPadding(CONTAINER_PADDING);
+      setDistance(DISTANCE);
+      setSpacing(SPACING);
+    }
+  }, [normalSize, props.playingMode, props.distance, props.direction]);
 
   // 重置自动播放计时器
   const resetAutoPlayTimer = () => {
@@ -121,10 +194,22 @@ export const Carousel: React.FC<RedsCarousel> = (props) => {
       autoPlayTimer.current = null;
     }
 
-    if (props.autoPlay) {
+    if (props.autoPlay && length > 1) {
       const timer = setInterval(() => {
-        const nextIndex = currentIndex + 1;
-        scrollToIndex(nextIndex);
+        if (!isScrolling) {
+          const nextIndex = currentIndex + 1;
+
+          // 如果不是无限循环且已到最后一页，则停止自动播放
+          if (!props.infinite && nextIndex >= length) {
+            if (autoPlayTimer.current) {
+              clearInterval(autoPlayTimer.current);
+              autoPlayTimer.current = null;
+            }
+            return;
+          }
+
+          scrollToIndex(nextIndex);
+        }
       }, props.duration);
       autoPlayTimer.current = timer;
     }
@@ -132,7 +217,7 @@ export const Carousel: React.FC<RedsCarousel> = (props) => {
 
   // 初始化自动播放
   useEffect(() => {
-    if (props.autoPlay && !isScrolling) {
+    if (props.autoPlay && !isScrolling && offsetPerItem > 0) {
       resetAutoPlayTimer();
     }
     return () => {
@@ -140,28 +225,50 @@ export const Carousel: React.FC<RedsCarousel> = (props) => {
         clearInterval(autoPlayTimer.current);
       }
     };
-  }, [currentIndex, isScrolling, props.autoPlay]);
+  }, [currentIndex, isScrolling, props.autoPlay, offsetPerItem, length]);
 
-  // 添加一个快速滚动的方法
+  // 优化滚动方法
   const scrollToIndex = (index: number, animated: boolean = true) => {
+    if (offsetPerItem <= 0) return;
+
+    // 如果不是无限循环模式，限制索引范围
+    if (!props.infinite) {
+      index = Math.max(0, Math.min(index, length - 1));
+    }
+
     requestAnimationFrame(() => {
-      const cardDistance = props.playingMode === "normal" ? 0 : distance * 0.1 * (index - 1);
-      const x = (index > length + 1 ? 1 : index) * offsetPerItem - cardDistance;
+      let scrollOffset = index * offsetPerItem;
+
+      if (props.playingMode !== "normal") {
+        scrollOffset -= containerPadding;
+      }
+
       scrollViewRef.current?.scrollTo({
-        ...(props.direction === "horizontal" ? { x } : { y: x }),
-        animated: index > length + 1 ? false : animated,
+        ...(props.direction === "horizontal" ? { x: scrollOffset } : { y: scrollOffset }),
+        animated,
       });
     });
-    const curIndex = index > length + 1 ? 1 : index;
-    setCurrentIndex(curIndex);
-    setRealIndex(currentIndex === 0 ? length - 1 : currentIndex === length + 1 ? 0 : currentIndex - 1);
+
+    setCurrentIndex(index);
+
+    // 计算真实索引
+    let newRealIndex: number;
+    if (props.infinite) {
+      newRealIndex = index === 0 ? length - 1 : index === length + 1 ? 0 : index - 1;
+    } else {
+      newRealIndex = index;
+    }
+    setRealIndex(newRealIndex);
   };
 
   useEffect(() => {
-    props.onChange?.(props.data?.[realIndex] || props.children?.[realIndex], realIndex);
-  }, [realIndex]);
+    if (realIndex >= 0 && realIndex < length) {
+      props.onChange?.(props.data?.[realIndex] || props.children?.[realIndex], realIndex);
+    }
+  }, [realIndex, props.data, props.children, length]);
 
   const handleScrollBegin = () => {
+    if (!props.handlable) return;
     setIsScrolling(true);
     // 手动滚动开始时清除自动播放计时器
     if (autoPlayTimer.current) {
@@ -171,63 +278,92 @@ export const Carousel: React.FC<RedsCarousel> = (props) => {
   };
 
   const handleScrollEnd = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    if (offsetPerItem <= 0) {
+      setIsScrolling(false);
+      return;
+    }
+
     const offset =
       props.direction === "horizontal" ? event.nativeEvent.contentOffset.x : event.nativeEvent.contentOffset.y;
 
-    // 计算最接近的索引
-    const index = Math.round(offset / offsetPerItem);
+    let index: number;
+    if (props.playingMode === "normal") {
+      index = Math.round(offset / offsetPerItem);
+    } else {
+      index = Math.round((offset + containerPadding) / offsetPerItem);
+    }
+
+    index = Math.max(0, Math.min(index, extendedData.length - 1));
 
     // 处理边界情况
-    if (index <= 0) {
-      // 滚动到最后一项
-      scrollToIndex(length, false);
-    } else if (index >= extendedData.length - 1) {
-      // 滚动到第一项
-      scrollToIndex(1, false);
+    if (props.infinite) {
+      // 无限循环模式的边界处理
+      if (index <= 0) {
+        scrollToIndex(length, false);
+      } else if (index >= extendedData.length - 1) {
+        scrollToIndex(1, false);
+      } else {
+        setCurrentIndex(index);
+        const newRealIndex = index === 0 ? length - 1 : index === length + 1 ? 0 : index - 1;
+        setRealIndex(newRealIndex);
+      }
     } else {
-      // 正常滚动到最近的索引位置
-      scrollToIndex(index);
+      // 非无限循环模式
+      const clampedIndex = Math.max(0, Math.min(index, length - 1));
+      setCurrentIndex(clampedIndex);
+      setRealIndex(clampedIndex);
     }
 
     setIsScrolling(false);
-    // 滚动结束后重置自动播放计时器
-    resetAutoPlayTimer();
   };
 
   /**
    * dot 样式
    */
   const getDotStyle = (index: number) => {
-    return props.dotType === DOTTYPE.DEFINITE
-      ? currentIndex - 1 === index
-        ? props.dotPlacement === DOTPLACEMENT.INSIDE
-          ? styles.activeDot
-          : styles.outSideActiveDot
-        : props.dotPlacement === DOTPLACEMENT.INSIDE
-          ? styles.dot
-          : styles.outSideDot
-      : props.initDotNumber && (currentIndex - 1) % props.initDotNumber === index
-        ? props.dotPlacement === DOTPLACEMENT.INSIDE
-          ? styles.activeDot
-          : styles.outSideActiveDot
-        : props.dotPlacement === DOTPLACEMENT.INSIDE
-          ? styles.dot
-          : styles.outSideDot;
+    const isActive =
+      props.dotType === DOTTYPE.DEFINITE
+        ? realIndex === index
+        : props.initDotNumber && realIndex % props.initDotNumber === index;
+
+    return isActive
+      ? props.dotPlacement === DOTPLACEMENT.INSIDE
+        ? [styles.activeDot, props.activeDotStyle]
+        : [styles.outSideActiveDot, props.activeDotStyle]
+      : props.dotPlacement === DOTPLACEMENT.INSIDE
+        ? [styles.dot, props.dotStyle]
+        : [styles.outSideDot, props.dotStyle];
   };
 
   // 初始化执行一次
   useEffect(() => {
-    if (offsetPerItem) {
-      setCurrentIndex((props.currentIndex || 0) + 1);
-      scrollToIndex((props.currentIndex || 0) + 1);
+    if (offsetPerItem > 0 && extendedData.length > 0) {
+      let initialIndex = props.currentIndex || 0;
+
+      // 如果是无限循环模式，需要加1
+      if (props.infinite) {
+        initialIndex += 1;
+      }
+
+      scrollToIndex(initialIndex, false);
     }
-  }, [offsetPerItem]);
+  }, [offsetPerItem, extendedData.length, props.infinite]);
 
+  useEffect(() => {
+    // 如果是无限循环模式，初始索引为1；否则为0
+    const initialCurrentIndex = props.infinite ? 1 : 0;
+    setCurrentIndex(initialCurrentIndex);
+  }, [props.infinite]);
+
+  // 优化 handleLoad 函数
   const handleLoad = ({ nativeEvent }: any) => {
-    setNormalSize({
-      x: (props.style?.width || Dimensions.get("window").width) as number,
-      y: (props.style?.height || nativeEvent.source.height) as number,
-    });
+    // 只有在没有设置固定高度时才更新
+    if (!props.style?.height) {
+      setNormalSize((prev) => ({
+        ...prev,
+        y: nativeEvent.source.height,
+      }));
+    }
   };
 
   return (
@@ -236,10 +372,10 @@ export const Carousel: React.FC<RedsCarousel> = (props) => {
         styles.container,
         {
           overflow: "hidden",
-          height: normalSize.y,
-          width: "100%",
-          ...props.style,
+          height: containerSize.height,
+          width: containerSize.width,
         },
+        props.style,
       ]}
     >
       <ScrollView
@@ -251,24 +387,35 @@ export const Carousel: React.FC<RedsCarousel> = (props) => {
         onScrollBeginDrag={handleScrollBegin}
         onScrollEndDrag={handleScrollEnd}
         onMomentumScrollEnd={handleScrollEnd}
+        scrollEventThrottle={16}
+        decelerationRate="fast"
+        scrollEnabled={props.handlable}
+        // 修改：根据infinite参数设置是否可以滚动到边界外
+        bounces={props.infinite}
         contentContainerStyle={[
           styles.scrollContent,
           props.direction === "horizontal"
-            ? {
-                paddingHorizontal: containerPadding,
-              }
-            : {},
+            ? { paddingHorizontal: containerPadding }
+            : { paddingVertical: containerPadding },
         ]}
       >
         {extendedData.map((item: any, index: number) => (
           <View
-            key={String(item) + index}
+            key={`${String(item)}_${index}`}
             style={[
               styles.itemContainer,
               {
                 ...(props.direction === "horizontal"
-                  ? { marginHorizontal: spacing / 2 }
-                  : { marginVertical: spacing / 2 }),
+                  ? {
+                      marginHorizontal: spacing / 2,
+                      width: distance,
+                      height: normalSize.y,
+                    }
+                  : {
+                      marginVertical: spacing / 2,
+                      width: normalSize.x,
+                      height: distance,
+                    }),
                 transform: [
                   {
                     scale:
@@ -286,12 +433,11 @@ export const Carousel: React.FC<RedsCarousel> = (props) => {
           >
             {props.data?.length ? (
               <Image
-                key={String(item) + index}
                 source={{ uri: item as string }}
                 style={{
                   borderRadius: props.playingMode === "normal" ? 0 : 12,
-                  width: offsetPerItem,
-                  height: normalSize.y,
+                  width: props.direction === "horizontal" ? distance : normalSize.x,
+                  height: props.direction === "horizontal" ? normalSize.y : distance,
                 }}
                 resizeMode="contain"
                 onLoad={handleLoad}
@@ -303,46 +449,43 @@ export const Carousel: React.FC<RedsCarousel> = (props) => {
           </View>
         ))}
       </ScrollView>
-      {/** dot */}
-      {props.displayDots ? (
+
+      {/* 其余的 Dots 和 Numbers 组件保持不变 */}
+      {props.displayDots && dotList.length > 0 && (
         <View style={[props.dotPlacement === DOTPLACEMENT.INSIDE ? styles.dotContainer : styles.dotOutsideContainer]}>
-          {props.dotType === DOTTYPE.INDEFINITE ? (
+          {props.dotType === DOTTYPE.INDEFINITE && (
             <View
-              style={[props.dotPlacement === DOTPLACEMENT.INSIDE ? styles.smallDot : styles.smallOutsideDot]}
-            ></View>
-          ) : (
-            <></>
+              style={[
+                props.dotPlacement === DOTPLACEMENT.INSIDE ? styles.smallDot : styles.smallOutsideDot,
+                props.dotStyle,
+              ]}
+            />
           )}
           {dotList.map((_, index) => (
-            <View key={index} style={getDotStyle(index)}></View>
+            <View key={index} style={getDotStyle(index)} />
           ))}
-          {props.dotType === DOTTYPE.INDEFINITE ? (
+          {props.dotType === DOTTYPE.INDEFINITE && (
             <View
-              style={[props.dotPlacement === DOTPLACEMENT.INSIDE ? styles.smallDot : styles.smallOutsideDot]}
-            ></View>
-          ) : (
-            <></>
+              style={[
+                props.dotPlacement === DOTPLACEMENT.INSIDE ? styles.smallDot : styles.smallOutsideDot,
+                props.dotStyle,
+              ]}
+            />
           )}
         </View>
-      ) : (
-        <></>
       )}
-      {/** 数字 */}
-      {props.displayNumbers ? (
+
+      {props.displayNumbers && (
         <View
           style={[
             styles.numberContainer,
             props.numberPlacement === NUMBERPLACEMENT.TOP ? styles.numberTop : styles.numberBottom,
           ]}
         >
-          <Text style={styles.number}>
-            {currentIndex === 0 ? length : currentIndex === length + 1 ? 1 : currentIndex}
-          </Text>
+          <Text style={styles.number}>{realIndex + 1}</Text>
           <Text style={styles.number}>/</Text>
           <Text style={styles.number}>{length}</Text>
         </View>
-      ) : (
-        <></>
       )}
     </View>
   );

package/src/components/Carousel/demo/index.tsx

@@ -1,6 +1,6 @@
-import React, { useRef, useEffect, useState } from "react";
-import { View, Text, StyleSheet, ScrollView, Dimensions } from "react-native";
-import { Carousel, CarouselType } from "@xhs/reds-rn-next";
+import React, { useState } from "react";
+import { View, Text, StyleSheet, ScrollView, Image as RNImage } from "react-native";
+import { Carousel } from "@xhs/reds-rn-next";
 const styles = StyleSheet.create({
   container: {
     paddingBottom: 100,
@@ -41,15 +41,19 @@ export default function App() {
     <ScrollView contentContainerStyle={styles.container}>
       <Carousel
         data={images}
-        autoPlay={false}
-        currentIndex={3}
+        autoPlay={true}
+        // currentIndex={3}
         onChange={handleChange}
         onClick={handleClick}
         displayNumbers={true}
-        playingMode={CarouselType.PLAYINGMODE.CARD}
-        // playingMode={CarouselType.PLAYINGMODE.COMPACT}
+        duration={3000}
+        style={{
+          height: 500,
+          width: 430,
+        }}
+        handlable={false}
       />
-      {/* <Carousel
+      <Carousel
         autoPlay={true}
         currentIndex={3}
         onChange={handleChange}
@@ -66,7 +70,20 @@ export default function App() {
         })}
       </Carousel>
 
-      <Desc>自动播放（默认轮播间隔1000ms）</Desc>
+      <Carousel
+        autoPlay={true}
+        currentIndex={3}
+        onChange={handleChange}
+        onClick={handleClick}
+        infinite={false}
+        dotStyle={{ backgroundColor: "green" }}
+        displayDots={true}
+      >
+        {images.map((item, idx) => (
+          <RNImage style={{ width: 300, height: 200 }} source={{ uri: item }} />
+        ))}
+      </Carousel>
+      {/* <Desc>自动播放（默认轮播间隔1000ms）</Desc>
       <Carousel data={images} duration={3000} />
 
       <Desc>数量过多的dot如何展示(默认三张)</Desc>

package/src/components/Carousel/doc/index.mdx

@@ -27,6 +27,10 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | distance        | 间隔                                                | number                                       | 0                   |
 | style           | 样式                                                | ViewStyle                                    | `{}`                |
 | direction       | 轮播方向                                            | "horizontal" | "vertical" | string | horizontal          |
+| infinite        | 是否循环播放                                        | boolean                                      | true                |
+| dotStyle        | dot style                                           | any                                          | `{}`                |
+| activeDotStyle  | active dot style                                    | any                                          | `{}`                |
+| handlable       | 是否可以手动滑动切换图片                            | boolean                                      | true                |
 
 ### Events
 

package/src/components/Carousel/interface/index.ts

@@ -39,6 +39,10 @@ export interface RedsCarousel {
   onClick?: (value: any, index: number) => void;
   style?: ViewStyle;
   direction?: "horizontal" | "vertical" | string;
+  infinite?: boolean;
+  dotStyle?: any;
+  activeDotStyle?: any;
+  handlable?: boolean;
 }
 
 export interface RedsCarouselEvent {}
@@ -58,4 +62,8 @@ export const CarouselDefaultProps = {
   distance: 0,
   style: {},
   direction: "horizontal",
+  infinite: true,
+  dotStyle: {},
+  activeDotStyle: {},
+  handlable: true,
 };