Expo ImagePicker重新打开时如何保留已选图片状态？

使用Expo ImagePicker时，重新打开选择器会丢失已选图片的选中状态。当前已将选中的图片存储在数组类型的useState中，希望再次打开ImagePicker时，这些预选图片能像Instagram/Tinder那样显示蓝色勾选或数字标记的已选中状态。尝试过使用已废弃的selected属性，未找到文档中的可行方案，请问如何传入imageUris或assets数组实现该功能？

import { FontAwesome5 } from "@expo/vector-icons";
import * as ImagePicker from "expo-image-picker";
import React, { useState } from "react";
import { Controller } from "react-hook-form";
import { Image, TouchableOpacity } from "react-native";
import { Stack } from "tamagui";

import { Button, Text } from "../../../../components";

interface ImagePickerFormProps {
  page: number;
  setPage: React.Dispatch<React.SetStateAction<number>>;
  control: any;
}

export default function ImagePickerForm(props: ImagePickerFormProps) {
  const [pickedImages, setPickedImages] = useState<
    ImagePicker.ImagePickerAsset[]
  >([]);
  const [status, requestPermission] = ImagePicker.useMediaLibraryPermissions();

  const pickImages = async () => {
    if (status?.granted === false) {
      const permissionResult = await requestPermission();
      if (!permissionResult.granted) return;
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      aspect: [16, 9],
      quality: 1,
      allowsMultipleSelection: true,
      orderedSelection: true,
      selectionLimit: 10,
      videoMaxDuration: 60,
    });

    if (!result.canceled) {
      setPickedImages(result.assets);
      return result.assets;
    }
  };

  const renderImage = (image: ImagePicker.ImagePickerAsset) => (
    <Stack key={image.uri}>
      <Image source={{ uri: image.uri }} style={{ width: 180, height: 180 }} />
      <TouchableOpacity
        style={{ position: "absolute", top: 0, right: 0, padding: 8 }}
        onPress={() => deleteImage(image)}
      >
        <FontAwesome5 name="times-circle" size={24} color="red" />
      </TouchableOpacity>
    </Stack>
  );

  const renderImages = () => (
    <Stack
      flexDirection="row"
      flexWrap="wrap"
      justifyContent="space-between"
      marginHorizontal={10}
      rowGap={20}
    >
      {pickedImages.map(renderImage)}
    </Stack>
  );

  const deleteImage = (imageToDelete: ImagePicker.ImagePickerAsset) => {
    const updatedImages = pickedImages.filter(
      (image) => image.uri !== imageToDelete.uri
    );
    setPickedImages(updatedImages);
  };

  return (
    <Stack>
      <Controller
        control={props.control}
        name="pickedImages"
        render={({ field: { onChange, value } }) => (
          <Stack>
            <Text>Images</Text>
            <Stack>
              <Button
                onPress={async () => {
                  const selectedImages = await pickImages();
                  onChange(selectedImages);
                }}
                marginVertical="$4"
              >
                <Text>Select from Camera Roll</Text>
              </Button>
              {renderImages()}
            </Stack>
          </Stack>
        )}
      />
    </Stack>
  );
}

Expo ImagePicker在较新版本中提供了selectedAssets配置项（替代已废弃的selected属性），可以直接传入已选中的ImagePickerAsset数组，实现打开选择器时自动预选中这些资源。

修改步骤： #

1. 在launchImageLibraryAsync的配置对象中添加selectedAssets: pickedImages，将当前已选中的图片数组传入选择器。
2. 优化权限请求逻辑，确保等待用户授权后再打开选择器。

修改后的pickImages函数： #

const pickImages = async () => {
  if (status?.granted === false) {
    const permissionResult = await requestPermission();
    if (!permissionResult.granted) return;
  }

  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.All,
    aspect: [16, 9],
    quality: 1,
    allowsMultipleSelection: true,
    orderedSelection: true,
    selectionLimit: 10,
    videoMaxDuration: 60,
    // 新增：传入已选中的图片数组，实现预选中状态
    selectedAssets: pickedImages
  });

  if (!result.canceled) {
    setPickedImages(result.assets);
    return result.assets;
  }
};

额外说明： #

• selectedAssets接收的是ImagePicker.ImagePickerAsset类型的数组，与你存储在pickedImages中的类型完全匹配，无需额外转换。
• 用户在选择器中取消选中的图片会自动从返回的result.assets中移除，直接用result.assets更新状态即可保持与用户操作一致。
• 如果需要支持追加选择（而非替换），可以修改状态更新逻辑为setPickedImages([...new Set([...pickedImages, ...result.assets])])，但需注意用唯一标识（如id或uri）去重。

内容的提问来源于stack exchange，提问作者noahreeves