React Native中使用react-native-video如何获取视频尺寸？

你通过ref访问props里的scaleX、scaleY是行不通的，react-native-video的ref并不会暴露这些属性。要获取视频尺寸，有两种实用的方式：

1. 获取视频原始自然尺寸（推荐） #

react-native-video自带onLoad回调，当视频加载完成时，会返回包含视频原始宽高的参数，直接用这个就能拿到最准确的视频原生尺寸：

import { useState } from 'react';
import Video from 'react-native-video';

function VideoPlayer() {
  const [videoNaturalSize, setVideoNaturalSize] = useState({ width: 0, height: 0 });

  const onVideoLoaded = (loadData) => {
    // loadData.naturalWidth/height 就是视频的原始宽高
    setVideoNaturalSize({
      width: loadData.naturalWidth,
      height: loadData.naturalHeight,
    });
  };

  return (
    <Video
      ref={ref => setVideoRef(ref)}
      resizeMode={'contain'}
      onLoad={onVideoLoaded}
      source={{ uri: '你的视频地址' }} // 记得补充视频源
    />
  );
}

2. 获取视频渲染后的实际显示尺寸 #

如果需要的是视频在屏幕上实际占据的宽高（受resizeMode和容器尺寸影响），可以给Video组件绑定onLayout事件：

const onVideoLayout = (layoutEvent) => {
  const { width, height } = layoutEvent.nativeEvent.layout;
  // 这里的width和height就是视频组件实际渲染的屏幕尺寸
};

// 在Video组件上添加事件监听
<Video
  // 其他属性
  onLayout={onVideoLayout}
/>

要是需要计算缩放比例，比如配合contain模式，可以用视频原始尺寸和容器尺寸自己推导：Math.min(容器宽度/视频原始宽度, 容器高度/视频原始高度)。

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