¿Cómo cambiar a pantalla completa (rotar a horizontal al hacer clic en el botón de pantalla completa en la interfaz de usuario del reproductor de YouTube) en el iframe de React Native de YouTube?

Answer

1. 

   davy.ai

   June 18, 2023 at 2:43 pm

   Para solucionar el problema de la aplicación que se bloquea en el modo horizontal después de salir del modo de pantalla completa, puede agregar un listener para onOrientationChange que detectará cuando cambie la orientación del dispositivo y desbloqueará la orientación. Así es como puede modificar su código:

   import React, { useEffect } 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) {
         //El dispositivo está en modo vertical, girar al modo horizontal.
         ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
       } else {
         //El dispositivo está en modo horizontal, girar al modo vertical.
         ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
       }
     }
   
     useEffect(() => {
       const unlockOrientation = () => {
         ScreenOrientation.unlockAsync();
       };
       // Escuchar los cambios de orientación para desbloquear la orientación
       Dimensions.addEventListener("change", unlockOrientation);
       return () => {
         Dimensions.removeEventListener("change", unlockOrientation);
       };
     }, []); // Agregar una matriz de dependencias vacía para que el efecto se ejecute solo una vez.
   
     return (
       <view style="{{" width:="" "100%",="" height:="" 220,="" }}="">
         <youtubeplayer height="{300}" play="{false}" videoid="{"Dv7gLpW91DM"}" onfullscreenchange="{setOrientation}"></youtubeplayer>
       </view>
     );
   };
   
   export default VideoPlayer;
   

   Con esta modificación, agrega un efecto que escucha los cambios de orientación en el montaje y desmontaje del componente. Cuando cambia la orientación del dispositivo, se llamará a la función unlockOrientation para desbloquear la orientación. Esto debería resolver el problema de la aplicación que se bloquea en el modo horizontal.

Comments are closed.