Saltar al contenido

Primeros pasos

GitHub

Puedes usar nuestro setup asistido por IA para instalar el plugin. Añade las skills de Capgo a tu herramienta de IA con el siguiente comando:

Ventana de terminal
bunx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Luego usa el siguiente prompt:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-screen-orientation` plugin in my project.

Si prefieres la configuración manual, instala el plugin ejecutando estos comandos y sigue las instrucciones de cada plataforma:

Ventana de terminal
bun add @capgo/capacitor-screen-orientation
bunx cap sync
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
const result = await ScreenOrientation.orientation();
console.log('Current orientation:', result.type);
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
});
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
await ScreenOrientation.unlock();
  • Listeners: elimina los handles cuando se desmonten las pantallas.
  • Sync nativo: ejecuta bunx cap sync tras actualizar los plugins.
  • Fuente de verdad: confianza src/definitions.ts en el repo de GitHub.

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

Devuelve la orientación actual de la pantalla del dispositivo.

import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
const result = await ScreenOrientation.orientation();
console.log('Current orientation:', result.type);

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

Bloquea la pantalla en la orientación especificada. En iOS, si bypassOrientationLock es true, también iniciará el seguimiento de la orientación física del dispositivo usando sensores de movimiento.

Nota: La UI seguirá respetando la configuración de bloqueo de orientación del usuario. El seguimiento de movimiento te permite detectar cómo se sostiene físicamente el dispositivo incluso cuando la UI no rota.

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
});

Desbloquea la orientación de la pantalla.

Permite que la pantalla rote libremente según la posición del dispositivo. También detiene cualquier seguimiento de orientación basado en movimiento si estaba habilitado.

import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
await ScreenOrientation.unlock();

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

Este método es útil cuando quieres rastrear la orientación física del dispositivo de forma independiente al bloqueo de orientación de la pantalla. Utiliza Core Motion en iOS para detectar cambios de orientación.

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);
});

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

Detiene el rastreo de orientación basado en movimiento si se había iniciado.

import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
await ScreenOrientation.stopOrientationTracking();

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

Este método compara la orientación física del dispositivo (según los sensores de movimiento) con la orientación de la interfaz. Si difieren, se activa el bloqueo de orientación.

Nota: Esto requiere que el rastreo de movimiento esté activo mediante startOrientationTracking() o lock() con bypassOrientationLock: true. Funciona tanto en iOS (Core Motion) como en Android (Acelerómetro).

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);
}

Resultado devuelto por el método orientation().

export interface ScreenOrientationResult {
/**
* The current orientation type.
*
* @since 1.0.0
*/
type: OrientationType;
}

Opciones para bloquear la orientación de la pantalla.

export interface OrientationLockOptions {
/**
* The orientation type to lock to.
*
* @since 1.0.0
*/
orientation: OrientationLockType;
/**
* Whether to track physical device orientation using motion sensors.
* When true, uses device motion sensors to detect the true physical
* orientation of the device, even when the device orientation lock is enabled.
*
* **Important:** This does NOT bypass the UI orientation lock.
* The screen will still respect the user's orientation lock setting.
* This option only affects orientation detection/tracking - you'll receive
* orientation change events based on how the device is physically held,
* but the UI will not rotate if orientation lock is enabled.
*
* Supported on iOS (Core Motion) and Android (Accelerometer).
*
* @default false
* @since 1.0.0
*/
bypassOrientationLock?: boolean;
}

Opciones para iniciar el seguimiento de orientación mediante sensores de movimiento.

export interface StartOrientationTrackingOptions {
/**
* Whether to track physical device orientation using motion sensors.
* When true, uses device motion sensors to detect the true physical
* orientation of the device, even when the device orientation lock is enabled.
*
* **Important:** This does NOT bypass the UI orientation lock.
* This only enables detection of the physical orientation.
*
* Supported on iOS (Core Motion) and Android (Accelerometer).
*
* @default false
* @since 1.0.0
*/
bypassOrientationLock?: boolean;
}

Resultado devuelto por el método isOrientationLocked().

export interface OrientationLockStatusResult {
/**
* Whether the device orientation lock is currently enabled.
*
* This is determined by comparing the physical device orientation
* (from motion sensors) with the UI orientation. If they differ,
* orientation lock is enabled.
*
* Available on iOS (Core Motion) and Android (Accelerometer) when motion tracking is active.
*
* @since 1.0.0
*/
locked: boolean;
/**
* The physical orientation of the device from motion sensors.
* Available when motion tracking is active (iOS and Android).
*
* @since 1.0.0
*/
physicalOrientation?: OrientationType;
/**
* The current UI orientation reported by the system.
*
* @since 1.0.0
*/
uiOrientation: OrientationType;
}

Tipo de orientación que describe el estado de orientación del dispositivo.

export type OrientationType = 'portrait-primary' | 'portrait-secondary' | 'landscape-primary' | 'landscape-secondary';

Tipo de bloqueo de orientación que se puede usar para bloquear la orientación del dispositivo.

export type OrientationLockType =
| 'any'
| 'natural'
| 'landscape'
| 'portrait'
| 'portrait-primary'
| 'portrait-secondary'
| 'landscape-primary'
| 'landscape-secondary';

Esta página se genera a partir del plugin src/definitions.ts. Vuelve a ejecutar el sync cuando el API público cambie en upstream.

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