fix(ImagePicker): 增加图片预览 & 多张图片同时上传

ChenlingasMx · ChenlingasMx · commit 749b8ed3419a · 2023-04-12T18:10:54.000+08:00
diff --git a/example/base/ios/Podfile b/example/base/ios/Podfile
@@ -31,7 +31,14 @@ target 'AwesomeProject' do
   use_flipper!()
 
   post_install do |installer|
-    react_native_post_install(installer)
+    installer.pods_project.targets.each do |target|
+      target.build_configurations.each do |config|
+        config.build_settings['SWIFT_VERSION'] = '5.0'
+        if config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] < '12.4'
+          config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.4'
+        end
+      end
+    end
     __apply_Xcode_12_5_M1_post_install_workaround(installer)
   end
 end
diff --git a/example/base/package.json b/example/base/package.json
@@ -10,12 +10,15 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@uiw/react-native": "3.2.3",
-    "@uiw/react-native-image-picker": "3.2.3",
     "react": "18.2.0",
     "react-native": "0.69.7",
+    "@uiw/react-native": "3.2.3",
+    "@uiw/react-native-image-picker": "3.2.3",
     "react-native-svg": "12.1.1",
-    "react-native-image-picker":"^4.10.0"
+    "react-native-gesture-handler": "2.8.0",
+    "react-native-root-siblings": "4.1.1",
+    "react-native-image-picker":"^5.3.1",
+    "react-native-image-viewing":"~0.2.2"
   },
   "devDependencies": {
     "@babel/core": "~7.20.7",
diff --git a/example/examples/ios/Podfile b/example/examples/ios/Podfile
@@ -31,7 +31,14 @@ target 'examples' do
   use_flipper!()
 
   post_install do |installer|
-    react_native_post_install(installer)
+    installer.pods_project.targets.each do |target|
+      target.build_configurations.each do |config|
+        config.build_settings['SWIFT_VERSION'] = '5.0'
+        if config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] < '12.4'
+          config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.4'
+        end
+      end
+    end
     __apply_Xcode_12_5_M1_post_install_workaround(installer)
   end
 end
diff --git a/example/examples/ios/examples/Info.plist b/example/examples/ios/examples/Info.plist
@@ -35,6 +35,8 @@
 			</dict>
 		</dict>
 	</dict>
+	<key>NSCameraUsageDescription</key>
+	<string>This app requires access to the camera.</string>
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string></string>
 	<key>UILaunchStoryboardName</key>
diff --git a/example/examples/package.json b/example/examples/package.json
@@ -20,8 +20,10 @@
     "react-native-safe-area-context": "~4.3.1",
     "react-native-screens": "~3.15.0",
     "react-native-svg": "12.1.1",
