使用 @capgo/capacitor-screen-orientation
Capacitor Screen Orientation 插件界面。
安装
bun add @capgo/capacitor-screen-orientation
bunx cap sync
bunx cap sync 将插件的原生 code 复制到你的原生项目中。每次升级插件后都要重新运行。
导入
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
API 概览
| 方法 | 描述 |
|---|---|
orientation |
获取当前屏幕方向。 |
lock |
将屏幕方向锁定为指定类型。 |
unlock |
解除屏幕方向锁定。 |
startOrientationTracking |
开始使用运动传感器追踪设备方向。 |
stopOrientationTracking |
停止使用运动传感器追踪设备方向。 |
isOrientationLocked |
检查当前是否启用了设备方向锁定。 |
isDeviceFoldable |
监听屏幕方向变化。 |
getFoldState |
读取当前的折叠状态。 |
getHingeAngle |
读取以度为单位的铰链角度。 |
getReservedRegions |
读取折叠状态及屏幕遮挡物。 |
getBarPlacement |
读取 iPhone Duo 原生标签栏和工具栏的位置。 |
setVerticalBarBehavior |
选择 iPhone Duo 是否可以将此应用的栏移至侧边。 |
getSizeClass |
读取窗口尺寸类别。 |
示例
orientation()
获取当前屏幕方向。
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
const result = await ScreenOrientation.orientation();
console.log('Current orientation:', result.type);
lock()
将屏幕方向锁定为指定类型。
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()
解除屏幕方向锁定。
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
await ScreenOrientation.unlock();
startOrientationTracking()
开始使用运动传感器追踪设备方向。
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()
停止使用运动传感器追踪设备方向。
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
await ScreenOrientation.stopOrientationTracking();
isOrientationLocked()
检查当前是否启用了设备方向锁定。
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);
}
上表列出了 13 个核心方法。监听器、版本辅助函数以及每个方法的完整约定，请参阅 GitHub 仓库.
监听事件
addListener 会返回一个句柄。调用 handle.remove() 在屏幕卸载时，或者调用 ScreenOrientation.removeAllListeners() 以清除所有监听器。
完整参考文档
从“使用 @capgo/capacitor-screen-orientation”继续
如果你正在使用 使用 @capgo/capacitor-screen-orientation 来规划原生媒体和界面行为，并将其与 @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.”中的原生能力