如何在React Native项目中实现数据备份与恢复功能？

核心依赖选择 #

用react-native-fs处理设备文件读写，react-native-document-picker让用户选择备份文件，这两个库都是React Native生态中稳定可靠的工具。

备份功能实现 #

1. 确定文件路径 #

先明确你的书籍JSON文件存储位置，通常放在应用文档目录：

import RNFS from 'react-native-fs';

// 原书籍数据文件路径
const BOOKS_FILE_PATH = `${RNFS.DocumentDirectoryPath}/books.json`;
// 备份文件存储到外部可访问目录（用户能在文件管理器找到）
const BACKUP_DIR = RNFS.ExternalDirectoryPath;

2. 生成备份文件 #

写一个异步函数完成备份，带时间戳的文件名避免重复：

const createBackup = async () => {
  try {
    // 读取原文件内容
    const bookData = await RNFS.readFile(BOOKS_FILE_PATH, 'utf8');
    // 生成唯一备份文件名
    const backupFileName = `books_backup_${new Date().toISOString().slice(0,10)}.json`;
    const backupFilePath = `${BACKUP_DIR}/${backupFileName}`;
    
    // 写入备份文件
    await RNFS.writeFile(backupFilePath, bookData, 'utf8');
    alert('备份成功，文件已保存到设备存储目录');
  } catch (error) {
    alert(`备份失败：${error.message}`);
  }
};

恢复功能实现 #

1. 选择备份文件 #

用文档选择器让用户挑选本地备份文件：

import DocumentPicker from 'react-native-document-picker';

const restoreBackup = async () => {
  try {
    // 打开文件选择器，过滤JSON文件
    const selectedFile = await DocumentPicker.pick({
      type: [DocumentPicker.types.json],
      allowMultiSelection: false,
    });

    // 读取备份文件内容
    const backupContent = await RNFS.readFile(selectedFile.uri, 'utf8');
    
    // 验证数据格式，避免损坏文件导致崩溃
    JSON.parse(backupContent);
    
    // 覆盖原数据文件
    await RNFS.writeFile(BOOKS_FILE_PATH, backupContent, 'utf8');
    alert('恢复成功，请重启应用生效');
  } catch (error) {
    if (DocumentPicker.isCancel(error)) return;
    alert(`恢复失败：${error.message}`);
  }
};

权限配置 #

Android #

在android/app/src/main/AndroidManifest.xml中添加权限：

<!-- Android 12及以下 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<!-- Android 13+ -->
<uses-permission android:name="android.permission.READ_MEDIA_DOCUMENTS" />

iOS #

在ios/[你的项目名]/Info.plist中添加权限描述：

<key>NSDocumentPickerUsageDescription</key>
<string>需要访问设备文档以恢复备份数据</string>
<key>NSFileProviderDomainUsageDescription</key>
<string>需要保存备份文件到设备</string>

可选优化 #

• 压缩备份文件：用lz-string压缩JSON内容，减少文件体积：

  import LZString from 'lz-string';
  
  // 备份时压缩
  const compressedData = LZString.compressToUTF16(bookData);
  await RNFS.writeFile(backupFilePath, compressedData, 'utf8');
  
  // 恢复时解压
  const decompressedData = LZString.decompressFromUTF16(backupContent);
  

• 备份列表展示：读取备份目录下的所有books_backup_*.json文件，在应用内生成列表，让用户直接选择恢复。

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