-    "react-native-image-picker":"^4.10.0",
-    "@uiw/react-native-image-picker": "3.2.3"
+    "react-native-image-picker":"^5.3.1",
+    "react-native-image-viewing":"~0.2.2",
+    "@uiw/react-native-image-picker": "3.2.3",
+    "@react-native-community/cameraroll":"^4.1.2"
   },
   "devDependencies": {
     "@babel/core": "~7.20.7",
diff --git a/example/examples/src/routes/ImagePicker/index.tsx b/example/examples/src/routes/ImagePicker/index.tsx
@@ -7,6 +7,13 @@ const {Header, Body, Card, Footer} = Layout;
 
 export interface ImagePickerProps extends ComProps {}
 
+interface fileProps {
+  fileName: string;
+  fileType: string;
+  uri: string;
+  fileSize?: number;
+}
+
 export default function MenuDropdownView(props: ImagePickerProps) {
   const {route} = props || {};
   const description = route.params.description;
@@ -17,7 +24,14 @@ export default function MenuDropdownView(props: ImagePickerProps) {
         <Header title={title} description={description} />
         <Body>
           <Card title="基础实例">
-            <ImagePicker upload={async file => await file.uri} />
+            <ImagePicker
+              upload={(file: fileProps[]) => {
+                let imageList: string[] = [];
+                file.forEach(file => imageList.push(file.uri));
+                return imageList;
+              }}
+              selectionLimit={2}
+            />
           </Card>
         </Body>
         <Footer />
diff --git a/packages/react-native-image-picker/package.json b/packages/react-native-image-picker/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@uiw/react-native-image-picker",
   "version": "3.2.3",
-  "description": "UIW for React Native",
+  "description": "基于 React Native 的上传图片组件",
   "homepage": "https://uiwjs.github.io/react-native-uiw/",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -30,13 +30,14 @@
     "@shopify/restyle":"~2.4.2",
     "@uiw/react-native":"~3.2.3",
     "react-native-svg": "12.1.1",
-    "react-native-image-picker":"^4.10.0"
+    "react-native-image-picker":"^5.3.1",
+    "react-native-image-viewing":"~0.2.2"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-native": ">=0.60.0",
     "react-native-svg": ">=9.9.3",
-    "react-native-image-picker":">= 4.0.0"
+    "react-native-image-picker":">= 5.0.0"
   },
   "devDependencies": {
     "@babel/core": "~7.20.7",
diff --git a/packages/react-native-image-picker/src/ImagePicker/index.tsx b/packages/react-native-image-picker/src/ImagePicker/index.tsx
@@ -1,10 +1,20 @@
-import React, { PropsWithChildren, useMemo } from 'react';
-import { View, StyleSheet, Rationale, TouchableOpacity, Dimensions, Image } from 'react-native';
+import React, { PropsWithChildren, useMemo, ComponentType } from 'react';
+import {
+  View,
+  StyleSheet,
+  Rationale,
+  TouchableOpacity,
+  ModalProps,
+  ImageURISource,
+  ImageRequireSource,
+} from 'react-native';
 import { CameraOptions, ImagePickerResponse } from 'react-native-image-picker';
-import { Theme, Flex, ActionSheet, ActionSheetItem, MaskLayer, TransitionImage, Icon, Text } from '@uiw/react-native';
+import { Theme, Flex, ActionSheet, ActionSheetItem, TransitionImage, Icon, Text } from '@uiw/react-native';
+import ImageView from 'react-native-image-viewing';
 import { useTheme } from '@shopify/restyle';
 import useImagePicker from './useImagePicker';
 
+export type ImageSource = ImageURISource | ImageRequireSource;
 export interface File {
   fileName: string;
   fileType: string;
@@ -24,17 +34,19 @@ export type ImagePickerProps = PropsWithChildren<{
   /** 上传图片后是否在背景图展示，如果为 true 上传后会自动展示上传图片(此时只能上传一张) */
   showUploadImg?: boolean;
   /** 上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传,同时可以在里面执行一些上传提示操作 */
-  beforeUpload?: (file: File) => boolean | ((file: File) => Promise<boolean>);
+  beforeUpload?: (file: File[]) => boolean | ((file: File) => Promise<boolean>);
   /** 上传 */
-  upload?: (file: File) => Promise<string>;
+  upload?: (file: File[]) => string[];
   /** 上传完成 */
-  uploadFinish?: (result?: string) => void;
+  uploadFinish?: (result?: string[] | undefined) => void;
   /** 取消上传事件回调 */
   onCancel?: (response: ImagePickerResponse) => void;
   /** 上传失败事件回调 */
   onFail?: (response: ImagePickerResponse) => void;
   /** 授权失败的回调 */
   onGrantFail?: () => void;
+  /** 预览时长按图片保存回调 */
+  onSave?: ((image: any) => void) | undefined;
   /** 打开相册授权的文本 */
   libraryRationale?: Rationale;
   /** 打开摄像头授权的文本 */
@@ -43,11 +55,29 @@ export type ImagePickerProps = PropsWithChildren<{
   launchLibraryText?: string;
   /** 打开摄像头文本 */
   launchCameraText?: string;
+  /** 从相册选择多少张图片 */
+  selectionLimit?: number;
+  // ImageViewProps
+  onLongPress?: (image: ImageSource) => void;
+  onImageIndexChange?: (imageIndex: number) => void;
+  presentationStyle?: ModalProps['presentationStyle'];
+  animationType?: ModalProps['animationType'];
+  backgroundColor?: string;
+  swipeToCloseEnabled?: boolean;
+  doubleTapToZoomEnabled?: boolean;
+  delayLongPress?: number;
+  HeaderComponent?: ComponentType<{
+    imageIndex: number;
+  }>;
+  FooterComponent?: ComponentType<{
+    imageIndex: number;
+  }>;
 }>;
 
 const ImagePicker = ({
   width = 100,
   height = 100,
+  selectionLimit = 1,
   value = [],
   options,
   showUploadImg = true,
@@ -72,7 +102,8 @@ const ImagePicker = ({
     buttonNeutral: '下次再说',
   },
   launchLibraryText = '打开相册',
-  launchCameraText = '打开摄像头',
+  launchCameraText = '打开相机',
+  ...others
 }: ImagePickerProps) => {
   const theme = useTheme<Theme>();
   const styles = createStyles({
@@ -84,7 +115,7 @@ const ImagePicker = ({
 
   const {
     currentImgSource,
-    previewSrc,
+    current,
     loading,
     launchLibrary,
     launchCamera,
@@ -106,6 +137,7 @@ const ImagePicker = ({
     onGrantFail,
     cameraRationale,
     libraryRationale,
+    selectionLimit,
   });
 
   const pictureList = useMemo(() => {
@@ -136,9 +168,14 @@ const ImagePicker = ({
     return null;
   }, [showUploadImg, JSON.stringify(currentImgSource)]);
 
+  const previewImages = useMemo(() => {
+    return currentImgSource.map((item) => ({ uri: item }));
+  }, [JSON.stringify(currentImgSource), current]);
+
   return (
     <View>
       <Flex justify="start" wrap="wrap">
+        {pictureList}
         <Flex.Item>
           <View style={styles.box}>
             <TouchableOpacity
@@ -147,21 +184,22 @@ const ImagePicker = ({
               disabled={loading}
               style={{ justifyContent: 'center', alignItems: 'center', width, height }}
             >
-              <Icon name="plus-square-o" color="#A9A9A9" size={20} />
+              <Icon name="plus-square-o" color={theme.colors.text || '#A9A9A9'} size={20} />
             </TouchableOpacity>
           </View>
         </Flex.Item>
-        {pictureList}
       </Flex>
-      <ActionSheet onCancel={setLaunchVisibleFalse} visible={launchVisible} style={{ zIndex: 99 }}>
+      <ActionSheet onCancel={setLaunchVisibleFalse} visible={launchVisible}>
         <ActionSheetItem onPress={launchLibrary}>{launchLibraryText}</ActionSheetItem>
         <ActionSheetItem onPress={launchCamera}>{launchCameraText}</ActionSheetItem>
       </ActionSheet>
-      <MaskLayer visible={previewVisible} style={{ zIndex: 999 }} onDismiss={closePreviewImage} opacity={0.9}>
-        <View style={styles.content}>
-          <Image style={styles.image} source={{ uri: previewSrc }} />
-        </View>
-      </MaskLayer>
+      <ImageView
+        visible={previewVisible}
+        onRequestClose={closePreviewImage}
+        imageIndex={current || 0}
+        images={previewImages}
+        {...others}
+      />
     </View>
   );
 };
@@ -180,15 +218,6 @@ function createStyles({ width = 100, height = 100, borderColor = '#CCCCCC', back
       backgroundColor: backgroundColor,
       margin: 4,
     },
-    content: {
-      marginTop: Dimensions.get('window').width / 3 - 20,
-      height: Dimensions.get('window').height / 3 - 20,
-    },
-    image: {
-      width: '100%',
-      height: '100%',
-      resizeMode: 'contain',
-    },
     previewBox: {
       position: 'absolute',
       left: 0,
diff --git a/packages/react-native-image-picker/src/ImagePicker/useImagePicker.ts b/packages/react-native-image-picker/src/ImagePicker/useImagePicker.ts
@@ -26,7 +26,7 @@ function filterSource(source: string[] = []) {
 export default function useImagePicker({
   value,
   options,
-  showUploadImg = true,
+  selectionLimit,
   beforeUpload,
   upload,
   uploadFinish,
@@ -45,7 +45,7 @@ export default function useImagePicker({
   /** loading */
   const [loading, setLoading] = useSafeState(false);
   /** 预览照片地址 */
-  const [previewSrc, setPreviewSrc] = useSafeState<string | undefined>(undefined); // 选中的图片下标
+  const [current, setCurrent] = useSafeState<number | undefined>(undefined); // 选中的图片下标
   // 刷新
   const [refresh, setRefresh] = useState(false);
 
@@ -81,6 +81,7 @@ export default function useImagePicker({
     setTimeout(() => {
       launchImageLibrary(
         {
+          selectionLimit: selectionLimit,
           ...initialOptions,
           ...options,
         },
@@ -120,26 +121,30 @@ export default function useImagePicker({
         onFail?.(response);
       } else {
         if (!response.assets || response.assets.length === 0) return;
-        const file: File = {
-          fileName: response.assets[0].fileName!,
-          fileType: response.assets[0].type!,
-          uri: response.assets[0].uri!,
-          fileSize: response.assets[0].fileSize!,
-        };
+        let imageFiles: File[] = [];
+        response.assets.forEach((item) => {
+          const file: File = {
+            fileName: item.fileName!,
+            fileType: item.type!,
+            uri: item.uri!,
+            fileSize: item.fileSize!,
+          };
+          imageFiles.push(file);
+        });
         // 执行上传前的操作及判断
         if (beforeUpload) {
-          const result = await beforeUpload(file);
+          const result = await beforeUpload(imageFiles);
           if (!result) {
             return;
           }
         }
         setLoading(true);
-        const result = await upload?.(file);
+        const result = upload?.(imageFiles);
         setLoading(false);
         uploadFinish?.(result);
         setLaunchVisibleFalse();
-        if (result) {
-          const datas = [...currentImgSource, result];
+        if (result && result.length > 0) {
+          const datas = [...currentImgSource, ...result];
           setCurrentImgSource(datas);
         }
       }
@@ -151,13 +156,13 @@ export default function useImagePicker({
 
   // 预览照片
   const previewImage = (key: number) => {
-    setPreviewSrc(currentImgSource[key]);
+    setCurrent(key);
     setPreviewVisibleTrue();
   };
 
   // 关闭预览照片
   const closePreviewImage = () => {
-    setPreviewSrc(undefined);
+    setCurrent(undefined);
     setPreviewVisibleFalse();
   };
 
@@ -167,7 +172,7 @@ export default function useImagePicker({
     setCurrentImgSource(currentImgSource);
     // 刷新页面
     setRefresh(!refresh);
-    uploadFinish?.('');
+    uploadFinish?.(undefined);
   };
 
   // 打开上传
@@ -178,7 +183,7 @@ export default function useImagePicker({
 
   return {
     currentImgSource,
-    previewSrc,
+    current,
     loading,
     launchLibrary,
     launchCamera,
