studio run react example cli apps ios react-native

ios - run - react native windows



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

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

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

Actualmente, muchas guías oficiales de React Native como esta recomiendan usar Expo al crear aplicaciones de React Native, así 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 XCode config, AndroidManifest.xml, etc.

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

Si está creando sus aplicaciones React Native con Expo, puede usar el campo de orientation en su archivo app.json , por ejemplo:

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

Se puede establecer en "portrait" , "landscape" o "default" que significa autorrotación sin bloqueo de orientación.

Configuración de 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 : todo menos el retrato inverso, podría 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 correcto.

Detectando la rotación:

Cuando permite más de una orientación, puede detectar los cambios escuchando los eventos de change en el objeto Dimensions :

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'') esta manera:

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 tanto la window como la screen al mismo tiempo, por eso accedes de manera diferente.

Documentación:

Para más información ver:

La aplicación React Native es más o menos una aplicación normal de iOS, por lo que puede hacerlo exactamente de la misma manera que lo hace para todas las demás aplicaciones. Simplemente desmarque (en XCode) el "Paisaje a la izquierda" y el "Paisaje a la 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>

Vea la lista completa de las propiedades de ScreenOrientation disponibles en los documentos, aquí: https://developer.android.com/guide/topics/manifest/activity-element.html

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

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

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

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

Póngalo en App.js antes de renderizar

Todas las opciones:

ALL ALL_BUT_UPSIDE_DOWN PORTRAIT PORTRAIT_UP PORTRAIT_DOWN LANDSCAPE LANDSCAPE_LEFT LANDSCAPE_RIGHT