如何在React Native App中搭建本地服务实现本地存储文件访问？

该需求完全可实现，React Native/Expo生态已有成熟的本地HTTP服务器实现方案，可直接满足你通过HTTP接口访问本地选中文件的需求。

优先选择适配Expo生态的静态文件服务器方案，无需弹出Expo项目，支持托管工作流与裸工作流，具体实现步骤如下：

1. 安装依赖 #

npx expo install expo-document-picker expo-file-system @dr.pogodin/react-native-static-server

2. 转存选中的文件到应用私有目录 #

通过DocumentPicker获取的文件URI属于外部存储路径，直接作为服务器根目录可能存在权限限制，需要先拷贝到应用私有文档目录：

import * as DocumentPicker from 'expo-document-picker';
import * as FileSystem from 'expo-file-system';

const pickAndStoreFile = async () => {
  const pickResult = await DocumentPicker.getDocumentAsync({});
  if (pickResult.canceled) return null;

  const selectedFile = pickResult.assets[0];
  const targetPath = `${FileSystem.documentDirectory}${selectedFile.name}`;
  
  // 拷贝文件到应用私有目录
  await FileSystem.copyAsync({
    from: selectedFile.uri,
    to: targetPath
  });
  return selectedFile.name;
}

3. 启动本地HTTP服务器 #

配置服务器根目录为应用私有文档目录，自定义未被占用的端口即可：

import StaticServer from '@dr.pogodin/react-native-static-server';

let localServer = null;
const initFileServer = async () => {
  // 端口建议选择1024以上的非知名端口，避免系统端口冲突
  localServer = new StaticServer(12450, FileSystem.documentDirectory);
  const serverHost = await localServer.start();
  console.log('本地文件服务启动：', serverHost);
  return serverHost;
}

4. 通过fetch访问文件 #

服务器启动后，所有模块均可通过localhost地址访问选中的文件：

const getLocalFile = async (fileName) => {
  const response = await fetch(`http://localhost:12450/${fileName}`);
  // 按需转换为blob、text等格式使用
  const fileBlob = await response.blob();
  return fileBlob;
}

• 应用退出或不再需要服务时，调用localServer.stop()释放端口，避免重复启动冲突
• iOS默认禁止HTTP请求，Expo托管工作流已默认配置localhost的HTTP白名单，裸工作流需在Info.plist中添加ATS例外配置
• 若仅需在JS层读取文件内容，可直接使用expo-file-system提供的读取接口，无需搭建服务器；如果对接的是WebView、原生模块等仅支持HTTP/HTTPS协议的场景，本地服务器是兼容性最高的方案

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