完成部分媒体选择功能

app.json

@@ -57,6 +57,12 @@
           "isAccessMediaLocationEnabled": true
         }
       ],
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": "当您授权允许访问相册后，您能够在APP中浏览相册中的图片，以便您选择合适的图片进行上传，用于头像或其他位置"
+        }
+      ],
       [
         "@sentry/react-native/expo",
         {

components/MediaPicker/index.jsx

@@ -2,11 +2,11 @@ import { View, TouchableOpacity, Image } from "react-native";
 import React, { useState, useEffect } from "react";
 import { useTailwind } from "tailwind-rn";
 import { Icon } from "@rneui/themed";
-import MediaPickerModal from "../MediaPickerModal";
 import Toast from "react-native-toast-message";
 import { DraggableGrid } from "react-native-draggable-grid";
 import { useImageViewer } from "../../context/ImageViewProvider";
 import VideoModal from "../VideoModal";
+import * as ImagePicker from "expo-image-picker";
 
 /*
 props格式：
@@ -19,11 +19,10 @@ props格式：
 export default function MediaPicker({
   setDragging = () => null,
   maxCount,
-  type,
+  type = "image",
   setAssets,
 }) {
   const tailwind = useTailwind();
-  const [modalVisible, setModalVisible] = useState(false);
   const [newAssets, setNewAssets] = useState([]);
   const [_assets, set_Assets] = useState([]);
 
@@ -32,6 +31,28 @@ export default function MediaPicker({
   const [showVideo, setShowVideo] = useState(false);
   const [videoUrl, setVideoUrl] = useState("");
 
+  //选择媒体
+  const pickMedia = async () => {
+    let mediaType;
+    if (type === "image") {
+      mediaType = ImagePicker.MediaTypeOptions.Images;
+    } else if (type === "video") {
+      mediaType = ImagePicker.MediaTypeOptions.Videos;
+    } else {
+      mediaType = ImagePicker.MediaTypeOptions.All;
+    }
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: mediaType,
+      allowsMultipleSelection: true,
+      selectionLimit: maxCount - _assets.length,
+      quality: 1,
+    });
+
+    if (!result.canceled) {
+      setNewAssets(result.assets);
+    }
+  };
+
   //当newAssets改变的时候添加新数据到assets
   useEffect(() => {
     const temAssets = newAssets.map((item) => ({
@@ -49,7 +70,7 @@ export default function MediaPicker({
         onPress={() => {
           //数量检查
           maxCount - _assets.length !== 0
-            ? setModalVisible(!modalVisible)
+            ? pickMedia()
             : Toast.show({
                 type: "error",
                 text1: `已达到最大选择数量`,
@@ -90,7 +111,7 @@ export default function MediaPicker({
         }}
         key={item.key}
       >
-        <Image src={item.old_uri} style={tailwind("w-full h-full rounded")} />
+        <Image src={item.uri} style={tailwind("w-full h-full rounded")} />
         <View style={tailwind("absolute top-2 right-2")}>
           <Icon
             type="ionicon"
@@ -101,7 +122,7 @@ export default function MediaPicker({
             style={tailwind("bg-black rounded-full opacity-70")}
           />
         </View>
-        {item.duration !== 0 && (
+        {item.duration > 0 && (
           <View
             style={tailwind(
               "absolute flex w-full h-full items-center justify-center"
@@ -133,9 +154,9 @@ export default function MediaPicker({
           setDragging(false);
         }}
         onItemPress={(item) => {
-          if (item.duration === 0) {
+          if (!item.duration) {
             showImageViewer({
-              imageUrls: [{ url: item.old_uri }],
+              imageUrls: [{ url: item.uri }],
               index: 0,
             });
             return;
@@ -145,13 +166,6 @@ export default function MediaPicker({
         }}
       />
       <Picker />
-      <MediaPickerModal
-        visible={modalVisible}
-        setVisible={setModalVisible}
-        type={type}
-        maxCount={maxCount - _assets.length}
-        setAssets={setNewAssets}
-      />
       <VideoModal
         visible={showVideo}
         setVisible={setShowVideo}

package.json

@@ -22,61 +22,62 @@
   },
   "dependencies": {
     "@gorhom/bottom-sheet": "^4",
-    "@react-native-async-storage/async-storage": "1.21.0",
+    "@react-native-async-storage/async-storage": "1.23.1",
-    "@react-native-picker/picker": "2.6.1",
+    "@react-native-picker/picker": "2.7.5",
     "@react-navigation/bottom-tabs": "^6.5.8",
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/native-stack": "^6.9.13",
     "@rneui/base": "^4.0.0-rc.8",
     "@rneui/themed": "^4.0.0-rc.8",
-    "@sentry/react-native": "~5.20.0",
+    "@sentry/react-native": "~5.22.0",
-    "@shopify/flash-list": "1.6.3",
+    "@shopify/flash-list": "1.6.4",
     "dayjs": "^1.11.9",
-    "expo": "50",
+    "expo": "51",
-    "expo-application": "~5.8.4",
+    "expo-application": "~5.9.1",
-    "expo-av": "~13.10.6",
+    "expo-av": "~14.0.7",
-    "expo-build-properties": "~0.11.1",
+    "expo-build-properties": "~0.12.5",
-    "expo-camera": "~14.1.3",
+    "expo-camera": "~15.0.15",
-    "expo-clipboard": "~5.0.1",
+    "expo-clipboard": "~6.0.3",
-    "expo-constants": "~15.4.6",
+    "expo-constants": "~16.0.2",
-    "expo-crypto": "~12.8.1",
+    "expo-crypto": "~13.0.2",
-    "expo-device": "~5.9.4",
+    "expo-device": "~6.0.2",
-    "expo-file-system": "~16.0.9",
+    "expo-file-system": "~17.0.1",
-    "expo-image": "~1.10.6",
+    "expo-image": "~1.12.15",
-    "expo-image-manipulator": "~11.8.0",
+    "expo-image-manipulator": "~12.0.5",
     "expo-image-multiple-picker": "^4.8.3",
-    "expo-intent-launcher": "~10.11.0",
+    "expo-image-picker": "~15.0.7",
-    "expo-linear-gradient": "~12.7.2",
+    "expo-intent-launcher": "~11.0.1",
-    "expo-linking": "~6.2.2",
+    "expo-linear-gradient": "~13.0.2",
-    "expo-media-library": "~15.9.2",
+    "expo-linking": "~6.3.1",
-    "expo-network": "~5.8.0",
+    "expo-media-library": "~16.0.4",
-    "expo-screen-capture": "~5.8.1",
+    "expo-network": "~6.0.1",
-    "expo-splash-screen": "~0.26.5",
+    "expo-screen-capture": "~6.0.1",
-    "expo-status-bar": "~1.11.1",
+    "expo-splash-screen": "~0.27.5",
-    "expo-updates": "~0.24.13",
+    "expo-status-bar": "~1.12.1",
-    "expo-video-thumbnails": "~7.9.0",
+    "expo-updates": "~0.25.24",
+    "expo-video-thumbnails": "~8.0.0",
     "formik": "^2.4.4",
     "jsencrypt": "^3.3.2",
     "mime": "^3.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.73.6",
+    "react-native": "0.74.5",
     "react-native-draggable-grid": "^2.2.1",
-    "react-native-gesture-handler": "~2.14.0",
+    "react-native-gesture-handler": "~2.16.1",
     "react-native-gifted-chat": "^2.4.0",
     "react-native-image-zoom-viewer": "^3.0.1",
-    "react-native-pager-view": "6.2.3",
+    "react-native-pager-view": "6.3.0",
     "react-native-parsed-text": "^0.0.22",
     "react-native-picker-select": "^8.1.0",
-    "react-native-reanimated": "~3.6.2",
+    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.8.2",
+    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "~3.29.0",
+    "react-native-screens": "3.31.1",
-    "react-native-svg": "14.1.0",
+    "react-native-svg": "15.2.0",
     "react-native-swiper": "^1.6.0",
     "react-native-tab-view": "^3.5.2",
     "react-native-toast-message": "^2.1.6",
     "react-native-web": "~0.19.10",
-    "react-native-webview": "13.6.4",
+    "react-native-webview": "13.8.6",
     "tailwind-rn": "^4.2.0"
   },
   "devDependencies": {

screeens/EditUserProfile/SelectUserProfileItem/index.jsx

@@ -4,13 +4,13 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTailwind } from "tailwind-rn";
 import { Image } from "expo-image";
 import { Divider, Icon } from "@rneui/themed";
-import MediaPickerModal from "../../../components/MediaPickerModal";
 import { get, save } from "../../../utils/storeInfo";
 import { useFocusEffect } from "@react-navigation/native";
 import { uploadImage } from "../../../utils/upload";
 import baseRequest from "../../../utils/baseRequest";
 import Toast from "react-native-toast-message";
 import { generateSignature } from "../../../utils/crypto";
+import * as ImagePicker from "expo-image-picker";
 
 const blurhash = "LcKUTa%gOYWBYRt6xuoJo~s8V@fk";
 
@@ -20,7 +20,19 @@ export default function SelectUserProfileItem({ navigation, route }) {
 
   //选取头像
   const [head, setHead] = useState([]);
-  const [mediaPickerModalVisible, setMediaPickerModalVisible] = useState(false);
+
+  const pickImage = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: true,
+      aspect: [1, 1],
+      quality: 1,
+    });
+
+    if (!result.canceled) {
+      setHead(result.assets);
+    }
+  };
 
   //获取页面数据
   const [data, setData] = useState({});
@@ -124,18 +136,11 @@ export default function SelectUserProfileItem({ navigation, route }) {
         ...tailwind("flex-1"),
       }}
     >
-      <MediaPickerModal
-        visible={mediaPickerModalVisible}
-        setVisible={setMediaPickerModalVisible}
-        type="image"
-        maxCount={1}
-        setAssets={setHead}
-      />
       <View style={tailwind("px-4")}>
         <View style={tailwind("flex-row justify-between items-center mt-2")}>
           <Text style={tailwind("text-base text-white font-medium")}>头像</Text>
           <TouchableOpacity
-            onPress={() => setMediaPickerModalVisible(!mediaPickerModalVisible)}
+            onPress={pickImage}
             style={tailwind("flex-row items-center")}
           >
             <Image

utils/upload.js

@@ -217,7 +217,7 @@ export async function uploadVideo(asset) {
         src_id: auth.directory + "/" + auth.filename,
         cover_id: videoCoverId,
         md5: md5,
-        dur: asset?.duration,
+        dur: asset?.duration / 1000,
         fmt: fileType,
       };
       const base = await baseRequest();
@@ -275,7 +275,7 @@ export async function uploadVideo(asset) {
 export async function multiUpload(assets) {
   let ids = { image_ids: [], video_ids: [] };
   const tasks = assets.map(async (asset, index) => {
-    if (asset.duration === 0) {
+    if (!asset.duration) {
       const id = await uploadImage(asset);
       ids.image_ids[index] = id;
     } else {