jak wyłączyć rotację w React Native?

Chciałbym obsługiwać tylko widok pionowy. Jak mogę sprawić, by aplikacja React Native nie obracała się automatycznie? Próbowałem przeszukać dokumentację i problemy z Githubem, ale nie znalazłem nic pomocnego.

Aplikacja React Native to w zasadzie zwykła aplikacja na iOS, więc możesz to zrobić dokładnie w taki sam sposób, jak w przypadku wszystkich innych aplikacji. Po prostu odznacz (w XCode) „Poziomo po lewej” i „Poziomo po prawej” jako dozwolone Orientacje urządzenia we właściwościach ogólnych aplikacji:

W przypadku iOS odpowiedź Jarka jest świetna.

W przypadku Androida musisz edytować plik AndroidManifest.xml. Dodaj następujący wiersz do każdego działania, które chcesz zablokować w trybie portretowym:

android:screenOrientation="portrait" 

Tak więc pełny przykład może wyglądać następująco:

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

Zobacz pełną listę dostępnych właściwości screenOrientation w dokumentacji, tutaj: https://developer.android.com/guide/topics/manifest/activity-element.html

Aktualizacja 2017: {"orientation": "portrait"}

Obecnie wiele oficjalnych przewodników po React Native, takich jak ten, zaleca używanie Expo podczas tworzenia aplikacji React Native, więc oprócz istniejących odpowiedzi dodam również rozwiązanie specyficzne dla Expo, które jest warte odnotowania, ponieważ działa zarówno na iOS, jak i Android i wystarczy ustaw go raz, bez konieczności majstrowania przy konfiguracji XCode, AndroidManifest.xml itp.

Ustawianie orientacji w czasie kompilacji:

Jeśli tworzysz swoje aplikacje React Native za pomocą Expo, możesz użyć orientationpola w swoim app.jsonpliku - na przykład:

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

To może być ustawiony "portrait", "landscape"albo "default"co oznacza AutoRotate bez blokady orientacji.

Ustawianie orientacji w czasie wykonywania:

Możesz również zastąpić to ustawienie w czasie wykonywania, uruchamiając na przykład:

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

gdzie argumentem może być:

• ALL - Wszystkie 4 możliwe orientacje
• ALL_BUT_UPSIDE_DOWN - Wszystkie oprócz odwróconego portretu mogą mieć wszystkie 4 orientacje na niektórych urządzeniach z Androidem.
• PORTRAIT - Orientacja pionowa, może być również odwrócona w pionie na niektórych urządzeniach z Androidem.
• PORTRAIT_UP - Tylko portret do góry nogami.
• PORTRAIT_DOWN - Tylko portret do góry nogami.
• LANDSCAPE - Dowolna orientacja pozioma.
• LANDSCAPE_LEFT - Tylko lewy poziom.
• LANDSCAPE_RIGHT - Tylko prawy krajobraz.

Wykrywanie obrotu:

Jeśli zezwolisz na więcej niż jedną orientację, możesz wykryć zmiany, nasłuchując changezdarzeń na Dimensionsobiekcie:

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

lub możesz po prostu uzyskać wymiary w dowolnym momencie za pomocą Dimensions.get('window')i w Dimensions.get('screen')ten sposób:

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

lub:

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

Kiedy słuchasz wydarzenia, dostajesz jedno windowi drugie screenw tym samym czasie, dlatego masz do niego inny dostęp.

Dokumentacja:

Więcej informacji:

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

Przejdź do pliku Androidmenifest.xml i dodaj jedną linię: 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 :

Po prostu musisz zaznaczyć lub odznaczyć tryb rotacji w swoim XCODE

Jeśli korzystasz z Expo, możesz to zrobić po prostu za pomocą tego kodu:

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

Umieść go w App.js przed renderowaniem

Wszystkie opcje:

ALL ALL_BUT_UPSIDE_DOWN PORTRAIT PORTRAIT_UP PORTRAIT_DOWN LANDSCAPE LANDSCAPE_LEFT LANDSCAPE_RIGHT

W przypadku Androida musisz edytować plik AndroidManifest.xml. Dodaj następujący wiersz do każdego działania, które chcesz zablokować w trybie portretowym:

android: screenOrientation = "portret"

Tak więc pełny przykład może wyglądać następująco:

 <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: w pliku manifestu umieść:

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

Następnie wewnątrz tagu aplikacji umieść:

tools:ignore="LockedOrientationActivity"

A potem w całym zestawie czynności:

android:screenOrientation="portrait"

użyj tego w przypadku problemu z orientacją na ios ipad chcesz zmienić w pliku plist https://www.reddit.com/r/reactnative/comments/7vkrfp/disecting_screen_rotate_in_react_native_both/

IOS:

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

Możesz użyć modułu i funkcji React-Native-Orientation-LockerlockToPortrait() .
Może to być pomocne, jeśli chciałbyś mieć również niektóre ekrany z odblokowaną orientacją - w tym przypadku możesz również skorzystać z unlockAllOrientations()funkcji.

Jeśli korzystasz z projektu RN expo, a aplikacja zawiera funkcję reaktywnej nawigacji, pomogło mi skonfigurowanie nawigacji do następującego kodu.

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