React Native项目导入含网络媒体的练习对象时模块解析失败求助

问题根源 #

你把远程视频的URL当作本地模块来import了，React Native会默认去项目目录或node_modules里找这个文件，自然找不到，直接导致应用崩溃。

修复步骤 #

1. 修改练习对象的定义
   不要用import引入远程视频/图片，直接把URL字符串存在对象里：

   // 练习对象文件示例
   export const bodyweightSquats = {
     name: "自重深蹲",
     videoUrl: "https://assets.soysuper.fit/cutted+mvp+mp4s/bodyweight_squats.mp4",
     imageUrl: "你的远程图片URL"
   };
   

2. 在目标组件中正确使用资源
   导入练习对象后，直接通过uri指定视频源（以react-native-video组件为例）：

   import { bodyweightSquats } from "./path-to-your-exercise-file";
   import Video from "react-native-video";
   
   // 组件内使用
   <Video
     source={{ uri: bodyweightSquats.videoUrl }}
     style={{ width: 300, height: 200 }}
     controls
   />
   

关键注意点 #

React Native的import语法只适用于本地文件（项目内的资源或node_modules里的包），远程网络资源必须通过{ uri: "远程URL" }的方式传递给组件的source属性，让应用在运行时请求加载资源。

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