修改保存图片的实现方式(ios能保存图片)；ios删除保存视频按钮

components/VideoModal/index.jsx

@@ -6,6 +6,7 @@ import {
   TouchableOpacity,
   Text,
   ActivityIndicator,
+  Platform,
 } from "react-native";
 import React, { useState, useRef, useCallback } from "react";
 import { useTailwind } from "tailwind-rn";
@@ -120,28 +121,30 @@ export default function VideoModal({ visible, setVisible, url }) {
               }}
             />
           </TouchableOpacity>
-          <TouchableOpacity
-            onPress={hanldSaveVideo}
-            style={{
-              left: 20,
-              bottom: insets.bottom,
-              ...tailwind(
-                "flex absolute justify-center items-center w-12 h-12 bg-[#FFFFFF1A] rounded-full"
-              ),
-            }}
-          >
-            {isSaving && (
-              <Text style={tailwind("text-white")}>{progress}%</Text>
-            )}
-            {!isSaving && (
-              <Icon
-                type="ionicon"
-                name="save-outline"
-                size={20}
-                color="white"
-              />
-            )}
-          </TouchableOpacity>
+          {Platform.OS === "android" && (
+            <TouchableOpacity
+              onPress={hanldSaveVideo}
+              style={{
+                left: 20,
+                bottom: insets.bottom,
+                ...tailwind(
+                  "flex absolute justify-center items-center w-12 h-12 bg-[#FFFFFF1A] rounded-full"
+                ),
+              }}
+            >
+              {isSaving && (
+                <Text style={tailwind("text-white")}>{progress}%</Text>
+              )}
+              {!isSaving && (
+                <Icon
+                  type="ionicon"
+                  name="save-outline"
+                  size={20}
+                  color="white"
+                />
+              )}
+            </TouchableOpacity>
+          )}
         </View>
       </TouchableWithoutFeedback>
       <Toast />

package.json

@@ -43,6 +43,7 @@
     "expo-device": "~5.9.3",
     "expo-file-system": "~16.0.8",
     "expo-image": "~1.10.6",
+    "expo-image-manipulator": "~11.8.0",
     "expo-image-multiple-picker": "^4.8.3",
     "expo-intent-launcher": "~10.11.0",
     "expo-linear-gradient": "~12.7.2",

utils/saveImage.js

@@ -1,6 +1,7 @@
 import * as MediaLibrary from "expo-media-library";
 import * as FileSystem from "expo-file-system";
 import Toast from "react-native-toast-message";
+import * as ImageManipulator from "expo-image-manipulator";
 
 export default async function saveImage(uri) {
   const permission = await MediaLibrary.requestPermissionsAsync();
@@ -8,8 +9,16 @@ export default async function saveImage(uri) {
     const timestamp = new Date().getTime();
     const fileUri = FileSystem.cacheDirectory + `${timestamp}.png`;
     try {
-      const res = await FileSystem.downloadAsync(uri, fileUri);
-      await MediaLibrary.saveToLibraryAsync(res.uri);
+      const manipResult = await ImageManipulator.manipulateAsync(uri, [], {
+        base64: true,
+      });
+      const base64Code = manipResult.base64;
+
+      await FileSystem.writeAsStringAsync(fileUri, base64Code, {
+        encoding: FileSystem.EncodingType.Base64,
+      });
+
+      await MediaLibrary.saveToLibraryAsync(fileUri);
       Toast.show({
         type: "success",
         text1: "已保存到相册",

yarn.lock

@@ -4089,6 +4089,18 @@ expo-font@~11.10.3:
   dependencies:
     fontfaceobserver "^2.1.0"
 
+expo-image-loader@~4.6.0:
+  version "4.6.0"
+  resolved "https://registry.npmmirror.com/expo-image-loader/-/expo-image-loader-4.6.0.tgz#ca7d4fdf53125bff2091d3a2c34a3155f10df147"
+  integrity sha512-RHQTDak7/KyhWUxikn2yNzXL7i2cs16cMp6gEAgkHOjVhoCJQoOJ0Ljrt4cKQ3IowxgCuOrAgSUzGkqs7omj8Q==
+
+expo-image-manipulator@~11.8.0:
+  version "11.8.0"
+  resolved "https://registry.npmmirror.com/expo-image-manipulator/-/expo-image-manipulator-11.8.0.tgz#e52351728619e534c949ae4b394af2c7c5d16702"
+  integrity sha512-ZWVrHnYmwJq6h7auk+ropsxcNi+LyZcPFKQc8oy+JA0SaJosfShvkCm7RADWAunHmfPCmjHrhwPGEu/rs7WG/A==
+  dependencies:
+    expo-image-loader "~4.6.0"
+
 expo-image-multiple-picker@^4.8.3:
   version "4.8.3"
   resolved "https://registry.npmmirror.com/expo-image-multiple-picker/-/expo-image-multiple-picker-4.8.3.tgz#4c527a10dc9eb79758979a926dc8cee5010c3404"