¿Cómo deshabilitar la rotación en React Native?

Me gustaría admitir solo la vista vertical. ¿Cómo puedo hacer que una aplicación React Native no gire automáticamente? Intenté buscar documentación y problemas de Github, pero no encontré nada útil.

La aplicación React Native es prácticamente una aplicación iOS normal, por lo que puede hacerlo exactamente de la misma manera que lo hace con todas las demás aplicaciones. Simplemente desmarque (en XCode) "Horizontal izquierda" y "Horizontal derecha" como Orientaciones de dispositivo permitidas en las propiedades generales de la aplicación:

Para iOS, la respuesta de Jarek es genial.

Para Android, debe editar el archivo AndroidManifest.xml. Agregue la siguiente línea a cada actividad que desee bloquear en modo vertical:

android:screenOrientation="portrait" 

Entonces, un ejemplo completo podría verse así:

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

Consulte la lista completa de propiedades de orientación de pantalla disponibles en los documentos, aquí: https://developer.android.com/guide/topics/manifest/activity-element.html

Actualización de 2017: {"orientation": "portrait"}

Actualmente, muchas guías oficiales de React Native como esta recomiendan usar Expo al crear aplicaciones React Native, por lo que, además de las respuestas existentes, también agregaré una solución específica de Expo que vale la pena señalar porque funciona tanto para iOS como para Android y solo necesita configúrelo una vez sin necesidad de meterse con la configuración de XCode, AndroidManifest.xml, etc.

Configuración de la orientación en el momento de la construcción:

Si está creando sus aplicaciones React Native con Expo, puede usar el orientationcampo en su app.jsonarchivo, por ejemplo:

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

Se puede configurar en "portrait", "landscape"o lo "default"que significa rotar automáticamente sin bloqueo de orientación.

Configuración de la orientación en tiempo de ejecución:

También puede anular esa configuración en tiempo de ejecución ejecutando, por ejemplo:

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

donde el argumento puede ser:

• ALL - Las 4 orientaciones posibles
• ALL_BUT_UPSIDE_DOWN - Todos, excepto el retrato inverso, podrían tener las 4 orientaciones en ciertos dispositivos Android.
• PORTRAIT - Orientación vertical, también podría ser vertical en ciertos dispositivos Android.
• PORTRAIT_UP - Solo retrato al revés.
• PORTRAIT_DOWN - Solo retrato al revés.
• LANDSCAPE - Cualquier orientación horizontal.
• LANDSCAPE_LEFT - Solo paisaje izquierdo.
• LANDSCAPE_RIGHT - Solo paisaje derecho.

Detectando la rotación:

Cuando permite más de una orientación, puede detectar los cambios escuchando los changeeventos en el Dimensionsobjeto:

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

o también puede obtener las dimensiones en cualquier momento con Dimensions.get('window')y Dimensions.get('screen')así:

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

o:

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

Cuando escuchas el evento, obtienes ambos windowy screenal mismo tiempo, por eso accedes a él de manera diferente.

Documentación:

Para obtener más información, consulte:

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

Vaya al archivo Androidmenifest.xml y agregue una línea: 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 :

Simple, tienes que marcar o desmarcar el modo de rotación de tu XCODE

Si usa Expo, puede hacerlo simplemente con este código:

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

Ponlo en App.js antes de renderizar

Todas las opciones:

ALL ALL_BUT_UPSIDE_DOWN PORTRAIT PORTRAIT_UP PORTRAIT_DOWN LANDSCAPE LANDSCAPE_LEFT LANDSCAPE_RIGHT

Para Android, debe editar el archivo AndroidManifest.xml. Agregue la siguiente línea a cada actividad que desee bloquear en modo vertical:

android: screenOrientation = "retrato"

Entonces, un ejemplo completo podría verse así:

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

Para Android: en su archivo de manifiesto, ponga:

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

Luego, dentro de la etiqueta de la aplicación, coloque:

tools:ignore="LockedOrientationActivity"

Y luego en todo el conjunto de actividades:

android:screenOrientation="portrait"

use esto para el problema de orientación de ios ipad desea cambiar en el archivo 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>

Puede usar el módulo y la función react-native-Orientation-LockerlockToPortrait() .
Esto puede ser útil si también desea tener algunas de las pantallas con orientación desbloqueada; en este caso, también podría usar la unlockAllOrientations()función.

Si está utilizando el proyecto RN expo y la aplicación contiene react-navigation, entonces me ayudó configurar la navegación en el siguiente código.

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