React Native Expo应用下载图片反复弹出权限弹窗求助

问题概述 #

开发基于Expo的React Native应用，核心功能是展示图片列表并支持将图片下载到设备的Download文件夹，依赖expo-media-library和expo-file-system。当前遇到两个问题：

• 每次下载图片都会弹出"Allow app to modify this photo?"权限确认弹窗，打断交互流程
• 点击弹窗的"Deny"选项后应用崩溃，但图片仍会被下载到Download文件夹

问题根源 #

1. 每次调用MediaLibrary.addAssetsToAlbumAsync等媒体库操作时，即使已通过requestPermissionsAsync获取基础权限，系统仍会触发额外的权限确认弹窗
2. 图片实际已通过FileSystem.downloadAsync下载到应用私有目录，后续的MediaLibrary操作仅用于将其添加到系统相册，但这一步触发了重复弹窗；同时拒绝权限时，未处理MediaLibrary操作的异常导致应用崩溃

解决方案 #

直接使用expo-file-system将图片下载到系统公共Download目录，跳过expo-media-library的资产创建和相册添加步骤。这样既可以避免重复的权限弹窗，又能确保图片直接出现在系统的Download文件夹中。

修改步骤 #

1. 调整下载路径：将下载目标从应用私有documentDirectory改为系统公共downloadDirectory
2. 移除MediaLibrary相关操作：无需创建媒体资产或添加到相册，直接下载到公共目录即可被系统识别
3. 优化权限处理：仅请求必要的文件系统权限，无需媒体库权限（若不需要访问相册其他内容）

修改后的完整代码 #

import React, { useEffect } from 'react';
import { SafeAreaView, StyleSheet, Image, TouchableOpacity, Text, Platform } from 'react-native';
import * as FileSystem from 'expo-file-system';
import * as Permissions from 'expo-permissions';

const pictureArray = [
  { url: 'https://i.pinimg.com/originals/cf/5d/f7/cf5df7e4e7804644a43be3f66a224b9d.jpg', title: 'Image1.jpg' },
  { url: 'https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?size=626&ext=jpg&ga=GA1.1.1412446893.1704326400&semt=sph', title: 'Image2.jpg' },
  { url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7BuBOOTa_XglTuj2GTZxxffYST85b65PR2uRo-4n95w&s', title: 'Image3.jpg' },
];

const downloadPictureToLocalStorage = async (imageUrl, title) => {
  try {
    // 使用系统公共Download目录作为下载目标
    const fileUri = `${FileSystem.downloadDirectory}${title}`;
    
    // 检查文件是否已存在，避免重复下载
    const fileExists = await FileSystem.getInfoAsync(fileUri);
    if (fileExists.exists) {
      console.log('文件已存在，跳过下载');
      return;
    }

    const downloadObject = FileSystem.createDownloadResumable(imageUrl, fileUri);
    const { uri } = await downloadObject.downloadAsync();

    console.log('图片已成功下载到Download文件夹:', uri);
  } catch (err) {
    console.log('下载图片出错:', err);
  }
};

const App = () => {
  useEffect(() => {
    (async () => {
      // Android需请求文件系统写入权限
      if (Platform.OS === 'android') {
        const { status } = await Permissions.askAsync(Permissions.WRITE_EXTERNAL_STORAGE);
        if (status !== 'granted') {
          console.log('文件系统写入权限未获取');
        }
      }
      // iOS无需额外权限即可写入downloadDirectory
    })();
  }, []);

  const handleImagePress = async (imageUrl, title) => {
    await downloadPictureToLocalStorage(imageUrl, title);
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text>图片下载测试</Text>
      {pictureArray.map((item, index) => (
        <TouchableOpacity key={index} onPress={() => handleImagePress(item.url, item.title)}>
          <Image source={{ uri: item.url }} style={styles.image} />
        </TouchableOpacity>
      ))}
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#ecf0f1',
    paddingTop: 200,
  },
  image: {
    width: 200,
    height: 200,
    marginBottom: 20,
  },
});

export default App;

额外配置（app.json） #

确保在app.json中添加必要的权限声明：

{
  "expo": {
    "android": {
      "permissions": [
        "WRITE_EXTERNAL_STORAGE"
      ]
    },
    "ios": {
      "infoPlist": {
        "NSPhotoLibraryAddUsageDescription": "需要访问相册以保存图片" // 仅需保存到Download目录可省略
      }
    }
  }
}

注意事项 #

• FileSystem.downloadDirectory在Android对应系统Download文件夹，在iOS对应Files应用中的"Downloads"目录，无需额外操作即可被系统识别
• 若需要让图片出现在系统相册中（而非仅Download文件夹），则仍需使用MediaLibrary，但此时无法避免系统的权限确认弹窗（这是Android/iOS系统的安全机制）
• 增加文件存在检查可以避免重复下载相同文件，优化用户体验

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