如何在React Native构建应用前预置文件并在运行后访问

核心思路 #

把需要预置的文件提前放到iOS、安卓原生项目的资源目录，跟随应用构建打包到安装包内，应用运行时可直接读取，如需修改可拷贝到应用可读写目录操作。

方案1：手动添加到原生资源目录（适合文件少、变动少的场景） #

iOS端配置 #

• 打开Xcode，在左侧项目导航栏右键项目主名称，选择「Add Files to [你的项目名]」
• 选中需要预置的文件/文件夹，勾选 Copy items if needed，在「Add to targets」列表中勾选应用主target
• 如果要保留原文件夹层级结构，添加时选择「Create folder references」选项
• 打包后文件会存放在应用的mainBundle根目录，运行时读取路径为 ${RNFS.MainBundlePath}/[文件名]

安卓端配置 #

• 进入安卓项目目录 android/app/src/main，新建assets文件夹（已存在则跳过）
• 把所有需要预置的文件/文件夹直接放入assets目录，自动保留原有层级结构
• 运行时可直接通过RNFS.readFileAssets('文件名')读取，或者用路径file:///android_asset/[文件名]访问

运行时访问示例代码 #

如果需要修改预置文件，建议首次启动时先拷贝到应用可读写目录：

import RNFS from 'react-native-fs';
import { Platform } from 'react-native';

const PRESET_FILE_NAME = 'user_config.json';
// 可读写目录存储路径
const targetFilePath = `${RNFS.DocumentDirectoryPath}/${PRESET_FILE_NAME}`;

const initPresetFile = async () => {
  // 检查文件是否已经拷贝到可写目录
  const fileExists = await RNFS.exists(targetFilePath);
  if (fileExists) return targetFilePath;

  try {
    if (Platform.OS === 'ios') {
      // iOS从主包拷贝
      const sourcePath = `${RNFS.MainBundlePath}/${PRESET_FILE_NAME}`;
      await RNFS.copyFile(sourcePath, targetFilePath);
    } else {
      // 安卓从assets目录拷贝
      await RNFS.copyFileAssets(PRESET_FILE_NAME, targetFilePath);
    }
    return targetFilePath;
  } catch (err) {
    console.error('预置文件初始化失败', err);
    throw err;
  }
}

方案2：脚本自动同步（适合文件多、变动频繁、CI/CD构建场景） #

无需每次手动修改原生项目配置，通过构建前脚本自动同步文件到原生资源目录：

1. 项目根目录新建static-assets文件夹，存放所有需要预置的文件
2. 安装文件操作依赖：npm install fs-extra --save-dev
3. 根目录新建同步脚本sync-assets.js：

const fs = require('fs-extra');
const path = require('path');

// 源文件目录
const SOURCE_DIR = path.resolve(__dirname, './static-assets');
// 安卓目标目录
const ANDROID_TARGET = path.resolve(__dirname, './android/app/src/main/assets');
// iOS目标目录，替换为你的iOS项目名称
const IOS_TARGET = path.resolve(__dirname, './ios/MyApp');

// 同步文件，覆盖已有文件
fs.copySync(SOURCE_DIR, ANDROID_TARGET, { overwrite: true });
fs.copySync(SOURCE_DIR, IOS_TARGET, { overwrite: true });

console.log('预置文件同步完成');

4. 配置package.json脚本，触发自动同步：

{
  "scripts": {
    "prebuild": "node sync-assets.js",
    "preios": "node sync-assets.js",
    "preandroid": "node sync-assets.js"
  }
}

配置后每次执行npm run ios、npm run android或者构建命令前，都会自动同步static-assets下的文件到原生资源目录。

注意事项 #

• 预置文件名不要使用中文、空格、特殊字符，避免安卓端读取失败
• 如需保留文件夹层级，iOS添加资源时必须选择「Create folder references」
• 预置文件会直接增加安装包体积，大文件建议做压缩处理

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