Saltar al contenido principal
@capgo/capacitor-screen-orientation API de dispositivos Código abierto

Orientación de pantalla plugin Capacitor

Plugin de Screen Orientation con soporte para omitir el bloqueo de orientación

Instalar

bun add @capgo/capacitor-screen-orientation bunx cap sync
npm, pnpm o yarn
  • npm install @capgo/capacitor-screen-orientation
  • pnpm add @capgo/capacitor-screen-orientation
  • yarn add @capgo/capacitor-screen-orientation

Guía

Cómo usar Screen Orientation en Capacitor

Probar en el dispositivo

Descarga la app Capgo y escanea el QR code.

QR de previsualización del plugin Screen Orientation code

Uso de @capgo/capacitor-screen-orientation

Interfaz del plugin Capacitor Screen Orientation.

Instalar

bun add @capgo/capacitor-screen-orientation
bunx cap sync

bunx cap sync copia el code nativo del plugin en tus proyectos nativos. Ejecútalo de nuevo tras cada actualización del plugin.

Importar

import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';

API de un vistazo

Método Descripción
orientation Obtén la orientación actual de la pantalla.
lock Bloquea la orientación de la pantalla a un tipo específico.
unlock Desbloquea la orientación de la pantalla.
startOrientationTracking Empieza a rastrear la orientación del dispositivo con los sensores de movimiento.
stopOrientationTracking Deja de rastrear la orientación del dispositivo mediante sensores de movimiento.
isOrientationLocked Comprueba si el bloqueo de orientación del dispositivo está activado actualmente.
isDeviceFoldable Escucha los cambios de orientación de la pantalla.
getFoldState Consulta el pliegue actual.
getHingeAngle Consulta el ángulo de la bisagra en grados.
getReservedRegions Consulta el pliegue y cualquier cosa que cubra la pantalla.
getBarPlacement Consulta dónde coloca iPhone Duo las tab bars y toolbars nativas.
setVerticalBarBehavior Elige si iPhone Duo puede mover las barras de esta app al lateral.
getSizeClass Lee las clases de tamaño de ventana.

Ejemplos

orientation()

Obtén la orientación actual de la pantalla.

import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';

const result = await ScreenOrientation.orientation();
console.log('Current orientation:', result.type);

lock()

Bloquea la orientación de la pantalla a un tipo específico.

import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';

// Standard lock
await ScreenOrientation.lock({ orientation: 'landscape' });

// Lock with motion tracking on iOS
await ScreenOrientation.lock({
  orientation: 'portrait',
  bypassOrientationLock: true
});

unlock()

Desbloquea la orientación de la pantalla.

import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';

await ScreenOrientation.unlock();

startOrientationTracking()

Empieza a rastrear la orientación del dispositivo con los sensores de movimiento.

import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';

await ScreenOrientation.startOrientationTracking({
  bypassOrientationLock: true
});

// Listen for changes
ScreenOrientation.addListener('screenOrientationChange', (result) => {
  console.log('Orientation changed:', result.type);
});

stopOrientationTracking()

Deja de rastrear la orientación del dispositivo mediante sensores de movimiento.

import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';

await ScreenOrientation.stopOrientationTracking();

isOrientationLocked()

Comprueba si el bloqueo de orientación del dispositivo está activado actualmente.

import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';

// Start motion tracking first
await ScreenOrientation.startOrientationTracking({
  bypassOrientationLock: true
});

// Check lock status
const status = await ScreenOrientation.isOrientationLocked();
if (status.locked) {
  console.log('Orientation lock is ON');
  console.log('Physical:', status.physicalOrientation);
  console.log('UI:', status.uiOrientation);
}

La tabla anterior enumera los 13 métodos principales. Los helpers de versión y listener, así como el contrato completo de cada método, están documentados en la repositorio GitHub.

Escuchar eventos

addListener devuelve un handle. Llama handle.remove() cuando la pantalla se desmonte, o ScreenOrientation.removeAllListeners() para limpiar todos los listeners.

Referencia completa

Continuar desde el uso de @capgo/capacitor-screen-orientation

Si estás usando Uso de @capgo/capacitor-screen-orientation para planificar el comportamiento de los medios nativos y la interfaz, conéctalo con @capgo/capacitor-screen-orientation para el detalle de implementación en @capgo/capacitor-screen-orientation, Primeros pasos para los detalles de implementación en Primeros pasos, Uso de @capgo/capacitor-live-activities para la capacidad nativa en Uso de @capgo/capacitor-live-activities, @capgo/capacitor-live-activities para el detalle de implementación en @capgo/capacitor-live-activities, y Uso de @capgo/capacitor-video-player para la capacidad nativa en Uso de @capgo/capacitor-video-player.

FAQ

FAQ del plugin Screen Orientation

¿Cómo instalo el plugin Screen Orientation en una app Capacitor?

Ejecuta "bun add @capgo/capacitor-screen-orientation" (o "npm install @capgo/capacitor-screen-orientation") y luego "bunx cap sync" para que los proyectos de iOS y Android reconozcan el code nativo. Impórtalo desde "@capgo/capacitor-screen-orientation" en el code de tu app.

¿Es compatible @capgo/capacitor-screen-orientation con React, Vue y Angular?

Sí. Screen Orientation es un paquete de Capacitor, por lo que funciona con cualquier framework web que se ejecute dentro de Capacitor, incluyendo Ionic, React, Vue, Angular, Svelte y JavaScript puro.

¿Qué versión de Capacitor es compatible con @capgo/capacitor-screen-orientation?

Los plugins de Capgo siguen la versión mayor de Capacitor: usa la versión mayor del plugin que coincida con la versión mayor de tu Capacitor (por ejemplo, el plugin v8 con Capacitor 8). La tabla de compatibilidad del README de GitHub lista las versiones mantenidas.

¿Es @capgo/capacitor-screen-orientation gratuito y de código abierto?

Sí. El código fuente de code es público en GitHub en https://github.com/Cap-go/capacitor-screen-orientation/ y el paquete se puede instalar gratis desde npm. Los reportes de bugs y pull requests son bienvenidos.

¿Puedo actualizar code que usa Screen Orientation sin pasar por la revisión de la App Store?

Instalar o actualizar el plugin cambia el code nativo, así que requiere un nuevo build para la tienda. Después, los cambios de JavaScript, HTML y CSS que llamen al plugin se pueden publicar al instante con las live updates de Capgo.

Lanza cambios de Screen Orientation sin esperar la revisión de la app

Una vez que el plugin esté en tu store build, Capgo live updates envía tus cambios de JavaScript, HTML y CSS a los usuarios en minutos.

Empieza con Capgo