React Native动态加载本地视频及AsyncStorage图片问题求助

核心问题原因 #

React Native 的 Metro 打包器仅在编译阶段解析静态的 require() 路径，动态字符串（比如你从 JSON 里读取的 videoPath）无法被打包器识别，导致运行时找不到资源。这就是你用 require(videoPath) 失败的根本原因。

一、动态加载本地视频（适配你的JSON存储场景） #

根据你的需求（视频下载后存储路径到JSON），分两种场景处理：

场景1：视频是下载到设备本地存储（非打包进APP的assets） #

这种情况不能用 require()，直接使用文件系统的 URI 作为视频源即可：

import jsonFileExercise from '../../../assets/controller/data/getNextExerciseBySectionId.json'
import { Platform } from 'react-native'

// Android需要给路径加上file://前缀，iOS可直接使用原始路径
const videoUri = Platform.OS === 'android' ? `file://${jsonFileExercise.content.path}` : jsonFileExercise.content.path

return (
  <Video
    source={{ uri: videoUri }} // 用uri替代require
    rate={1.0}
    volume={1.0}
    isMuted={false}
    resizeMode="cover"
    useNativeControls
    isLooping
    style={styles.backgroundVideo}
  />
)

提示：如果是通过网络下载视频，推荐用 react-native-fs 库管理文件路径，确保获取到设备可访问的合法路径，也方便后续清理临时文件。

场景2：视频是打包进APP的本地assets #

如果视频是提前放在项目assets目录下的，需要用静态映射表实现动态加载：

1. 先定义所有视频的映射关系：

// 视频映射表，key对应JSON里存的标识
const videoMap = {
  "testvideo2": require('../video/content/testvideo2.mp4'),
  "testvideo1": require('../video/content/testvideo1.mp4'),
  // 其他视频依次添加
}

2. 修改JSON文件，把path字段改成映射表的key：

{
  "exerciseId": 1,
  "content": {
    "type": "video",
    "path": "testvideo2"
  }
}

3. 加载视频时通过key取对应的require：

import jsonFileExercise from '../../../assets/controller/data/getNextExerciseBySectionId.json'

return (
  <Video
    source={videoMap[jsonFileExercise.content.path]}
    // 其他属性保持不变
    style={styles.backgroundVideo}
  />
)

二、AsyncStorage中图片的动态加载 #

和视频逻辑一致，分两种情况处理：

情况1：图片是下载到设备本地存储 #

从AsyncStorage取出路径后，直接用uri加载：

import AsyncStorage from '@react-native-async-storage/async-storage'
import { Platform, Image } from 'react-native'
import { useState, useEffect } from 'react'

const [imageSource, setImageSource] = useState(null)

useEffect(() => {
  const loadImage = async () => {
    const imagePath = await AsyncStorage.getItem('savedImagePath')
    const imageUri = Platform.OS === 'android' ? `file://${imagePath}` : imagePath
    setImageSource({ uri: imageUri })
  }
  loadImage()
}, [])

return <Image source={imageSource} style={{ width: 200, height: 200 }} />

情况2：图片是打包进APP的assets #

同样用静态映射表实现：

1. 定义图片映射：

const imageMap = {
  "avatar1": require('../images/avatar1.png'),
  "banner1": require('../images/banner1.jpg')
}

2. AsyncStorage中存储映射表的key：

await AsyncStorage.setItem('savedImageKey', 'avatar1')

3. 加载图片：

import AsyncStorage from '@react-native-async-storage/async-storage'
import { Image } from 'react-native'
import { useState, useEffect } from 'react'

const [imageSource, setImageSource] = useState(null)

useEffect(() => {
  const loadImage = async () => {
    const imageKey = await AsyncStorage.getItem('savedImageKey')
    setImageSource(imageMap[imageKey])
  }
  loadImage()
}, [])

return <Image source={imageSource} style={{ width: 200, height: 200 }} />

额外优化建议 #

1. 对于下载的临时资源，建议用 react-native-fs 或 expo-file-system（Expo项目）管理，它们提供了缓存清理、路径校验等功能，更适配你“不永久存储”的需求。
2. 动态加载前可增加路径合法性校验，避免因路径错误导致的资源加载失败。

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