Wie deaktiviere ich die Rotation in React Native?

104

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.

syg
quelle
Können Sie die unterstützten Ausrichtungen nicht einfach in den Anwendungseigenschaften festlegen (wie bei jeder anderen iOS-App)?
Thilo
8
Was ist mit Android?
Ooolala
2
@ooolala Antwort in dieser SO Antwort stackoverflow.com/questions/34078354/…
MonkeyBonkey
HINWEIS: Auf meinem MOTO 4 konnte ich nicht richtig sensorPortraitarbeiten. Es würde niemals ein verkehrtes Porträt (dh reversePortrait) unterstützen. Die Verwendung hat fullSensorzwar funktioniert, hatte aber den Vorbehalt, auch Landschaft zuzulassen. Das war für mich in Ordnung, aber wenn Sie nur wollen portraitund können reversePortrait, können Sie die Orientierungsänderung in Ihrer Aktivität mit onConfigurationChangedund abfangen newConfig.orientationund Landschaftsänderungen einfach ignorieren oder überschreiben.
Joshua Pinter

Antworten:

133

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:

Geräteorientierung

Jarek Potiuk
quelle
Vielen Dank! Eine weitere Frage habe ich überprüft portraitund upside down, aber meine App wurde nicht automatisch gedreht, als ich den Bildschirm des Simulators drehte (zweimal um 90 Grad). Was ist das Problem?
Syg
Versuchte das. Scheint nicht mit RN 34 zu funktionieren, wenn es auf einem iPad (Pro) Simulator ausgeführt wird. Es funktioniert jedoch, wenn es auf einem iPhone-Simulator ausgeführt wird. Ich brauche es aber, um auf einem iPad zu arbeiten. Seltsam.
Pedram
1
Es stellt sich heraus, dass ich "Geräte" als iPad und nicht wie zuvor als "Universal" einstellen muss. Das hat funktioniert.
Pedram
Herr @Jarek Potiuk Ich habe einen kleinen Zweifel, tatsächlich, als ich ausgeführt wurde, zeigt mein Simulater standardmäßig Landschaftsmodus, ich hatte Landschaftsbau links und rechts. Aber jetzt wird der Querformatmodus im Gerät nicht angezeigt. Ich verwende das native Orientierungsmodul "Reagieren" und wähle in xcode die Landschaft links und rechts aus. aber ich habe nicht bekommen
Lavaraju
2
Das funktioniert aus irgendeinem Grund nicht mehr. Zumindest nicht inreact-native 0.45.1
MattyK14
79

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

Jim Wilson
quelle
2
Das hat perfekt funktioniert. Nur zum Nutzen anderer, die VS-Code verwenden: Führen Sie "Android auf Gerät / Simulator ausführen" über "Befehlspalette ..." aus. Das Schütteln des Geräts zum "Neuladen" der App funktioniert nicht.
Rishi
66

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:

rsp
quelle
2
funktioniert, nachdem ich die Ausstellung auf dem Gerät geschlossen und neu gestartet habe
Brandon Søren Culley
Gibt es eine Möglichkeit, es zu trennen, wie Ipad Landschaft und Iphone nur Porträt erlauben?
7urkm3n
Dies ist die Lösung, die in meinem Fall funktioniert. Meine Hauptansicht dreht sich nach dem Schließen der Interstitial-Anzeige um 180 Grad. Also sollte ich eine fest codierte Expo.ScreenOrientation.allowAsync (Expo.ScreenOrientation.Orientation.LANDSCAPE_LEFT) erstellen;
Hermann Schwarz
15

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

Geben Sie hier die Bildbeschreibung ein

ANKIT-DETROJA
quelle
2
Beste Antwort im Jahr 2020, die sowohl iOS als auch Android
abdeckt
3

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

Idan
quelle
2

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>
Paresh Chavda
quelle
2

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"
Ankit Adlakha
quelle
1

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>
Ravindra
quelle
1
Ein Link zu einer Lösung ist willkommen, aber stellen Sie sicher, dass Ihre Antwort ohne sie nützlich ist: Fügen Sie dem Link einen Kontext hinzu, damit Ihre Mitbenutzer eine Vorstellung davon haben, was es ist und warum es dort ist, und zitieren Sie dann den relevantesten Teil der Seite, die Sie verwenden. erneutes Verknüpfen mit, falls die Zielseite nicht verfügbar ist. Antworten, die kaum mehr als ein Link sind, können gelöscht werden.
Doppel-Piepton
0

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.

Filip Kwiatkowski
quelle
-3

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
});
Manoj
quelle