tiefen_space_app/components/MediaPickerModal/index.jsx

import {
  View,
  Text,
  TouchableOpacity,
  Image,
  Modal,
  Platform,
} from "react-native";
import React, { useState, useEffect } from "react";
import { useTailwind } from "tailwind-rn";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { ImagePicker } from "expo-image-multiple-picker";
import { Icon, Badge } from "@rneui/themed";
import * as MediaLibrary from "expo-media-library";
import * as Linking from "expo-linking";
import MyModal from "../MyModal";

/*
props格式：
  visible                控制modal可见性
  setVisible             控制modal可见性
  type                   选择的媒体类型 "image"|"video"|"mix"
  maxCount               最大选择数量
  setAssets              向父组件返回媒体
 */

export default function MediaPickerModal({
  visible,
  setVisible,
  type,
  maxCount,
  setAssets,
}) {
  const tailwind = useTailwind();
  const insets = useSafeAreaInsets();
  const [album, setAlbum] = useState({ title: "全部" });

  //前往打开权限弹窗
  const [requestModalVisible, setRequestModalVisible] = useState(false);
  //前往打开权限弹窗
  const [overlayVisible, setOverlayVisible] = useState(false);
  //保存当前权限状态
  const [permissionStatus, setPermissionStatus] = useState();

  //检查并获取权限
  useEffect(() => {
    if (visible) {
      async function checkMediaLibraryPermissions() {
        //权限检查、获取
        // 第一步:检查是否已有权限
        const { status } = await MediaLibrary.getPermissionsAsync();
        if (status === "granted") {
          // 如果已有权限,直接执行操作
          setPermissionStatus("granted");
          return;
        }
        if (status === "undetermined") {
          setRequestModalVisible(true);
          return;
        }
        if (status === "denied") {
          requestMediaLibraryPermissions();
        }
      }
      checkMediaLibraryPermissions();
    }
  }, [visible]);

  async function requestMediaLibraryPermissions() {
    const permission = await MediaLibrary.requestPermissionsAsync();
    if (permission.status === "denied") {
      // 用户拒绝了权限请求,打开应用设置页面
      setPermissionStatus("denied");
      setVisible(false);
      setOverlayVisible(true);
      return;
    }
    if (permission.status === "granted") {
      // 用户同意了权限请求,执行操作
      setPermissionStatus("granted");
    }
  }

  //将ios中assets的路径从ph://改为file://
  const changeToLocalUri = async (assets) => {
    const editedAssets = await Promise.all(
      assets.map(async (item) => {
        const info = await MediaLibrary.getAssetInfoAsync(item.id);
        const uri = info.localUri;
        if (Platform.OS === "ios") {
          return { ...item, old_uri: item.uri, uri };
        }
        return { ...item, old_uri: item.uri };
      })
    );
    return editedAssets;
  };

  //让视频秒数格式化
  function formatDuration(duration) {
    let minutes = Math.floor(duration / 60);
    let seconds = Math.round(duration % 60);
    if (seconds < 10) {
      seconds = "0" + seconds;
    }
    return `${minutes}:${seconds}`;
  }

  //header组件
  const ImagePickerHeader = (props) => {
    return (
      <View
        style={{
          paddingTop: insets.top,
          height: 100,
          ...tailwind("px-4 bg-white flex-row justify-between items-center"),
        }}
      >
        {props.view == "album" && (
          <>
            <View style={tailwind("w-10")}></View>
            <Text style={tailwind("text-lg text-center")}>选择相册</Text>
            <TouchableOpacity
              onPress={() => {
                setVisible(false);
              }}
              style={tailwind("flex-row items-center")}
            >
              <Text
                style={{
                  color: "#4387d6",
                  ...tailwind("text-lg font-semibold ml-1"),
                }}
              >
                取消
              </Text>
            </TouchableOpacity>
          </>
        )}
        {props.view == "gallery" && (
          <>
            <TouchableOpacity onPress={props.goToAlbum}>
              <Icon type="ionicon" name="chevron-back" size={32} />
            </TouchableOpacity>
            <Text
              style={tailwind("text-lg text-center w-1/2")}
              numberOfLines={1}
              ellipsizeMode="tail"
            >
              {props.album.title}
            </Text>

            {props.imagesPicked > 0 ? (
              <TouchableOpacity
                onPress={props.save}
                style={tailwind("flex-row items-center")}
              >
                <Badge value={props.imagesPicked} status="primary" />
                <Text
                  style={{
                    color: "#4387d6",
                    ...tailwind("text-lg font-semibold ml-1"),
                  }}
                >
                  完成
                </Text>
              </TouchableOpacity>
            ) : (
              <TouchableOpacity
                onPress={() => {
                  setVisible(false);
                }}
                style={tailwind("flex-row items-center")}
              >
                <Text
                  style={{
                    color: "#4387d6",
                    ...tailwind("text-lg font-semibold ml-1"),
                  }}
                >
                  取消
                </Text>
              </TouchableOpacity>
            )}
          </>
        )}
      </View>
    );
  };

  //check组件
  const ImagePickerCheck = () => {
    return (
      <View
        style={{
          width: "100%",
          height: "100%",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "rgba(0,0,0,0.6)",
        }}
      >
        <Icon type="ionicon" name="checkmark" color="white" size={32} />
      </View>
    );
  };

  //album组件
  const ImagePickerAlbum = (props) => {
    return (
      <TouchableOpacity
        onPress={() => props.goToGallery(props.album)}
        style={{ flex: 1, height: 200 }}
      >
        <Image
          source={{ uri: props.thumb.uri }}
          style={{ width: "100%", height: "100%" }}
          blurRadius={10}
        ></Image>
        <View
          style={{
            position: "absolute",
            width: "100%",
            height: "100%",
            backgroundColor: "rgba(0,0,0,0.2)",
            justifyContent: "flex-end",
          }}
        >
          <View style={{ padding: 5, flexDirection: "row" }}>
            <Icon type="ionicon" name="folder-open" color="white" size={16} />
            <Text
              style={{
                color: "white",
                fontSize: 16,
                marginLeft: 5,
              }}
            >
              {props.album.title}
            </Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  };

  //video组件
  const ImagePickerVideo = (props) => {
    return (
      <View style={tailwind("flex-1 justify-end")}>
        <View
          style={tailwind(
            "flex-row justify-between items-center bg-black px-2"
          )}
        >
          <Icon type="ionicon" name="videocam" color="white" size={16} />
          <Text numberOfLines={1} style={tailwind("text-xs text-white")}>
            {formatDuration(props.duration)}
          </Text>
        </View>
      </View>
    );
  };

  return (
    <>
      <Modal
        visible={visible && permissionStatus == "granted"}
        transparent={true}
        statusBarTranslucent
        animationType="slide"
      >
        <View
          style={{
            ...tailwind("bg-white flex-1"),
          }}
        >
          <ImagePicker
            theme={{
              header: ImagePickerHeader,
              check: ImagePickerCheck,
              album: ImagePickerAlbum,
              video: ImagePickerVideo,
            }}
            onSave={async (assets) => {
              const editedAssets = await changeToLocalUri(assets);
              setAssets(editedAssets);
              setVisible(false);
            }}
            onCancel={() => {
              setVisible(false);
            }}
            galleryColumns={3}
            albumColumns={2}
            multiple
            onSelectAlbum={(album) => setAlbum(album)}
            selectedAlbum={album}
            limit={maxCount}
            video={type === "video" || type === "mix"}
            image={type === "image" || type === "mix"}
          />
        </View>
      </Modal>
      <MyModal
        visible={requestModalVisible}
        setVisible={setRequestModalVisible}
        title="权限申请"
        content="该功能需要开启存储权限，用于选择上传媒体文件"
        confirmText="继续"
        custom={() => {
          setRequestModalVisible(false);
          requestMediaLibraryPermissions();
        }}
        customText="继续"
      />
      <MyModal
        visible={overlayVisible}
        setVisible={setOverlayVisible}
        title="未获得相册权限"
        content="请先前往设置打开相关权限后重试"
        confirmText="去设置"
        cancel={() => {
          setOverlayVisible(false);
        }}
        confirm={() => {
          Linking.openSettings();
          setOverlayVisible(false);
        }}
      />
    </>
  );
}