fix(swiper):修改点击设置初始位置

Author: huqiaoli

packages/core/src/ImageViewer/index.tsx

@@ -20,13 +20,12 @@ export interface ImageViewerProps extends ViewProps {
   height?: number;
   /** 图像源（远程URL或本地文件资源 */
   src?: string | ImageViewerDataSourceProps[];
-  /** 默认显示第几张图片 */
-  defaultIndex?: number;
 }
 
 function ImageViewer(props: ImageViewerProps) {
-  const { width = 150, height = 150, src = defaultImage, defaultIndex = 0, ...others } = props;
+  const { width = 150, height = 150, src = defaultImage, ...others } = props;
   const [visible, setVisible] = useState(false);
+  const [index, setIndex] = useState<number>(0);
   const fadeAnim = useRef(new Animated.Value(0)).current;
 
   useMemo(() => {
@@ -43,11 +42,16 @@ function ImageViewer(props: ImageViewerProps) {
 
   const imgUrl = useMemo(() => {
     if (Array.isArray(src)) {
-      return src[defaultIndex].url;
+      return src[0].url;
     }
     return src;
   }, [src]);
 
+  const onImgClick = (index: number) => {
+    setIndex(index);
+    setVisible(true);
+  };
+
   return (
     <View style={{}}>
       <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
@@ -57,7 +61,7 @@ function ImageViewer(props: ImageViewerProps) {
               <TransitionImage
                 key={index}
                 style={{ width: width, height: height, flex: 1 }}
-                onPress={() => setVisible(true)}
+                onPress={() => onImgClick(index)}
                 source={{ uri: item.url }}
                 PlaceholderContent={<ActivityIndicator />}
                 transition={true}
@@ -79,7 +83,7 @@ function ImageViewer(props: ImageViewerProps) {
       <MaskLayer visible={visible} onDismiss={() => setVisible(false)} opacity={0.9}>
         <Animated.View style={[styles.content, { opacity: fadeAnim }]}>
           {Array.isArray(src) ? (
-            <Swiper dataSource={src} height={200} autoplay={false} />
+            <Swiper dataSource={src} height={200} autoplay={false} index={index} />
           ) : (
             <Image style={{ width: '100%', height: '100%', resizeMode: 'contain' }} source={{ uri: src }} />
           )}

packages/core/src/Swiper/index.tsx

@@ -31,6 +31,8 @@ export interface SwiperProps {
   autoplay?: boolean;
   // 指示点样式 dot: 圆点  block: 方块
   dotStyle?: dotType;
+  // 初始位置
+  index?: number;
   loading?: boolean;
 }
 const Swiper = (porps: SwiperProps) => {
@@ -44,11 +46,21 @@ const Swiper = (porps: SwiperProps) => {
     borderRadius = 0,
     dotStyle = 'dot',
     loading = false,
+    index = 0,
   } = porps;
-  let [curIndex, setCurIndex] = useState(0);
+  let [curIndex, setCurIndex] = useState(index);
   let timer = useRef<NodeJS.Timeout | undefined>();
   const scrollToRef: any = useRef();
 
+  useEffect(() => {
+    if (scrollToRef && scrollToRef.current && index !== 0) {
+      setTimeout(() => {
+        onClickDot(index);
+        scrollToRef.current.scrollTo({ x: width * index, y: 0, animated: true });
+      }, 0);
+    }
+  }, [scrollToRef, index]);
+
   // 自动播放
   const autoPlay = useCallback(() => {
     clearInterval(timer.current as unknown as number);