fix(imageViewer):添加自定义多张图片查看

huqiaoli · xingyuefeng · commit 9641652d7251 · 2023-01-06T13:06:47.000+08:00
diff --git a/example/examples/src/routes/ImageViewer/index.tsx b/example/examples/src/routes/ImageViewer/index.tsx
@@ -21,11 +21,19 @@ export default class Index extends Component<IndexProps> {
             <Card title="基础使用">
               <ImageViewer />
             </Card>
-            <Card title="自定义图片">
+            <Card title="自定义单张图片">
+              <ImageViewer height={100} width={100} src="https://img11.51tietu.net/pic/2016-071418/20160714181543xyu10ukncwf221991.jpg" />
+            </Card>
+            <Card title="自定义多张图片">
               <ImageViewer
                 height={100}
                 width={100}
-                src="https://img11.51tietu.net/pic/2016-071418/20160714181543xyu10ukncwf221991.jpg"
+                defaultIndex={2}
+                src={[
+                  {url: 'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg'},
+                  {url: 'https://iknow-pic.cdn.bcebos.com/810a19d8bc3eb135828572d2ab1ea8d3fd1f441d'},
+                  {url: 'https://wx1.sinaimg.cn/mw690/4718260ely1gt2cg5r9zij22yo1o0x6p.jpg'},
+                ]}
               />
             </Card>
           </Body>
diff --git a/packages/core/src/ImageViewer/README.md b/packages/core/src/ImageViewer/README.md
@@ -63,13 +63,25 @@ export default class Index extends Component<IndexProps> {
         <Layout>
           <Header title={title} description={description} />
           <Body style={{ backgroundColor: '#fff' }}>
-            <Card title="自定义图片">
+            <Card title="自定义单张图片">
               <ImageViewer
                 height={100}
                 width={100}
                 src="https://img11.51tietu.net/pic/2016-071418/20160714181543xyu10ukncwf221991.jpg"
               />
             </Card>
+            <Card title="自定义多张图片">
+              <ImageViewer
+                height={100}
+                width={100}
+                defaultIndex={2}
+                src={[
+                  { url: 'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg' },
+                  { url: 'https://iknow-pic.cdn.bcebos.com/810a19d8bc3eb135828572d2ab1ea8d3fd1f441d' },
+                  { url: 'https://wx1.sinaimg.cn/mw690/4718260ely1gt2cg5r9zij22yo1o0x6p.jpg' }
+                ]}
+              />
+            </Card>
           </Body>
           <Footer />
         </Layout>
diff --git a/packages/core/src/ImageViewer/index.tsx b/packages/core/src/ImageViewer/index.tsx
@@ -2,23 +2,30 @@ import React, { useState, useMemo, useRef } from 'react';
 import { StyleSheet, ViewProps, Dimensions, View, Image, Animated } from 'react-native';
 import TransitionImage, { ImageProps } from '../TransitionImage';
 import MaskLayer, { MaskLayerProps } from '../MaskLayer';
+import Swiper from '../Swiper';
 import { ActivityIndicator } from 'react-native';
 export let ImageMainWidth = Dimensions.get('window').width;
 export let ImageMainHeight = Dimensions.get('window').height;
 
 const defaultImage = 'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg';
 
+export interface ImageViewerDataSourceProps {
+  url: string;
+  [key: string]: any;
+}
 export interface ImageViewerProps extends ViewProps {
   /** 图片宽度 */
   width?: number;
   /** 图片高度 */
   height?: number;
   /** 图像源（远程URL或本地文件资源 */
-  src?: string | number;
+  src?: string | ImageViewerDataSourceProps[];
+  /** 默认显示第几张图片 */
+  defaultIndex?: number;
 }
 
 function ImageViewer(props: ImageViewerProps) {
-  const { width = 150, height = 150, src = defaultImage, ...others } = props;
+  const { width = 150, height = 150, src = defaultImage, defaultIndex = 0, ...others } = props;
   const [visible, setVisible] = useState(false);
   const fadeAnim = useRef(new Animated.Value(0)).current;
 
@@ -34,22 +41,48 @@ function ImageViewer(props: ImageViewerProps) {
     }).start();
   }, [visible]);
 
+  const imgUrl = useMemo(() => {
+    if (Array.isArray(src)) {
+      return src[defaultIndex].url;
+    }
+    return src;
+  }, [src]);
+
   return (
     <View style={{}}>
-      <TransitionImage
-        style={{ width: width, height: height }}
-        onPress={() => setVisible(true)}
-        source={typeof src === 'number' ? src : { uri: src as string }}
-        PlaceholderContent={<ActivityIndicator />}
-        transition={true}
-        transitionDuration={500}
-      />
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+        {Array.isArray(src) ? (
+          src.map((item: ImageViewerDataSourceProps, index: number) => {
+            return (
+              <TransitionImage
+                key={index}
+                style={{ width: width, height: height, flex: 1 }}
+                onPress={() => setVisible(true)}
+                source={{ uri: item.url }}
+                PlaceholderContent={<ActivityIndicator />}
+                transition={true}
+                transitionDuration={500}
+              />
+            );
+          })
+        ) : (
+          <TransitionImage
+            style={{ width: width, height: height }}
+            onPress={() => setVisible(true)}
+            source={{ uri: imgUrl }}
+            PlaceholderContent={<ActivityIndicator />}
+            transition={true}
+            transitionDuration={500}
+          />
+        )}
+      </View>
       <MaskLayer visible={visible} onDismiss={() => setVisible(false)} opacity={0.9}>
         <Animated.View style={[styles.content, { opacity: fadeAnim }]}>
-          <Image
-            style={{ width: '100%', height: '100%', resizeMode: 'contain' }}
-            source={typeof src === 'number' ? src : { uri: src as string }}
-          />
+          {Array.isArray(src) ? (
+            <Swiper dataSource={src} height={200} autoplay={false} />
+          ) : (
+            <Image style={{ width: '100%', height: '100%', resizeMode: 'contain' }} source={{ uri: src }} />
+          )}
         </Animated.View>
       </MaskLayer>
     </View>
