将屏幕方向切换为LANDSCAPE时，顶部会有一个空白区域

问题描述

我正在学习React Native，并且最近尝试构建一个应用程序。 这是我第一次在这里提问。抱歉我的英语不好。

这是我的问题： 我正在使用expo-video-player实现视频播放器。 当我尝试将屏幕从纵向切换为横向时，左上角有一个空白区域。我想知道是否有人也遇到此错误。 非常感谢你。非常感谢您的帮助。

The image of the issue. The top-left corner is blank

import { View,Image,Text } from 'react-native'
import { Video } from 'expo-av'
import VideoPlayer from 'expo-video-player'
import {
  widthPercentagetoDP as wp,heightPercentagetoDP as hp
} from 'react-native-responsive-screen'
import * as Screenorientation from 'expo-screen-orientation'

class VideoCard extends Component {
  static navigationoptions = {
    header: null,headerLeft: null,gesturesEnabled: false
  }

  constructor(props) {
    super(props)

    this.state = {
      width: wp(100),height: hp(30),fullScreen: false,screenStyle: null
    }
  }

  render() {
    const { playIconStyle,fullScreenStyle } = styles
    const { width,height,fullScreen,screenStyle } = this.state
    return (
        <View style={screenStyle}>
          <VideoPlayer
              videoProps={{
                shouldplay: false,source: {
                  uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
                },resizeMode: 'cover',style: { padding: 50 },isMuted: false
              }}
              width={width}
              height={height}
              inFullscreen={fullScreen}
              showControlsOnLoad={true}
              switchToLandscape={() => {
                this.setState({
                  width: hp(100),height: wp(100),fullScreen: true,screenStyle: fullScreenStyle
                })
                Screenorientation.lockAsync(
                    Screenorientation.OrientationLock.LANDSCAPE_RIGHT).then()

              }}
              switchToPortrait={() => {
                this.setState({
                  width: wp(100),screenStyle: null
                })
                Screenorientation.lockAsync(
                    Screenorientation.OrientationLock.PORTRAIT_UP).then()
              }}
          />
        </View>

    )
  }

}

const styles = {
  playIconStyle: {
    width: 44,height: 44,alignSelf: 'center'
  },fullScreenStyle: {
    position: 'absolute',top: 0,left: 0
  }
}

export default VideoCard

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）