如何在 React Native youtube iframe 中切换到全屏（单击 YouTube 播放器 gui 上的全屏按钮旋转到横向）？

Posted 2023-02-24

【中文标题】如何在 React Native youtube iframe 中切换到全屏（单击 YouTube 播放器 gui 上的全屏按钮旋转到横向）？

【英文标题】：How to switch to full screen(rotate to landscape on click of full-screen button on YouTube player gui) in React Native youtube iframe?

【发布时间】：2022-01-08 18:02:01

【问题描述】：

我想通过单击播放器 gui 上的全屏按钮将播放器切换到横向模式。我正在使用博览会，所以我使用博览会方向，我可以通过调用 onfullscreenchange 道具上的函数切换到横向模式，但是在退出全屏模式后，应用程序被锁定在横向模式。我该如何解决？

我的代码：

VideoPlayer.js

    import React from "react";
    import  View, Dimensions  from "react-native";
    import YoutubePlayer from "react-native-youtube-iframe";
    
    import * as ScreenOrientation from "expo-screen-orientation";
    
    const VideoPlayer = () => 
      function setOrientation() 
        if (Dimensions.get("window").height > Dimensions.get("window").width) 
          //Device is in portrait mode, rotate to landscape mode.
          ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
         else 
          //Device is in landscape mode, rotate to portrait mode.
          ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
        
      
    
      return (
        <View
          style=
            width: "100%",
            height: 220,
          
        >
          <YoutubePlayer
            height=300
            play=false
            videoId="Dv7gLpW91DM"
            onFullScreenChange=setOrientation
          />
        </View>
      );
    ;
    
    export default VideoPlayer;

【参考方案1】：

您可以使用从 onFullScreenChange 返回的布尔值来确定播放器是否处于全屏状态，然后从那里设置正确的方向，我现在无法测试，但应该是这样的

onFullScreenChange=isFullscreen =>  
    if(isFullscreen)  setOrientationToPortrait()  
    else  setOrientationToLandscape() 

【讨论】：

是的，谢谢你的帮助