React Nativeで回転を無効にする方法は？

ポートレート表示のみをサポートしたい。React Nativeアプリが自動回転しないようにするにはどうすればよいですか？ドキュメントとGithubの問題を検索してみましたが、役立つ情報はありませんでした。

React Nativeアプリは、ほとんどの場合、通常のiOSアプリケーションなので、他のすべてのアプリの場合とまったく同じ方法で実行できます。一般的なアプリケーションプロパティで許可されているデバイスの向きとして、「Xcodeで」「Landscape Left」と「Landscape Right」をオフにします。

iOSにとって、Jarekの答えはすばらしい。

Androidの場合、AndroidManifest.xmlファイルを編集する必要があります。ポートレートモードにロックする各アクティビティに次の行を追加します。

android:screenOrientation="portrait" 

したがって、完全な例は次のようになります。

      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize"
        android:screenOrientation="portrait">

        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>

こちらのドキュメントで、利用可能なscreenOrientationプロパティの完全なリストを参照してください：https ://developer.android.com/guide/topics/manifest/activity-element.html

2017年の更新： {"orientation": "portrait"}

現在、このような多くの公式React Nativeガイド React Nativeアプリを構築する際にExpoを使用することを推奨しているため、既存の回答に加えて、iOSとAndroidの両方で機能するため、注目に値するExpo固有のソリューションも追加します。 XCode config、AndroidManifest.xmlなどをいじる必要なく、一度設定してください。

ビルド時の向きの設定：

Expoを使用してReact Nativeアプリを構築している場合orientationは、app.jsonファイル内のフィールドを使用できます。次に例を示します。

{
  "expo": {
    "name": "My app",
    "slug": "my-app",
    "sdkVersion": "21.0.0",
    "privacy": "public",
    "orientation": "portrait"
  }
}

それは次のように設定することができ"portrait"、"landscape"または"default"その手段が無いオリエンテーションロックと自動回転します。

実行時の向きの設定：

次のように実行することで、実行時にその設定を上書きすることもできます。

Expo.ScreenOrientation.allow(Expo.ScreenOrientation.Orientation.LANDSCAPE);

引数は次のいずれかです。

• ALL — 4つの可能な方向すべて
• ALL_BUT_UPSIDE_DOWN —逆向きのポートレートを除くすべてが、特定のAndroidデバイスでは4方向すべてになる可能性があります。
• PORTRAIT —縦向き、特定のAndroidデバイスでは逆向きの縦向きになることもあります。
• PORTRAIT_UP —縦向きのみ。
• PORTRAIT_DOWN —逆さまの縦向きのみ。
• LANDSCAPE —横向き。
• LANDSCAPE_LEFT —左の風景のみ。
• LANDSCAPE_RIGHT —正しい風景のみ。

回転の検出：

複数の方向を許可するchangeと、Dimensionsオブジェクトのイベントをリッスンして変更を検出できます。

Dimensions.addEventListener('change', (dimensions) => {
  // you get:
  //  dimensions.window.width
  //  dimensions.window.height
  //  dimensions.screen.width
  //  dimensions.screen.height
});

またはDimensions.get('window')、次のDimensions.get('screen')ようにいつでもディメンションを取得することもできます。

const dim = Dimensions.get('window');
// you get:
//  dim.width
//  dim.height

または：

const dim = Dimensions.get('screen');
// you get:
//  dim.width
//  dim.height

あなたがイベントに耳を傾けるとき、あなたは両方を取得windowし、screenあなたは違っそれにアクセスする理由だように、同時に。

ドキュメンテーション：

詳細については、以下を参照してください。

• https://docs.expo.io/versions/latest/guides/configuration.html#orientation
• https://docs.expo.io/versions/latest/sdk/screen-orientation.html
• https://facebook.github.io/react-native/docs/dimensions.html

Answer for disable rotation in React Native.

For Android :

Androidmenifest.xmlファイルに移動し、1行を追加します。android：screenOrientation = "portrait"

         <activity
            android:name=".MainActivity"

            android:screenOrientation="portrait"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize">

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
          </activity>

For IOS :

XCODEから回転モードをオンまたはオフにする必要があるのは簡単

Expoを使用している場合は、次のコードで簡単に実行できます。

Expo.ScreenOrientation.allow(Expo.ScreenOrientation.Orientation.PORTRAIT);

レンダリングする前にApp.jsに配置します

すべてのオプション：

ALL ALL_BUT_UPSIDE_DOWN PORTRAIT PORTRAIT_UP PORTRAIT_DOWN LANDSCAPE LANDSCAPE_LEFT LANDSCAPE_RIGHT

Androidの場合、AndroidManifest.xmlファイルを編集する必要があります。ポートレートモードにロックする各アクティビティに次の行を追加します。

android：screenOrientation = "portrait"

したがって、完全な例は次のようになります。

 <application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
  android:theme="@style/AppTheme">

  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize"
    android:screenOrientation="portrait">

    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>

  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

Androidの場合：マニフェストファイルに以下を入力します。

xmlns:tools="http://schemas.android.com/tools"

次に、アプリケーションタグ内に次のように記述します。

tools:ignore="LockedOrientationActivity"

そして、すべての活動セットで：

android:screenOrientation="portrait"

これをios ipad orientaionの問題に使用するplistファイルで変更したいhttps://www.reddit.com/r/reactnative/comments/7vkrfp/disabling_screen_rotate_in_react_native_both/

iOS：

<key>UISupportedInterfaceOrientations</key> <array> <string>UIInterfaceOrientationPortrait</string> <string>UIInterfaceOrientationPortraitUpsideDown</string> </array>

react-native-orientation-lockerモジュールとlockToPortrait()関数を使用できます。
これは、一部の画面の向きをロック解除したい場合にも役立ちます。この場合、unlockAllOrientations()関数を使用することもできます。

RN expoプロジェクトを使用していて、アプリにreact-navigationが含まれている場合、次のコードへのナビゲーションを設定すると役立ちました。

const AppNavigator = createStackNavigator(
{
    Page1: { screen: Page1}
},
{
    portraitOnlyMode: true
});