当屏幕旋转或点击全屏时，react-native-video-player 不定向

Question

我可以通过控件显示视频，但是当单击全屏或旋转 phone 时，我无法让视频变成横向全屏。我正在使用 react-native-video-controls，它使用 react-native-video 作为依赖项。

import React from "react";
import { View, StyleSheet, Dimensions, Text } from 'react-native';
import VideoPlayer from 'react-native-video-controls';
import OverlayButton from '../../../Images/overlay-button.svg';

const {width, height} = Dimensions.get("window");

const stylesCustom = StyleSheet.create({
    galleryContainer: {
        backgroundColor: 'rgba(255,255,255,0.1)'
    },
    header: {
        position: 'absolute',
        top: 50,
        zIndex: 100,
        width: '100%',
        paddingBottom: 10
    }
});

const VideoModal = (props) => {

return (
    <View style={[stylesCustom.galleryContainer]}>
        <View style={[stylesCustom.header]}>
            <View style={{ left: 20 }}>
                <OverlayButton onPress={() => props.handleCloseModal()}/>
            </View>
        </View>
        <View style={stylesCustom.image}>
            <VideoPlayer
                source={{ uri: `${props.streamingUrl}(format=m3u8-aapl)` }}
                control={true}
                paused={false}
                ignoreSilentSwitch="ignore"
                disableBack
                fullscreenOrientation="landscape"
                fullscreen="true"
            />
        </View>
    </View>
);
}

export default VideoModal;

Answer 1

满屏时可以水平固定

你可以使用react-native-orientation-locker

用法

import Orientation from 'react-native-orientation-locker';
...
Orientation.lockToLandscape();

Answer 2

先下载依赖react-native-orientation-locker 然后

import Orientation from 'react-native-orientation-locker';

之后添加下面的代码

const [fullScreen, setFullScreen] = useState(false);
const FullScreen = () => {
        if(fullScreen){
            Orientation.lockToPortrait();
        } else{
            Orientation.lockToLandscape();
        }
        setFullScreen(!fullScreen)
    }

并在 return

<View style= {fullScreen ?  styles.fullscreenVideo : styles.video }>
                    <Video
                        fullscreen = {fullScreen}
                        ref={video}
                        source={{
                            uri:videos,
                            type:'mpd'
                        }}
                        style={{...StyleSheet.absoluteFill}}
                        
                    />
</View>

和风格

fullscreenVideo:{
        backgroundColor: 'black',
        ...StyleSheet.absoluteFill,
        elevation: 1,
                
    },

当屏幕旋转或点击全屏时，react-native-video-player 不定向

react-native-video-player not orienting when screen is rotated or full screen is clicked

react-native

react-native-video