come disabilitare la rotazione in React Native?

Vorrei supportare solo la visualizzazione verticale. Come posso fare in modo che un'app React Native non ruoti automaticamente? Ho provato a cercare documentazione e problemi con Github, ma non ho trovato nulla di utile.

L'app React Native è praticamente solo una normale applicazione iOS, quindi puoi farlo esattamente nello stesso modo in cui fai per tutte le altre app. Deseleziona semplicemente (in XCode) "Orizzontale a sinistra" e "Orizzontale a destra" come Orientamenti del dispositivo consentiti nelle proprietà generali dell'applicazione:

Per iOS, la risposta di Jarek è fantastica.

Per Android, è necessario modificare il file AndroidManifest.xml. Aggiungi la seguente riga a ciascuna attività che desideri bloccare in modalità verticale:

android:screenOrientation="portrait" 

Quindi, un esempio completo potrebbe assomigliare a questo:

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

Vedi l'elenco completo delle proprietà screenOrientation disponibili nei documenti, qui: https://developer.android.com/guide/topics/manifest/activity-element.html

Aggiornamento 2017: {"orientation": "portrait"}

Attualmente molte guide ufficiali di React Native come questa consigliano di utilizzare Expo durante la creazione di app React Native, quindi oltre alle risposte esistenti aggiungerò anche una soluzione specifica per Expo che vale la pena notare perché funziona sia per iOS che per Android e devi solo impostalo una volta senza dover modificare XCode config, AndroidManifest.xml ecc.

Impostazione dell'orientamento in fase di costruzione:

Se stai creando le tue app React Native con Expo, puoi utilizzare il orientationcampo nel tuo app.jsonfile, ad esempio:

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

Può essere impostata "portrait", "landscape"o "default"che significa AutoRotate senza serratura orientamento.

Impostazione dell'orientamento in fase di esecuzione:

Puoi anche sovrascrivere tale impostazione in fase di esecuzione eseguendo, ad esempio:

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

dove l'argomento può essere:

• ALL - Tutti e 4 gli orientamenti possibili
• ALL_BUT_UPSIDE_DOWN - Tutti tranne il ritratto inverso, potrebbero essere tutti e 4 gli orientamenti su alcuni dispositivi Android.
• PORTRAIT - Orientamento verticale, potrebbe anche essere ritratto inverso su alcuni dispositivi Android.
• PORTRAIT_UP - Solo ritratto in alto.
• PORTRAIT_DOWN - Solo ritratto capovolto.
• LANDSCAPE - Qualsiasi orientamento orizzontale.
• LANDSCAPE_LEFT - Solo paesaggio sinistro.
• LANDSCAPE_RIGHT - Solo paesaggio destro.

Rilevamento della rotazione:

Quando consenti più di un orientamento, puoi rilevare i cambiamenti ascoltando gli changeeventi Dimensionssull'oggetto:

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

oppure puoi anche ottenere le dimensioni in qualsiasi momento Dimensions.get('window')e in Dimensions.get('screen')questo modo:

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

o:

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

Quando ascolti l'evento ottieni entrambi windowe screenallo stesso tempo, ecco perché accedi in modo diverso.

Documentazione:

Per maggiori informazioni vedere:

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

Vai al file Androidmenifest.xml e aggiungi una riga: 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 :

Semplice, devi selezionare o deselezionare la modalità di rotazione dal tuo XCODE

Se utilizzi Expo puoi farlo semplicemente con questo codice:

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

Mettilo su App.js prima del rendering

Tutte le opzioni:

ALL ALL_BUT_UPSIDE_DOWN PORTRAIT PORTRAIT_UP PORTRAIT_DOWN LANDSCAPE LANDSCAPE_LEFT LANDSCAPE_RIGHT

Per Android, è necessario modificare il file AndroidManifest.xml. Aggiungi la seguente riga a ciascuna attività che desideri bloccare in modalità verticale:

Android: screenOrientation = "ritratto"

Quindi, un esempio completo potrebbe assomigliare a questo:

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

Per Android: nel tuo file manifest inserisci:

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

Quindi all'interno del tag dell'applicazione inserire:

tools:ignore="LockedOrientationActivity"

E poi in tutte le attività impostate:

android:screenOrientation="portrait"

usalo per ios ipad orientaion problema vuoi cambiare nel file 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>

È possibile utilizzare il modulo e la funzione React-Native-Orientamento-LockerlockToPortrait() .
Questo può essere utile se desideri avere anche alcune schermate con orientamento sbloccato - in questo caso puoi anche usare la unlockAllOrientations()funzione.

Se stai utilizzando il progetto RN expo e l'app contiene la navigazione reattiva, la configurazione della navigazione al codice seguente mi ha aiutato.

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