使用Expo File System在React Native iOS中下载图片报错排查

核心问题 #

报错提示目录不存在，本质是文件名包含空格导致的路径解析错误。你的getCurrentDateTime()返回的时间格式带有空格（比如2022-09-07 07:37:36），直接拼接成文件名后，iOS的文件系统无法正确识别带空格的路径，进而触发“目录不存在”的错误。

另外还有两个次要问题：

• MediaLibrary.requestPermissionsAsync()是异步操作，你没有用await等待权限请求完成，可能导致后续操作在权限未授权时执行。
• Promise嵌套过多，代码可读性差且容易遗漏错误处理。

修复方案 #

1. 替换文件名中的空格 #

将时间字符串里的空格替换为下划线或其他合法字符，确保路径格式正确。

2. 等待权限请求完成 #

用await等待权限请求结果，确认授权后再执行下载操作。

3. 用async/await优化Promise链 #

简化代码结构，统一错误处理逻辑。

修改后的代码 #

import React from 'react'
import * as Sharing from "expo-sharing";
import * as FileSystem from 'expo-file-system';
import * as MediaLibrary from 'expo-media-library';
import { getCurrentDateTime } from './UtilityHelper';
import { messageBoxOK } from './AlertHelper';

export const downloadFileIOS = async (url, ticker) => {        
    // 替换时间字符串中的空格为下划线
    const formattedDateTime = getCurrentDateTime().replace(/\s+/g, '_');
    let filename = `${ticker}_${formattedDateTime}.png`;     

    // 等待权限请求完成
    const permissionResult = await MediaLibrary.requestPermissionsAsync();
    if (!permissionResult.granted) {
        messageBoxOK("Download", "需要相册权限才能保存图片");
        return;
    }

    if (filename) {
        try {
            const { uri } = await FileSystem.downloadAsync(
                url,
                `${FileSystem.documentDirectory}${filename}`
            );
            console.log('Finished downloading to ', uri);            

            const asset = await MediaLibrary.createAssetAsync(uri);
            console.log('asset', asset);                

            await MediaLibrary.createAlbumAsync('My Gallery', asset, false);
            messageBoxOK("Download", "Success");
        } catch (error) {
            console.error(error);
            messageBoxOK("Download", "Failed");
        }
    }
};

关键修改说明 #

• 用replace(/\s+/g, '_')替换时间中的所有空格，确保文件名合法。
• 添加await等待权限请求，并判断是否授权，避免无权限时执行后续操作。
• 用try/catch统一处理所有异步操作的错误，替代多层then/catch，代码更简洁。
• 使用模板字符串拼接路径，可读性更强。

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