본문으로 건너뛰기
@capgo/capacitor-스크린 방향성 기업 플러그인 오픈 소스

모바일 화면 방향 Capacitor 플러그인

화면 방향 플러그인으로 방향 잠금을 우회하는 지원

설치

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

Guide

How to use Screen Orientation in Capacitor

__CAPGO_KEEP_0__에서 화면 방향을 사용하는 방법

다운로드하여 Capgo 앱을 설치한 다음 QR code 코드를 스캔하세요.

스크린 오리엔테이션 플러그인 미리보기 QR code

@capgo/capacitor-스크린-오리엔테이션을 사용합니다

Capacitor 모바일 화면 방향 플러그인 인터페이스.

Install

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

bunx cap sync 플러그인의 네이티브 code을 프로젝트에 복사합니다. 플러그인 업그레이드 후 다시 실행하세요.

Import

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

API 한눈에

Method 설명
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개의 핵심 메서드가 나열되어 있습니다. 리스너 및 버전 헬퍼, 각 메서드의 전체 계약은 __CAPGO_KEEP_0__ 저장소에서 문서화되어 있습니다. GitHub 저장소.

예시

addListener handle을 반환합니다. Call handle.remove() 화면이 해제될 때 또는 ScreenOrientation.removeAllListeners() 모든 리스너를 지우려면.

전체 참조

@capgo/capacitor-스크린 방향

Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-screen-orientation에서 계속 Using @capgo/capacitor-screen-orientation Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-screen-orientation @capgo/capacitor-스크린 방향성 Capacitor-capgo-capacitor-__CAPGO_KEEP_2__ 시작하기 Capacitor-__CAPGO_KEEP_0__-__CAPGO_KEEP_1__-__CAPGO_KEEP_2__ Capacitor-capgo-capacitor-__CAPGO_KEEP_2__ Capacitor-capgo-capacitor-__CAPGO_KEEP_2__ Capacitor-capgo-capacitor-__CAPGO_KEEP_2__ Capacitor-capgo-capacitor-__CAPGO_KEEP_2__ Capacitor-capgo-capacitor-__CAPGO_KEEP_2__ Capacitor-capgo-capacitor-__CAPGO_KEEP_2__

FAQ

__CAPGO_KEEP_0__ 스크린 오리엔테이션 플러그인 FAQ

Capacitor 앱에 스크린 오리엔테이션 플러그인을 설치하는 방법은?

Run "bun add @capgo/capacitor-screen-orientation" (또는 "npm install @capgo/capacitor-screen-orientation")를 실행하고, iOS와 Android 프로젝트가 네이티브 code를 인식하도록 "bunx cap sync"를 실행하세요. 그런 다음 앱 code에서 "@capgo/capacitor-screen-orientation"을 임포트하세요.

@capgo/capacitor-screen-orientation은 React, Vue 및 Angular와 함께 작동합니까?

네. Screen Orientation은 Capacitor 패키지이므로 Capacitor 내에서 실행되는 모든 웹 프레임워크와 함께 작동합니다. 이에는 Ionic, React, Vue, Angular, Svelte 및 단순한 JavaScript가 포함됩니다.

Capacitor 버전은 @capgo/capacitor-screen-orientation이 지원하는지 궁금하십니까?

Capgo plugins follow Capacitor's major version: use the plugin major version that matches your Capacitor major version (for example plugin v8 with Capacitor 8). The compatibility table in the GitHub README lists the maintained versions.

@capgo/capacitor-screen-orientation은 무료이고 오픈 소스인가요?

Yes. The source code is public on GitHub at https://github.com/Cap-go/capacitor-screen-orientation/ and the package is free to install from npm. Bug reports and pull requests are welcome.

code를 사용하는 Screen Orientation을 업데이트할 수 있나요?

code를 설치하거나 업그레이드하면 네이티브 code이 변경되므로 새로운 스토어 빌드를 필요로 합니다. 그 후에 JavaScript, HTML 및 CSS 변경 사항이 플러그인을 호출하는 경우 Capgo Live Update를 통해 즉시 배포할 수 있습니다.

화면 방향 변경을 앱 리뷰 기다리지 않고 배포합니다.

플러그인이 스토어 빌드에 포함된 후, Capgo 라이브 업데이트 사용자에게 몇 분 내에 자바스크립트, HTML 및 CSS 변경 사항을 푸시합니다.

시작하기 Capgo