comment désactiver la rotation dans React Native?

Je voudrais prendre en charge uniquement la vue portrait. Comment puis-je faire en sorte qu'une application React Native ne tourne pas automatiquement? J'ai essayé de rechercher de la documentation et des problèmes Github, mais je n'ai rien trouvé d'utile.

L'application React Native est à peu près 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 (dans XCode) les options "Paysage à gauche" et "Paysage à droite" comme Orientations de périphérique autorisées dans les propriétés générales de l'application:

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>

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

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

Actuellement, de nombreux guides officiels React Native comme celui-ci recommandent d'utiliser Expo lors de la création d'applications React Native.Ainsi, en plus des réponses existantes, j'ajouterai également une solution spécifique à Expo, ce qui vaut la peine d'être noté car elle fonctionne à la fois pour iOS et Android et il vous suffit de réglez-le une fois sans avoir besoin de jouer avec la configuration XCode, AndroidManifest.xml, etc.

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

Si vous créez vos applications React Native avec Expo, vous pouvez utiliser le orientationchamp dans votre app.jsonfichier - 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 autorotation sans verrouillage d'orientation.

Définition de l'orientation lors de l'exécution:

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

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

où l'argument peut être:

• ALL - Les 4 orientations possibles
• ALL_BUT_UPSIDE_DOWN - Tout sauf portrait inversé, pourrait être les 4 orientations sur certains appareils Android.
• PORTRAIT - Orientation portrait, peut également être portrait inversé sur certains appareils Android.
• PORTRAIT_UP - Portrait à l'envers uniquement.
• PORTRAIT_DOWN - Portrait à l'envers uniquement.
• LANDSCAPE - Toute orientation paysage.
• LANDSCAPE_LEFT - Paysage de gauche uniquement.
• LANDSCAPE_RIGHT - Paysage droit uniquement.

Détection de la rotation:

Lorsque vous autorisez plus d'une orientation, vous pouvez détecter les changements en écoutant les changeévénements sur l' Dimensionsobjet:

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

ou vous pouvez également simplement 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 les deux windowet screenen même temps, c'est pourquoi vous y accédez différemment.

Documentation:

Pour plus d'informations, voir:

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

Accédez au fichier Androidmenifest.xml et ajoutez une ligne: 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, vous devez cocher ou décocher le mode de rotation de votre XCODE

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:

ALL ALL_BUT_UPSIDE_DOWN PORTRAIT PORTRAIT_UP PORTRAIT_DOWN LANDSCAPE LANDSCAPE_LEFT LANDSCAPE_RIGHT

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:

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

Pour Android: dans votre fichier manifeste, mettez:

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

Ensuite, à l'intérieur de la balise d'application, mettez:

tools:ignore="LockedOrientationActivity"

Et puis dans tous les ensembles d'activités:

android:screenOrientation="portrait"

utilisez ceci pour ios ipad orientaion issue voulez 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>

Vous pouvez utiliser le module et la fonction react-native-orientation-lockerlockToPortrait() .
Cela peut être utile si vous souhaitez également avoir certains des écrans avec une orientation déverrouillée - dans ce cas, vous pouvez également utiliser la unlockAllOrientations()fonction.

Si vous utilisez le projet RN expo et que l'application contient react-navigation, la configuration de la navigation vers le code suivant m'a aidé.

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