Getting Started
复制一个包含安装步骤和本插件的完整 Markdown 指南的设置提示。
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-screen-orientation`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/screen-orientation/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
安装
安装步骤您可以使用我们的AI辅助设置来安装插件。使用以下命令将Capgo技能添加到您的AI工具中:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins然后使用以下提示:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-screen-orientation` plugin in my project.如果您更喜欢手动设置,请运行以下命令并按照以下平台特定的说明进行操作:
bun add @capgo/capacitor-screen-orientationbunx cap syncimport { ScreenOrientation } from '@capgo/capacitor-screen-orientation';API概述
API概述orientation
屏幕方向获取当前屏幕方向
获取设备屏幕当前方向
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
const result = await ScreenOrientation.orientation();console.log('Current orientation:', result.type);lock
锁定屏幕方向锁定屏幕方向到指定类型。
锁定屏幕到指定方向。 在iOS中,如果bypassOrientationLock为真,它也会使用运动传感器开始 跟踪物理设备方向。
注意:UI仍然会尊重用户的方向锁定设置。 运动跟踪允许您检测设备如何物理上被握持 即使UI不旋转。
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
// Standard lockawait ScreenOrientation.lock({ orientation: 'landscape' });
// Lock with motion tracking on iOSawait ScreenOrientation.lock({ orientation: 'portrait', bypassOrientationLock: true});unlock
解锁屏幕方向解锁屏幕方向
根据设备位置自由旋转屏幕。 此外,如果之前已启用,则停止任何基于运动的方向跟踪。
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
await ScreenOrientation.unlock();startOrientationTracking
开始跟踪设备方向此方法在您想要独立于屏幕方向锁定跟踪设备物理方向时非常有用。 它使用 Core Motion 在 iOS 中检测方向变化。
复制到剪贴板
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
await ScreenOrientation.startOrientationTracking({ bypassOrientationLock: true});
// Listen for changesScreenOrientation.addListener('screenOrientationChange', (result) => { console.log('Orientation changed:', result.type);});stopOrientationTracking
停止运动方向跟踪复制到剪贴板
检查设备方向锁定是否已启用
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
await ScreenOrientation.stopOrientationTracking();isOrientationLocked
__CAPGO_KEEP_0____CAPGO_KEEP_0__
此方法将物理设备的方向(通过运动传感器)与UI的方向进行比较。如果两者不一致,则屏幕方向锁定。
注意:此功能需要通过startOrientationTracking()或lock()(bypassOrientationLock:true)激活运动跟踪。适用于iOS(Core Motion)和Android(Accelerometer)。
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
// Start motion tracking firstawait ScreenOrientation.startOrientationTracking({ bypassOrientationLock: true});
// Check lock statusconst status = await ScreenOrientation.isOrientationLocked();if (status.locked) { console.log('Orientation lock is ON'); console.log('Physical:', status.physicalOrientation); console.log('UI:', status.uiOrientation);}类型参考
类型参考ScreenOrientationResult
屏幕方向结果复制到剪贴板
export interface ScreenOrientationResult { /** * The current orientation type. * * @since 1.0.0 */ type: OrientationType;}OrientationLockOptions
复制到剪贴板开始屏幕方向跟踪选项
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;}StartOrientationTrackingOptions
屏幕方向结果开始使用运动传感器跟踪方向的选项。
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;}OrientationLockStatusResult
标题:"方向锁定状态结果"方法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;}OrientationType
标题:"方向类型"描述设备方向状态的方向类型。
export type OrientationType = 'portrait-primary' | 'portrait-secondary' | 'landscape-primary' | 'landscape-secondary';OrientationLockType
标题:"方向锁定类型"用于锁定设备方向的方向锁定类型。
export type OrientationLockType = | 'any' | 'natural' | 'landscape' | 'portrait' | 'portrait-primary' | 'portrait-secondary' | 'landscape-primary' | 'landscape-secondary';真实来源
源代码标题该页面由插件生成 src/definitions.ts当公共API上游更改时,请重新运行同步
继续从Getting Started
继续从Getting Started如果您正在使用 Getting Started 来规划原生媒体和界面行为,连接它到 使用@capgo/capacitor-screen-orientation 为原生能力在使用@capgo/capacitor-screen-orientation中 使用@capgo/capacitor-live-activities 为原生能力在使用@capgo/capacitor-live-activities中 @capgo/capacitor-live-activities 了解 @capgo/capacitor-live-activities 的实现细节 使用 @capgo/capacitor-video-player 了解使用 @capgo/capacitor-video-player 的原生能力 @capgo/capacitor-video-player 了解 @capgo/capacitor-video-player 的实现细节