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
use esto para el problema de orientación de ios ipad que 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>