React Native应用中视频渲染空白问题求助

嗨，刚接触React Native遇到这种视频渲染的问题太正常了，我帮你梳理下可能的原因和解决办法，先看看你的问题和代码：

我是React Native开发新手，现在尝试在应用中渲染视频。视频的URI来自Node.js后端，后端用Multer把媒体文件存在/uploads文件夹里。现在图片能正常显示，但视频就是出不来，只显示一块空白区域。请帮忙看看问题出在哪，提前感谢！

我的渲染代码 #

const renderPost = ({ item }) => {
  const mediaUri = `http://10.50.99.238:5001${item.media_url}`;

  return (
    <View
      style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: "#ccc" }}
    >
      <Text style={{ fontWeight: "bold" }}>{item.user_id}</Text>
      {item.media_url &&
      item.media_url.endsWith(".mp4") &&
      isValidUrl(mediaUri) ? (
        <View style={{ width: "100%", height: 200 }}>
          <VideoView
            source={{ uri: mediaUri }}
            style={{ width: "100%", height: 300 }}
            useNativeControls // Use native controls for play/pause etc.
            resizeMode="contain"
            shouldPlay // Start playing as soon as it's loaded
            isLooping // Loop the video
            onError={(error) => console.log("Video Error:", error)}
            onLoadStart={() => console.log("Loading video...")}
            onLoad={() => console.log("Video loaded successfully")}
          />
        </View>
      ) : item.media_url && isValidUrl(mediaUri) ? (
        <Image
          source={{ uri: mediaUri }}
          style={{ width: "100%", height: 200, marginVertical: 10 }}
          resizeMode="contain"
        />
      ) : (
        <Text>Invalid media URL</Text>
      )}
      <Text>{item.caption}</Text>
    </View>
  );
};

一步步排查解决 #

1. 先确认视频组件的原生配置是否到位

你用的VideoView如果是react-native-video库的话，原生端的配置很容易踩坑：

• Android端：
  要在android/app/src/main/AndroidManifest.xml里确保加了互联网权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

  另外RN 0.60+虽然支持自动链接，但如果是刚装的库，建议跑一遍cd android && ./gradlew clean再重新编译。
• iOS端：
  iOS的ATS（App Transport Security）默认会阻止非HTTPS的请求，你的后端是本地IP的HTTP服务，所以要在Info.plist里添加配置允许访问这个IP：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSExceptionDomains</key>
    <dict>
      <key>10.50.99.238</key>
      <dict>
        <key>NSIncludesSubdomains</key>
        <true/>
        <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
        <true/>
      </dict>
    </dict>
  </dict>
  

  这样就能允许加载这个IP下的HTTP资源了。

2. 样式不匹配导致的显示异常

你给视频外层的View设了height:200，但里面的VideoView设了height:300，这会导致视频组件超出父容器，要么被截断要么显示不全，看起来像空白。把两个高度统一一下，比如都设为200：

<View style={{ width: "100%", height: 200 }}>
  <VideoView
    source={{ uri: mediaUri }}
    style={{ width: "100%", height: 200 }}
    // 其他属性不变
  />
</View>

3. 后端的视频资源是否能正常访问

先把拼接好的mediaUri复制到手机的浏览器里（手机和电脑要在同一个局域网），看看能不能直接打开播放：

• 如果浏览器也打不开，那就是后端的问题：要确认Node.js后端已经把/uploads目录设为静态资源目录，比如用Express的话要加：

  const path = require('path');
  app.use('/uploads', express.static(path.join(__dirname, 'uploads')));
  

  还要检查item.media_url的格式，比如是不是以/uploads/xxx.mp4开头，拼接后的URL是不是完整的，比如http://10.50.99.238:5001/uploads/test.mp4。

4. 视频组件的属性调试

暂时把shouldPlay改成false，看看能不能显示视频的封面，如果能显示，说明加载是正常的，只是自动播放的问题；如果还是空白，试试把resizeMode改成cover或者stretch，有时候contain如果视频比例和容器不匹配，可能会显示黑边或者空白。

另外，一定要看控制台的日志，onError有没有打印错误信息？onLoadStart和onLoad有没有触发？

• 如果onLoadStart没触发：说明视频URI无效，或者组件没正确识别到source
• 如果onError有日志：根据错误信息定位，比如视频编码不支持（React Native Video对H.264编码的MP4支持最好，其他编码可能出问题）、权限不足等。

5. 视频文件本身的问题

确认你的MP4文件本身是正常的，比如用电脑的播放器能不能播放，编码是不是H.264，有些特殊编码的视频在移动端原生播放器里是不支持的。

备注：内容来源于stack exchange，提问作者colonel bond