React Native中如何将字符串转为文本文件并下载到手机本地

前置依赖安装 #

推荐使用react-native-fs库实现文件读写能力，安装命令如下：

# npm安装
npm install react-native-fs --save
# yarn安装
yarn add react-native-fs

React Native 0.60及以上版本会自动完成依赖Link，无需额外执行Link命令。如果是Expo项目，可以使用expo-file-system库替代，核心逻辑一致，仅API写法存在小幅差异。

权限配置 #

安卓端配置 #

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

<!-- 安卓10及以下版本存储权限 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="29" />
<!-- 安卓13及以上版本媒体访问权限 -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />

同时在<application>节点添加属性适配安卓10以上存储策略：

android:requestLegacyExternalStorage="true"

iOS端配置 #

在ios/项目名/Info.plist中添加以下配置，允许用户在系统「文件」APP中查看导出的文件：

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

核心实现代码 #

import RNFS from 'react-native-fs';
import PermissionsAndroid from 'react-native/Libraries/PermissionsAndroid/PermissionsAndroid';

// 安卓动态申请存储权限
const requestAndroidPermission = async () => {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
      {
        title: '存储权限申请',
        message: '需要存储权限将文件保存到本地',
        buttonNeutral: '稍后问我',
        buttonNegative: '拒绝',
        buttonPositive: '允许',
      }
    );
    return granted === PermissionsAndroid.RESULTS.GRANTED;
  } catch (err) {
    console.warn(err);
    return false;
  }
};

/**
 * 字符串写入本地文本文件
 * @param {string} contentStr 要写入的字符串内容
 * @param {string} fileName 保存的文件名，默认值为export.txt
 */
const saveStringToTxt = async (contentStr, fileName = 'export.txt') => {
  // 安卓端先申请权限
  if (Platform.OS === 'android') {
    const hasPermission = await requestAndroidPermission();
    if (!hasPermission) return { success: false, msg: '缺少存储权限，保存失败' };
  }

  try {
    // 存储路径设置为公共下载目录，用户可在系统文件管理的下载分类中找到文件
    // 若仅需App内部访问，可替换为RNFS.DocumentDirectoryPath，无需申请权限
    const savePath = `${RNFS.DownloadDirectoryPath}/${fileName}`;
    // 以utf8编码写入文件
    await RNFS.writeFile(savePath, contentStr, 'utf8');
    return { success: true, path: savePath, msg: '文件保存成功' };
  } catch (error) {
    return { success: false, msg: '保存失败', error: error };
  }
};

// 调用示例
const handleExport = () => {
  const targetStr = '这是要写入文本文件的指定字符串内容';
  saveStringToTxt(targetStr, '自定义文件名.txt').then(res => {
    console.log(res.msg);
  });
};

注意事项 #

• 文件名禁止包含/\?%*:|"<> 等系统非法字符，避免出现写入异常
• 如果导出的文件仅需App内部访问，无需对外暴露，直接使用RNFS.DocumentDirectoryPath作为根路径即可，不需要申请任何存储权限
• 写入大文本时可添加进度监听，结合RNFS.writeFile的回调参数实现导出进度展示

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