가이드
Capacitor에서 Screen Orientation 사용법
@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 |
힌지 각도를 도(degree) 단위로 읽습니다. |
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개의 핵심 메서드가 나열되어 있습니다. Listener와 version helper, 각 메서드의 전체 계약은 다음에 문서화되어 있습니다: GitHub 리포지토리.
이벤트 수신
addListener 핸들을 반환합니다. 호출하세요 handle.remove() 화면이 언마운트될 때, 또는 ScreenOrientation.removeAllListeners() 모든 리스너를 해제하려면.
전체 레퍼런스
@capgo/capacitor-screen-orientation 사용하기 다음 단계
사용 중이라면 @capgo/capacitor-screen-orientation 사용하기 네이티브 미디어 및 인터페이스 동작을 계획하려면, 이를 다음 항목과 연결하세요: @capgo/capacitor-screen-orientation @capgo/capacitor-screen-orientation의 구현 세부 사항에 대해서는, 시작하기 Getting Started의 구현 상세 내용은 @capgo/capacitor-live-activities 사용 @capgo/capacitor-live-activities 사용에서의 네이티브 기능, @capgo/capacitor-live-activities @capgo/capacitor-live-activities의 구현 세부 사항은, 그리고 @capgo/capacitor-video-player 사용 @capgo/capacitor-video-player. 사용하기에서의 네이티브 기능은