如何在 React Native 中调整视频大小？

Question

使用expo-av库显示视频时，视频占据了整个屏幕，部分宽度被裁剪，如下图：

目前，视频的显示方式如下：

function DisplayScreen({route, navigation}) {
    const video = React.useRef(null);
    const [status, setStatus] = React.useState({});

    return(
        <View style={global.vidContainer}>
            <Video
                ref={video}
                style={global.video} 
                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>
    )
}

和我的风格（global.js）

vidContainer: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: 400
    },

    video: {
        width: 400,
        height: 100,
        resizeMode: 'contain',
        flex: 1,
        alignSelf: 'flex'
    }

我也试过

width: window.width

的造型

video

，但是视频完全没有出现。我该怎么做？

Answer 1

从

flex

样式中删除

video

。

flex 将定义您的项目将如何“填充”沿主轴的可用空间。空间将根据每个元素的 flex 属性进行划分。

有关详细信息，请参阅使用 Flexbox 进行布局。