React Native Video无法显示视频总时长的问题排查

核心原因 #

1. 初始渲染空值访问：组件首次渲染时，totalDuration的初始状态是null，此时直接访问totalDuration.durationMillis必然触发Cannot read properties of null错误——因为onLoad回调要等视频加载完成后才会执行，首次渲染时还没给totalDuration赋值。
2. source属性格式错误：多数React Native视频组件（比如react-native-video）要求source必须传入对象格式（{uri: '视频地址'}），而非直接传字符串。格式错误可能导致视频加载失败，onLoad回调无法触发，进一步让totalDuration一直处于null状态。
3. setTotalDuration写法冗余：这里不需要用函数式更新，直接传入status对象即可。

修正后的代码 #

export default function VideoPlayer() {
  const videoPlayerRef = useRef(null);
  const [status, setStatus] = useState({});
  const [totalDuration, setTotalDuration] = useState(null);

  return (
    <View style={styles.container}>
      <Video
        ref={videoPlayerRef}
        source={{ uri: 'https://samplelib.com/lib/preview/mp4/sample-5s.mp4' }}
        onLoad={(status) => setTotalDuration(status)}
      />
      {/* 用可选链处理空值，避免初始渲染报错 */}
      <Text style={styles.timestamp}>{totalDuration?.durationMillis || 0}</Text>
    </View>
  );
}

关键修正点 #

• 用可选链操作符?.做空值防护，当totalDuration为null时不会触发报错，同时通过|| 0设置默认显示值
• 修正source为{uri: 'xxx'}的标准格式，确保视频能正常加载并触发onLoad回调
• 简化setTotalDuration的调用逻辑，直接传入回调返回的status对象

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