Expo React Native加载本地JSON文件时Fetch API请求失败问题排查

• 相对路径不符合Expo资源规则：Expo对本地静态资源的路径处理和普通Web项目不同，../Audio/AudiosObj.json这类相对路径无法被正确解析。Expo要求静态资源需放在assets目录下，或确保文件被打包系统识别，否则fetch无法定位到文件。
• fetch请求配置语法错误：代码中Accept字段的application/json未加引号，属于语法错误，会导致请求参数无效，触发异常。正确写法应为'Accept': 'application/json'。
• 本地资源不适合用fetch加载：fetch主要用于网络请求，Expo中加载本地静态JSON更推荐直接用ES模块导入，或通过expo-asset模块处理，而非fetch请求相对路径。
• 文件未被纳入打包范围：如果JSON文件不在Expo默认的资源目录（如assets），也未在app.json的assets数组中声明，打包时会被忽略，运行时自然找不到对应文件。
• 代码语法错误：你的代码存在括号不匹配问题，then((data)=>(console.log(data))缺少闭合括号，catch的嵌套位置也不正确，语法错误会导致函数执行异常，间接引发请求失败。

修正示例 #

方式1：直接导入JSON文件（最简单） #

import audiosObj from '../Audio/AudiosObj.json';

useEffect(() => {
  console.log(audiosObj);
}, []);

方式2：用Expo Asset模块加载（适合大文件） #

import { Asset } from 'expo-asset';

useEffect(() => {
  loadLocalJson();
}, []);

async function loadLocalJson() {
  try {
    const asset = Asset.fromModule(require('../Audio/AudiosObj.json'));
    await asset.downloadAsync();
    const response = await fetch(asset.localUri);
    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

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