React Native iOS端用react-native-fetch-blob下载失败，求替代方案

Hey there! I see you're stuck getting file downloads working on iOS with the outdated react-native-fetch-blob v0.10.8—let's walk through reliable alternatives that play nice with both platforms, plus some context on why your current code isn't working for iOS.

Why Your Current Code Fails on iOS #

react-native-fetch-blob v0.10.8 is pretty old, and iOS has stricter file system rules that this version doesn't handle well:

• fs.dirs.PictureDir on iOS requires explicit photo library permissions that aren't set up in your code.
• The library's iOS implementation has unpatched bugs that were fixed in newer, maintained forks or alternative libraries.

Recommended Alternatives #

1. react-native-blob-util (Successor to react-native-fetch-blob) #

This is the official maintained fork of react-native-fetch-blob, so it feels familiar but fixes most iOS compatibility gaps.

Installation

npm install react-native-blob-util
# or yarn add react-native-blob-util

iOS Setup

Add these permissions to your Info.plist (required for saving files to the photo library):

<key>NSPhotoLibraryAddUsageDescription</key>
<string>Need photo library access to save downloaded files</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Need photo library access to save downloaded files</string>

Download Code Example

import RNFetchBlob from 'react-native-blob-util';

const downloadFinalBlog = async () => {
  const { config, fs } = RNFetchBlob;
  // Use DocumentDir first (fewer iOS restrictions) then move to Photos if needed
  const downloadPath = `${fs.dirs.DocumentDir}/example.pdf`;

  try {
    const res = await config({
      fileCache: true,
      path: downloadPath,
      // Skip addAndroidDownloads on iOS—it's Android-only
    }).fetch('GET', 'http://www.example.com/example.pdf');

    console.log('Download saved to:', res.path());

    // Optional: Move file to Photos (requires permissions set above)
    await RNFetchBlob.fs.moveFile(res.path(), `${fs.dirs.PictureDir}/example.pdf`);
    console.log('File moved to Photos');
  } catch (error) {
    console.error('Download error:', error);
  }
};

2. react-native-fs (RNFS) #

A widely used, stable file system library with rock-solid cross-platform support.

Installation

npm install react-native-fs
# or yarn add react-native-fs

iOS Setup

Add the same photo library permissions to Info.plist as listed above.

Download Code Example

import RNFS from 'react-native-fs';

const downloadFinalBlog = async () => {
  const url = 'http://www.example.com/example.pdf';
  const downloadDest = `${RNFS.DocumentDirectoryPath}/example.pdf`;

  const options = {
    fromUrl: url,
    toFile: downloadDest,
  };

  try {
    const result = await RNFS.downloadFile(options).promise;
    console.log('Download complete, status code:', result.statusCode);

    // Optional: Copy file to Photos
    await RNFS.copyFile(downloadDest, `${RNFS.PictureDirectoryPath}/example.pdf`);
    console.log('File copied to Photos');
  } catch (error) {
    console.error('Download failed:', error);
  }
};

3. Expo File System (For Expo or Bare Projects) #

If you're using Expo, this is a built-in, hassle-free option. For bare React Native projects, you can install it separately too.

Installation (Bare Projects)

npx expo install expo-file-system expo-media-library

Download Code Example

import * as FileSystem from 'expo-file-system';
import * as MediaLibrary from 'expo-media-library';

const downloadFinalBlog = async () => {
  const url = 'http://www.example.com/example.pdf';
  const downloadDest = `${FileSystem.documentDirectory}example.pdf`;

  try {
    // Request media library permission first
    const permission = await MediaLibrary.requestPermissionsAsync();
    if (!permission.granted) {
      console.log('Permission denied—can\'t save to Photos');
      return;
    }

    const { uri } = await FileSystem.downloadAsync(url, downloadDest);
    console.log('Downloaded to:', uri);

    // Save to a custom "Downloads" album in Photos
    const asset = await MediaLibrary.createAssetAsync(uri);
    await MediaLibrary.createAlbumAsync('Downloads', asset, false);
    console.log('File saved to Downloads album');
  } catch (error) {
    console.error('Download error:', error);
  }
};

Quick Fix for Your Original Code (If You Must Stick with RNFetchBlob) #

If you really need to use the old version, try these tweaks:

• Replace fs.dirs.PictureDir with fs.dirs.DocumentDir (iOS has fewer restrictions on this directory)
• Add the photo library permissions to Info.plist as mentioned earlier
• Remove the addAndroidDownloads config block when running on iOS (it's Android-only and can cause conflicts)

That said, I strongly recommend moving to one of the maintained alternatives above for long-term stability and better iOS support.

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