web-dev-qa-db-fra.com

comment désactiver la rotation dans React Native?

Je voudrais soutenir seulement la vue de portrait. Comment faire une React application native pour ne pas autoroter? J'ai essayé de chercher de la documentation et des problèmes avec Github, mais je n'ai rien trouvé d'utile.

iosreact-native
87
syg

L'application React Native est plutôt une application iOS normale, vous pouvez donc le faire exactement de la même manière que pour toutes les autres applications. Décochez simplement (en XCode) les options "Paysage à gauche" et "Paysage à droite" autorisées dans Orientations du périphérique dans les propriétés générales de l'application:

Device orientation

109
Jarek Potiuk

Mise à jour 2017: {"orientation": "portrait"}

Actuellement, de nombreux guides officiels React) aiment celui-ci recommandent d’utiliser Expo lors de la construction React = Applications natives donc, en plus des réponses existantes, je vais également ajouter une solution spécifique à Expo qui mérite d’être soulignée car elle fonctionne à la fois pour iOS et Android et vous n’avez besoin que de le configurer une fois sans besoin de jouer avec la configuration XCode, AndroidManifest.xml etc.

Définition de l'orientation au moment de la construction:

Si vous construisez votre React applications natives avec Expo, vous pouvez utiliser le champ orientation de votre fichier app.json - par exemple:

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

Il peut être réglé sur "portrait", "landscape" Ou "default", Ce qui signifie effectuer une rotation automatique sans verrouillage de l'orientation.

Définition de l'orientation au moment de l'exécution:

Vous pouvez également remplacer ce paramètre au moment de l'exécution en exécutant, par exemple:

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

où l'argument peut être:

  • ALL - Toutes les 4 orientations possibles
  • ALL_BUT_UPSIDE_DOWN - Tout sauf le portrait inversé, pourrait être les 4 orientations de certains Android appareils.
  • PORTRAIT - L’orientation Portrait peut également être un portrait inversé sur certains Android.
  • PORTRAIT_UP - Portrait à l'envers uniquement.
  • PORTRAIT_DOWN - Portrait à l'envers uniquement.
  • LANDSCAPE - N'importe quelle orientation de paysage.
  • LANDSCAPE_LEFT - Paysage gauche uniquement.
  • LANDSCAPE_RIGHT - Paysage à droite uniquement.

Détecter la rotation:

Lorsque vous autorisez plus d'une orientation, vous pouvez détecter les modifications en écoutant les événements change de l'objet Dimensions:

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

ou vous pouvez également obtenir les dimensions à tout moment avec Dimensions.get('window') et Dimensions.get('screen') comme ceci:

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

ou:

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

Lorsque vous écoutez l'événement, vous obtenez window et screen en même temps, c'est pourquoi vous y accédez différemment.

Documentation:

Pour plus d'informations, voir:

59
rsp

Pour iOS, la réponse de Jarek est excellente.

Pour Android, vous devez modifier le fichier AndroidManifest.xml. Ajoutez la ligne suivante à chaque activité que vous souhaitez verrouiller en mode portrait:

Android:screenOrientation="portrait"

Ainsi, un exemple complet pourrait ressembler à ceci:

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

Consultez la liste complète des propriétés screenOrientation disponibles dans la documentation, ici: https://developer.Android.com/guide/topics/manifest/activity-element.html

54
Jim Wilson

Si vous utilisez Expo, vous pouvez le faire simplement avec ce code:

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

Mettez-le sur App.js avant le rendu

Toutes les options:

ALLALL_BUT_UPSIDE_DOWNPORTRAITPORTRAIT_UPPORTRAIT_DOWNLANDSCAPELANDSCAPE_LEFTLANDSCAPE_RIGHT

2
Idan

utilisez-le pour le problème d'orientation de l'iPad pour l'iOS souhaitez changer dans le fichier 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>
1
Ravindra