当我将其设置为横向时，对未设置为全屏的本机视频播放器做出反应

Question

我在我的应用中使用了 react 原生视频播放器。我想全屏设置视频，但从两侧裁剪。我使用了“窗口”的高度和宽度

width: Dimensions.get('window').width
height: Dimensions.get('window').height

但它不适用于像最新设备屏幕那样的全屏移动设备。

<View style={customStyles.videoWrapper}>
            {
                video.uri !== '' ?
                    <Video
                        {...props}
                        style={[
                            styles.video,
                            this.getSizeStyles(),
                            style,
                            customStyles.video,
                        ]}
                        ref={p => {
                            this.player = p;
                        }}
                        muted={this.props.muted || this.state.isMuted}
                        paused={this.props.paused
                            ? this.props.paused || !this.state.isPlaying
                            : !this.state.isPlaying}
                        fullscreenOrientation={"all"}
                        onProgress={this.onProgress}
                        onEnd={this.onEnd}
                        onBuffer={this.onBuffer}
                        onLoad={this.onLoad}
                        source={video}
                        fullscreen={this.state.isFullscreen}
                        resizeMode={resizeMode}
                        rate={this.props.rate}
                    /> :
                    <View style={[this.getSizeStyles(), {backgroundColor: '#000'}]}/>
            }

            <View
                style={[
                    this.getSizeStyles(),
                    {marginTop: -this.getSizeStyles().height}
                ]}
            >
                <TouchableOpacity
                    style={styles.overlayButton}
                    onPress={() => {
                        this.showControls();
                        if (pauseOnPress)
                            this.onPlayPress();
                    }}
                    onLongPress={() => {
                        if (fullScreenOnLongPress && Platform.OS !== 'android')
                            this.onToggleFullScreen();
                    }}
                />
                {this.state.isBuffering ? this.renderBuffer() :
                    (this.state.isControlsVisible)
                        ? this.renderControls() : null}
            </View>

        </View>

这是视频风格

 video: {
    backgroundColor: 'black',
},

getStyle 样式表

getSizeStyles() {
    const {videoWidth, videoHeight} = this.props;
    const {width} = this.state;
    const ratio = videoHeight / videoWidth;

    if (this.state.isFullscreen) {
        return {
            width: Dimensions.get('window').width,
            height: Dimensions.get('window').height,
        }
    }

    return {
        height: width * ratio,
        width,
    };

}

我已经创建了带有方向的全屏功能

onToggleFullScreen() {
    console.log("PixelRatio ",PixelRatio.startDetecting)
    if (this.props.onFullscreen) {
        this.props.onFullscreen(!this.state.isFullscreen);
    }

    this.state.isFullscreen ? Orientation.lockToPortrait() : Orientation.lockToLandscapeLeft();

    if (this.player !== null) {
        this.player.presentFullscreenPlayer();
    }

    if (Platform.OS === 'android') {
        this.onAndroidFullScreenToggle();
    }
    this.setState({
        isFullscreen: !this.state.isFullscreen
    });
}

Answer 1

试试这个可能会有帮助

<Video
        source={{ uri: this.state.videoUrl }} // Can be a URL or a local file.
        ref={ref => {
          this.player = ref;
        }}
        style={styles.video}
        fullscreen={true}
        resizeMode="cover"
/>

export default StyleSheet.create({

 video: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    backgroundColor: Colors.black,
  }
});