Expo.ioでの回転(Orientation)の扱いについて

Expo.ioでの回転系処理

Expo.ioでの回転の扱いは下記docを参考にすると良いです

インストール

expo install expo-screen-orientation

使い方

インポートする

import * as ScreenOrientation from 'expo-screen-orientation';

回転のロック

画面の向きをロックしたければ、 ScreenOrientation.lockAsync を使えば良いです。

async function lockScreenOrientation() {
  await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
}
lockScreenOrientation();

Function Componentなのであれば、useEffect 内に書いておけばOK

ただし、画面が遷移されてもロックされてしまうので、ロックされるのが好ましくない画面では、unlockする処理を書いておく必要があります。
ScreenOrientation.unlockAsync でOKです。

async function unlockOrientation() {
  await ScreenOrientation.unlockAsync();
}
unlockOrientation();

イベントリスナ

回転されたときになにがしかのイベントを発火させたい場合は addOrientationChangeListener を利用すればいいです。

const onChangeOrientation = (event: ScreenOrientation.OrientationChangeEvent) => {
  // 回転されたときの処理
}
ScreenOrientation.addOrientationChangeListener(onChangeOrientation);

ちなみに event: ScreenOrientation.OrientationChangeEvent の中身は

Object {
  "orientationInfo": Object {
    "horizontalSizeClass": 1,
    "orientation": 1,
    "verticalSizeClass": 2,
  },
  "orientationLock": 3,
}

とかです。

ただし、verticalSizeClass と horizontalSizeClass はiOS Onlyです。

orientationInfo.orientation は 1なら縦(Orientation.PORTRAIT)。3は右に回転させた状態(Orientation.LANDSCAPE_LEFT)、4は左回転(Orientation.LANDSCAPE_RIGHT)です。

export declare enum Orientation {
    UNKNOWN = 0,
    PORTRAIT_UP = 1,
    PORTRAIT_DOWN = 2,
    LANDSCAPE_LEFT = 3,
    LANDSCAPE_RIGHT = 4
}

orientationLock も同様に下記のように定義されています。

export declare enum OrientationLock {
    DEFAULT = 0,
    ALL = 1,
    PORTRAIT = 2,
    PORTRAIT_UP = 3,
    PORTRAIT_DOWN = 4,
    LANDSCAPE = 5,
    LANDSCAPE_LEFT = 6,
    LANDSCAPE_RIGHT = 7,
    OTHER = 8,
    UNKNOWN = 9
}

verticalSizeClass と horizontalSizeClass は SizeClassIOSとして下記の定義です

export declare enum SizeClassIOS {
    REGULAR = 0,
    COMPACT = 1,
    UNKNOWN = 2
}

ちなみにサイズクラスについては下記記事が参考になります。

よきExpoライフを。