React Native/Expo文件如何下载至iCloud Drive及iPhone本地目录

我之前做React Native项目的时候也碰到过这俩iOS文件存储的问题，折腾了好一会儿才弄明白，给你详细说下怎么解决：

你已经开启了云文档和CloudKit功能，但用dirs.DocumentDir存的文件是App私有目录，iCloud Drive默认不会展示这些文件。要让文件出现在iCloud Drive的文件App里，得用iCloud容器的公共文档路径，还要配置Info.plist的相关权限：

1. 配置iOS项目的Info.plist #

打开Xcode，找到项目的Info.plist，添加以下配置（可以右键选择「Add Row」手动添加，或者直接编辑源码）：

<key>UIFileSharingEnabled</key>
<true/>
<key>LSSupportsOpeningDocumentsInPlace</key>
<true/>
<key>NSUbiquitousContainers</key>
<dict>
  <key>iCloud.com.yourcompany.yourapp</key> <!-- 替换成你的iCloud容器ID，Xcode里能找到 -->
  <dict>
    <key>NSUbiquitousContainerIsDocumentScopePublic</key>
    <true/> <!-- 设为true才能让文件在iCloud Drive中可见 -->
    <key>NSUbiquitousContainerName</key>
    <string>你的App显示名称</string> <!-- 文件App里显示的文件夹名称 -->
    <key>NSUbiquitousContainerSupportedFolderLevels</key>
    <string>Any</string> <!-- 支持任意层级的文件夹 -->
  </dict>
</dict>

这里的iCloud.com.yourcompany.yourapp是你的iCloud容器ID，在Xcode的「Signing & Capabilities」→「iCloud」里的「Containers」列表里能找到。

2. 用React Native代码写入iCloud Drive #

不管用react-native-fetch-blob还是react-native-fs，都可以直接获取iCloud容器的文档路径：

用react-native-fetch-blob的示例：

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

const dirs = RNFetchBlob.fs.dirs;
// 获取iCloud公共文档目录
const icloudPublicDir = dirs.UbiquityDocumentsDir;
// 拼接完整文件路径
const filePath = `${icloudPublicDir}/your-data.json`;

// 写入JSON数据
const jsonData = JSON.stringify(yourDataObject);
RNFetchBlob.fs
  .writeFile(filePath, jsonData, 'utf8')
  .then(() => console.log('文件已成功保存到iCloud Drive！'))
  .catch(err => console.error('保存失败:', err.message));

用react-native-fs的示例：

import RNFS from 'react-native-fs';

// 获取iCloud公共文档目录
const icloudPublicDir = RNFS.UbiquityDocumentsDirectoryPath;
const filePath = `${icloudPublicDir}/your-data.json`;

const jsonData = JSON.stringify(yourDataObject);
RNFS.writeFile(filePath, jsonData, 'utf8')
  .then(() => console.log('文件已成功保存到iCloud Drive！'))
  .catch(err => console.error('保存失败:', err));

注意事项 #

• 测试时尽量用真机，模拟器的iCloud同步可能不稳定；
• 保存后可能需要等几秒同步时间，才能在文件App的iCloud Drive里看到文件；
• 确保你的设备已经登录了iCloud账号，并且开启了iCloud Drive功能。

「On my iPhone」里的App文件夹对应的是你的App的共享文档目录，只要开启文件共享权限，就能把文件存在这里，用户可以在文件App里直接访问：

1. 配置Info.plist #

同样需要在Info.plist里添加两个关键配置（如果之前已经加过就不用重复了）：

<key>UIFileSharingEnabled</key>
<true/>
<key>LSSupportsOpeningDocumentsInPlace</key>
<true/>

这两个配置会让你的App在「On my iPhone」下生成一个同名文件夹，用户可以直接打开查看里面的文件。

2. 用React Native代码写入目录 #

直接用DocumentDir（react-native-fetch-blob）或者DocumentDirectoryPath（react-native-fs）就可以，这个路径就是共享文档目录：

用react-native-fetch-blob的示例：

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

const dirs = RNFetchBlob.fs.dirs;
// 共享文档目录，对应「On my iPhone」里的App文件夹
const documentDir = dirs.DocumentDir;
const filePath = `${documentDir}/your-data.json`;

const jsonData = JSON.stringify(yourDataObject);
RNFetchBlob.fs
  .writeFile(filePath, jsonData, 'utf8')
  .then(() => console.log('文件已成功保存到On my iPhone的App目录！'))
  .catch(err => console.error('保存失败:', err.message));

用react-native-fs的示例：

import RNFS from 'react-native-fs';

const documentDir = RNFS.DocumentDirectoryPath;
const filePath = `${documentDir}/your-data.json`;

const jsonData = JSON.stringify(yourDataObject);
RNFS.writeFile(filePath, jsonData, 'utf8')
  .then(() => console.log('文件已成功保存到On my iPhone的App目录！'))
  .catch(err => console.error('保存失败:', err));

访问方式 #

用户打开文件App，进入「On my iPhone」列表，找到你的App名称的文件夹，点击进去就能看到你保存的文件了。

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