React Native 视频 Android 方向

Question

我在 Android 横向模式下播放视频时遇到问题。在 iOS 上运行良好。

我使用“react-native-video”加载并播放视频。禁用控件和全屏。我添加了自己的按钮来切换全屏。下面是我的全屏按钮功能。基本上，它将使用“react-native-orientation-locker”将屏幕锁定为横向并调整视频的风格。在 Android 上，它确实会旋转，但视频不会以屏幕的全高度显示。看起来宽度和高度没有改变，只是从纵向旋转。视频的底部和左侧有一些黑色区域。有趣的是，当我尝试为视频设置“controls={true}”时。我发现视频播放器/控件在横向模式下以屏幕全宽显示，但视频仍然位于屏幕的一角！而且这种情况只发生在 Android 上。在 iOS 中运行良好。

环境：
- 反应本机 0.61.5
- 反应本机视频 5.0.2
- 反应本机方向锁定器 1.1.8
- React Native CLI（不是 Expo）
- 在 Android 模拟器 (9.0 Pie API 28) 和 Android 10.0 中的实际 Android 设备上进行测试

      onPressFullScreen(){
        if (this.state.isFullScreen == false){
          Orientation.lockToLandscape();
          this.setState({
            isFullScreen: true, 
            fullModeText: 'Exit Full Screen',
            cssContainerBgColor: 'black',
            cssVideoControlTop: 0,
            cssVideoMarginTop: 0,
            reizeMode: 'cover',
            cssVideoWidth: null,
            cssVideoHeight: '100%',
            cssVideoMarginLeft: 'auto',
            cssVideoMarginRight: 'auto',
          });
        } else {
          Orientation.unlockAllOrientations();
          this.setState({
            isFullScreen: false, 
            fullModeText: 'Full Screen',
            cssContainerBgColor: 'red',
            cssVideoControlTop: 50,
            cssVideoMarginTop: 50,
            reizeMode: 'cover',
            cssVideoWidth: '100%',
            cssVideoHeight: null,
            cssVideoMarginLeft: '0%',
            cssVideoMarginRight: '0%',
          });
        }
      }

Answer 1

对于任何未来的观众 这是我解决的方法

 import React from 'react'
import { View, Text , StyleSheet , Dimensions ,StatusBar } from 'react-native'
import Video from 'react-native-video';


const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;

const dummyVideoUrl2 =
  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4';

export default function VideoHorizontal() {

    return (
        <View style={{flex:1 ,backgroundColor : 'black'}}>
             <Video
          style= {{ ...styles.video , transform : [{rotate : '90deg'}] ,
          flex : 1,
           left : -screenWidth/2 ,
        width : screenHeight,
           backgroundColor : 'teal' }}
          source={{ uri: dummyVideoUrl2 }} //dummyVideoUrl3
          resizeMode={'contain'}
          repeat={true}
          onError={(e) => {
            console.log('video error' + e);
          }}
        />
        </View>
    )
}


// ===============================================
//               STYLESHEET
//================================================
const styles = StyleSheet.create({
    container: {
      width: '100%',
      height: screenHeight,
    },
    video: {
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
    
    },
})

使用调整大小模式“包含”并且不指定视频的任何高度 造型上90度变换 宽度 : screenHeight ( Dimensions.get('window').height )

此后，由于某种原因，视频右侧的一半超出了屏幕

因此我添加了

左：-屏幕宽度/2

这成功了 我知道这可能不是最好的解决方案，但它目前正在工作

Answer 2

只需为您的视频标签提供 width:'100%'

      <Video
      style={{width:'100%',height:400}}
       source={video}/>

Answer 3

检查图像以获取在反应本机视频播放器上自动旋转的解决方案