Wie deaktiviere ich die Rotation in React Native?

Ich möchte nur die Porträtansicht unterstützen. Wie kann ich eine React Native-App so einstellen, dass sie nicht automatisch gedreht wird? Ich habe versucht, nach Dokumentationen und Github-Problemen zu suchen, fand aber nichts hilfreiches.

Die React Native-App ist so ziemlich nur eine normale iOS-Anwendung. Sie können sie also genauso ausführen wie für alle anderen Apps. Deaktivieren Sie einfach (in XCode) die Option "Querformat links" und "Querformat rechts" als zulässige Geräteorientierungen in den allgemeinen Anwendungseigenschaften:

Für iOS ist Jareks Antwort großartig.

Für Android müssen Sie die Datei AndroidManifest.xml bearbeiten. Fügen Sie jeder Aktivität, die Sie im Hochformat sperren möchten, die folgende Zeile hinzu:

android:screenOrientation="portrait" 

Ein vollständiges Beispiel könnte also so aussehen:

      <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>

Die vollständige Liste der verfügbaren screenOrientation-Eigenschaften finden Sie in den Dokumenten hier: https://developer.android.com/guide/topics/manifest/activity-element.html

Update 2017: {"orientation": "portrait"}

Derzeit empfehlen viele offizielle React Native-Handbücher wie dieses die Verwendung von Expo beim Erstellen von React Native-Apps. Daher werde ich zusätzlich zu den vorhandenen Antworten auch eine Expo-spezifische Lösung hinzufügen, die erwähnenswert ist, da sie sowohl für iOS als auch für Android funktioniert und nur erforderlich ist Stellen Sie es einmal ein, ohne sich mit der XCode-Konfiguration, AndroidManifest.xml usw. herumschlagen zu müssen.

Festlegen der Ausrichtung zur Erstellungszeit:

Wenn Sie Ihre React Native-Apps mit Expo erstellen, können Sie das orientationFeld in Ihrer app.jsonDatei verwenden - zum Beispiel:

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

Es kann auf oder eingestellt werden "portrait", was bedeutet, dass ohne Orientierungssperre automatisch gedreht wird."landscape""default"

Orientierung zur Laufzeit einstellen:

Sie können diese Einstellung auch zur Laufzeit überschreiben, indem Sie beispielsweise Folgendes ausführen:

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

wo das Argument sein kann:

• ALL - Alle 4 möglichen Ausrichtungen
• ALL_BUT_UPSIDE_DOWN - Alle außer dem umgekehrten Porträt können alle 4 Ausrichtungen auf bestimmten Android-Geräten sein.
• PORTRAIT - Hochformat, kann auf bestimmten Android-Geräten auch ein umgekehrtes Hochformat sein.
• PORTRAIT_UP - Nur Porträt oben.
• PORTRAIT_DOWN - Nur verkehrtes Porträt.
• LANDSCAPE - Beliebige Landschaftsorientierung.
• LANDSCAPE_LEFT - Nur linke Landschaft.
• LANDSCAPE_RIGHT - Nur rechte Landschaft.

Erkennen der Rotation:

Wenn Sie mehr als eine Ausrichtung zulassen, können Sie die Änderungen erkennen, indem Sie die changeEreignisse auf dem DimensionsObjekt abhören:

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

oder Sie können die Abmessungen auch jederzeit mit Dimensions.get('window')und Dimensions.get('screen')wie folgt abrufen :

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

oder:

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

Wenn Sie sich das Ereignis anhören, erhalten Sie beide windowund screengleichzeitig. Deshalb greifen Sie anders darauf zu.

Dokumentation:

Weitere Informationen finden Sie unter:

• 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 :

Gehen Sie zur Datei Androidmenifest.xml und fügen Sie eine Zeile hinzu: android: screenOrientation = "Porträt"

         <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 :

Ganz einfach müssen Sie den Rotationsmodus Ihres XCODE aktivieren oder deaktivieren

Wenn Sie Expo verwenden, können Sie dies einfach mit diesem Code tun:

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

Stellen Sie es vor dem Rendern auf App.js

Alle Optionen:

ALL ALL_BUT_UPSIDE_DOWN PORTRAIT PORTRAIT_UP PORTRAIT_DOWN LANDSCAPE LANDSCAPE_LEFT LANDSCAPE_RIGHT

Für Android müssen Sie die Datei AndroidManifest.xml bearbeiten. Fügen Sie jeder Aktivität, die Sie im Hochformat sperren möchten, die folgende Zeile hinzu:

android: screenOrientation = "Porträt"

Ein vollständiges Beispiel könnte also so aussehen:

 <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>

Für Android: In Ihre Manifestdatei einfügen:

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

Dann setzen Sie in das Anwendungs-Tag:

tools:ignore="LockedOrientationActivity"

Und dann in allen Aktivitäten:

android:screenOrientation="portrait"

Verwenden Sie dies für ios ipad orientaion Problem möchten in plist Datei ändern 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>

Sie können das React-Native-Orientation-Locker- Modul und die lockToPortrait()Funktion verwenden.
Dies kann hilfreich sein, wenn Sie auch einige Bildschirme mit entsperrter Ausrichtung haben möchten - in diesem Fall können Sie auch die unlockAllOrientations()Funktion verwenden.

Wenn Sie das RN Expo-Projekt verwenden und die App eine Reaktionsnavigation enthält, hat mir das Einrichten der Navigation auf den folgenden Code geholfen.

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