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

Solución:

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 necesitas 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 orientation campo en tu app.json archivo – por ejemplo:

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

Puede configurarse para "portrait", "landscape" o "default" lo 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 retrato inverso 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 las change eventos en el Dimensions objeto:

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') como esto:

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 window y screen al 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

---

---

Utiliza Nuestro Buscador