React Native中如何正确加载文件？尝试现有方法导入失败求解决方案

场景1：加载项目内静态资源（图片、JSON配置文件等） #

• 资源需统一存放在项目内的assets目录下，文件名不要包含中文、特殊字符，避免打包时识别失败
• 静态资源导入为打包时预处理，不支持动态路径拼接，正确导入方式如下：

// 导入图片资源
import customImg from './assets/test.png'
// 导入JSON配置文件
import appConfig from './assets/config.json'

• 组件内使用示例：

import { Image } from 'react-native'

// 渲染图片
<Image source={customImg} style={{width: 120, height: 120}} />

• 如果需要动态切换静态资源，需提前声明所有资源的引用：

const iconMap = {
  home: require('./assets/home_icon.png'),
  user: require('./assets/user_icon.png'),
  setting: require('./assets/setting_icon.png')
}

// 动态调用
<Image source={iconMap[currentPage]} style={{width: 24, height: 24}} />

场景2：加载设备本地文件系统文件 #

• 需先安装文件访问依赖：

# 安装依赖
npm install react-native-fs --save
# iOS端执行pod安装
cd ios && pod install

• 读取本地文件示例：

import RNFS from 'react-native-fs'

const readLocalFile = async () => {
  // 示例路径为应用文档目录下的note.txt，可替换为相册、下载目录等路径
  const targetPath = `${RNFS.DocumentDirectoryPath}/note.txt`
  try {
    const fileContent = await RNFS.readFile(targetPath, 'utf8')
    console.log('读取到的文件内容：', fileContent)
  } catch (error) {
    console.log('读取失败：', error.message)
  }
}

注意：读取系统公共目录文件（如相册、下载目录）需要先申请对应存储权限

场景3：加载网络文件 #

• 网络图片可直接通过Image组件加载：

<Image 
  source={{uri: 'https://example.com/test_img.png'}} 
  style={{width: 120, height: 120}}
/>

• 其他类型网络文件可通过fetch API请求获取：

const getNetFile = async () => {
  try {
    const res = await fetch('https://example.com/config.json')
    const data = await res.json()
    console.log('获取到的网络文件内容：', data)
  } catch (error) {
    console.log('请求失败：', error.message)
  }
}

注意：Android 9及以上系统默认禁止HTTP请求，如需加载HTTP资源需在AndroidManifest.xml中配置android:usesCleartextTraffic="true"

常见导入失败排查点 #

• 静态资源相对路径拼写错误，相对路径为相对于当前编写代码的JS/TS文件位置
• 资源文件名包含中文、空格或特殊字符，导致打包时无法识别
• 本地文件读取未申请对应系统权限
• 网络资源地址无效、或域名未配置HTTPS/HTTP白名单

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