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

cczfrluj  于 2023-03-24  发布在  React
关注(0)|答案(1)|浏览(160)

当使用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的样式,但是这样视频就完全不显示了。我该怎么做呢?

kgsdhlau

kgsdhlau1#

video样式中删除flex
flex将定义你的项目如何沿着你的主轴“填充”可用空间。空间将根据每个元素的flex属性进行划分。
有关详细信息,请参见Layout with Flexbox

相关问题