如何在React Native中调整expo-av视频尺寸解决裁切问题？

问题根源分析 #

你的代码里存在几个样式冲突和错误设置：

• Video组件的resizeMode与样式文件里的resizeMode重复设置，且样式中的flex:1会覆盖固定宽高width:400, height:100，导致视频被强制拉伸占满容器
• alignSelf: 'flex'是无效属性值，会干扰正常布局逻辑
• 直接使用window.width是错误写法，React Native中需通过Dimensions工具获取屏幕尺寸

修复步骤及代码 #

1. 首先在DisplayScreen文件顶部导入Dimensions：

import { Dimensions } from 'react-native';

2. 修改global.js里的样式，移除冲突属性：

vidContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: 400
},
video: {
    // 删掉flex:1和无效的alignSelf，避免覆盖固定尺寸
    // 可先保留基础高度，宽度后续动态设置
    height: 200
}

3. 调整DisplayScreen的Video组件，确保resizeMode正常生效：

function DisplayScreen({route, navigation}) {    
    const video = React.useRef(null);    
    const [status, setStatus] = React.useState({});
    // 获取当前屏幕宽度
    const screenWidth = Dimensions.get('window').width;

    return(
        <View style={global.vidContainer}>
            <Video
                ref={video}
                style={{
                    ...global.video,
                    width: screenWidth - 40 // 左右留20px边距，避免视频贴满屏幕边缘
                }}
                source = {require("../assets/demos/Bridges.mp4") }
                useNativeControls
                resizeMode="contain" // 核心设置，确保视频按原比例完整显示
                isLooping
                onPlaybackStatusUpdate={setStatus}
            />
            <View>
                <Button
                    title={status.isPlaying ? 'Pause' : 'Play'}
                    onPress={() =>
                        status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()
                    }
                />
            </View>
        </View>
    )
}

进阶优化（保持视频原比例） #

如果想让视频严格保持原始宽高比、不被拉伸变形，可以通过比例计算动态设置高度：

// 替换成你实际视频的宽高比，比如16:9的视频就写16/9
const videoAspectRatio = 16 / 9;
const videoWidth = screenWidth - 40;
const videoHeight = videoWidth / videoAspectRatio;

// 把Video组件的style改成：
style={{ width: videoWidth, height: videoHeight }}

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