完成部分媒体选择功能

2024-09-20 15:59:27 +08:00 · 2024-09-20 15:59:27 +08:00 · 354811a078
parent 87508a7635
commit 354811a078
6 changed files with 1166 additions and 1538 deletions
--- a/app.json
+++ b/app.json
@ -57,6 +57,12 @@
          "isAccessMediaLocationEnabled": true
        }
      ],
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": "当您授权允许访问相册后，您能够在APP中浏览相册中的图片，以便您选择合适的图片进行上传，用于头像或其他位置"
+        }
+      ],
      [
        "@sentry/react-native/expo",
        {
--- a/components/MediaPicker/index.jsx
+++ b/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}
--- a/package.json
+++ b/package.json
@ -22,61 +22,62 @@
  },
  "dependencies": {
    "@gorhom/bottom-sheet": "^4",
-    "@react-native-async-storage/async-storage": "1.21.0",
-    "@react-native-picker/picker": "2.6.1",
+    "@react-native-async-storage/async-storage": "1.23.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",
-    "@shopify/flash-list": "1.6.3",
+    "@sentry/react-native": "~5.22.0",
+    "@shopify/flash-list": "1.6.4",
    "dayjs": "^1.11.9",
-    "expo": "50",
-    "expo-application": "~5.8.4",
-    "expo-av": "~13.10.6",
-    "expo-build-properties": "~0.11.1",
-    "expo-camera": "~14.1.3",
-    "expo-clipboard": "~5.0.1",
-    "expo-constants": "~15.4.6",
-    "expo-crypto": "~12.8.1",
-    "expo-device": "~5.9.4",
-    "expo-file-system": "~16.0.9",
-    "expo-image": "~1.10.6",
-    "expo-image-manipulator": "~11.8.0",
+    "expo": "51",
+    "expo-application": "~5.9.1",
+    "expo-av": "~14.0.7",
+    "expo-build-properties": "~0.12.5",
+    "expo-camera": "~15.0.15",
+    "expo-clipboard": "~6.0.3",
+    "expo-constants": "~16.0.2",
+    "expo-crypto": "~13.0.2",
+    "expo-device": "~6.0.2",
+    "expo-file-system": "~17.0.1",
+    "expo-image": "~1.12.15",
+    "expo-image-manipulator": "~12.0.5",
    "expo-image-multiple-picker": "^4.8.3",
-    "expo-intent-launcher": "~10.11.0",
-    "expo-linear-gradient": "~12.7.2",
-    "expo-linking": "~6.2.2",
-    "expo-media-library": "~15.9.2",
-    "expo-network": "~5.8.0",
-    "expo-screen-capture": "~5.8.1",
-    "expo-splash-screen": "~0.26.5",
-    "expo-status-bar": "~1.11.1",
-    "expo-updates": "~0.24.13",
-    "expo-video-thumbnails": "~7.9.0",
+    "expo-image-picker": "~15.0.7",
+    "expo-intent-launcher": "~11.0.1",
+    "expo-linear-gradient": "~13.0.2",
+    "expo-linking": "~6.3.1",
+    "expo-media-library": "~16.0.4",
+    "expo-network": "~6.0.1",
+    "expo-screen-capture": "~6.0.1",
+    "expo-splash-screen": "~0.27.5",
+    "expo-status-bar": "~1.12.1",
+    "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-safe-area-context": "4.8.2",
-    "react-native-screens": "~3.29.0",
-    "react-native-svg": "14.1.0",
+    "react-native-reanimated": "~3.10.1",
+    "react-native-safe-area-context": "4.10.5",
+    "react-native-screens": "3.31.1",
+    "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": {
--- a/screeens/EditUserProfile/SelectUserProfileItem/index.jsx
+++ b/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
--- a/utils/upload.js
+++ b/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 {
--- a/yarn.lock
+++ b/yarn.lock