как отключить ротацию в React Native?

Я хотел бы поддерживать только портретный вид. Как я могу заставить приложение React Native не автоповоротиться? Я пробовал искать документацию и проблемы с Github, но ничего полезного не нашел.

Приложение React Native - это в значительной степени обычное приложение для iOS, поэтому вы можете делать это точно так же, как и для всех других приложений. Просто снимите галочки (в XCode) с «Пейзаж слева» и «Пейзаж справа», как разрешено Ориентация устройства в общих свойствах приложения:

Для iOS ответ Ярека великолепен.

Для Android необходимо отредактировать файл AndroidManifest.xml. Добавьте следующую строку к каждому действию, которое вы хотите заблокировать в портретном режиме:

android:screenOrientation="portrait" 

Итак, полный пример может выглядеть так:

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

См. Полный список доступных свойств screenOrientation в документации здесь: https://developer.android.com/guide/topics/manifest/activity-element.html.

Обновление 2017: {"orientation": "portrait"}

В настоящее время много официальных руководств по React Native, подобных этому рекомендуют использовать Expo при создании приложений React Native, поэтому в дополнение к существующим ответам я также добавлю решение для Expo, которое стоит отметить, потому что оно работает как для iOS, так и для Android, и вам нужно только установите его один раз без необходимости возиться с конфигурацией XCode, AndroidManifest.xml и т. д.

Установка ориентации во время сборки:

Если вы создаете свои приложения React Native с помощью Expo, вы можете использовать orientationполе в своем app.jsonфайле, например:

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

Он может быть установлен на "portrait", "landscape"или "default"что означает автоповорот без блокировки ориентации.

Установка ориентации во время выполнения:

Вы также можете переопределить этот параметр во время выполнения, запустив, например:

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

где аргумент может быть:

• ALL - Все 4 возможных ориентации
• ALL_BUT_UPSIDE_DOWN - Все, кроме обратной портретной ориентации, на некоторых устройствах Android могут быть все 4 ориентации.
• PORTRAIT - Портретная ориентация, также может быть обратная портретная на некоторых устройствах Android.
• PORTRAIT_UP - Только верхний портрет.
• PORTRAIT_DOWN - Только перевернутый портрет.
• LANDSCAPE - Любая альбомная ориентация.
• LANDSCAPE_LEFT - Только левый пейзаж.
• LANDSCAPE_RIGHT - Только правый пейзаж.

Обнаружение вращения:

Когда вы разрешаете более одной ориентации, вы можете обнаруживать изменения, слушая changeсобытия на Dimensionsобъекте:

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

или вы также можете просто получить размеры в любое время Dimensions.get('window')и Dimensions.get('screen')вот так:

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

или:

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

Когда вы слушаете событие, вы получаете windowиscreen одновременно, поэтому к нему доступ по-разному.

Документация:

Для получения дополнительной информации см .:

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

Перейдите в файл Androidmenifest.xml и добавьте одну строчку: 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 :

Просто вам нужно установить или снять флажок режима вращения с вашего XCODE

Если вы используете Expo, вы можете сделать это просто с помощью этого кода:

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

Поместите его в App.js перед рендерингом

Все варианты:

ALL ALL_BUT_UPSIDE_DOWN PORTRAIT PORTRAIT_UP PORTRAIT_DOWN LANDSCAPE LANDSCAPE_LEFT LANDSCAPE_RIGHT

Для Android необходимо отредактировать файл AndroidManifest.xml. Добавьте следующую строку к каждому действию, которое вы хотите заблокировать в портретном режиме:

android: screenOrientation = "портрет"

Итак, полный пример может выглядеть так:

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

Для Android: в файле манифеста укажите:

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

Затем внутри тега приложения поместите:

tools:ignore="LockedOrientationActivity"

И затем во всем наборе действий:

android:screenOrientation="portrait"

используйте это для проблемы ориентации ios ipad, хотите изменить в файле plist https://www.reddit.com/r/reactnative/comments/7vkrfp/disables_screen_rotate_in_react_native_both/

IOS:

<key>UISupportedInterfaceOrientations</key> <array> <string>UIInterfaceOrientationPortrait</string> <string>UIInterfaceOrientationPortraitUpsideDown</string> </array>

Вы можете использовать модуль и функцию react-native-Ориентация-шкафчикlockToPortrait() .
Это может быть полезно, если вы также хотите иметь некоторые экраны с разблокированной ориентацией - в этом случае вы также можете использовать unlockAllOrientations()функцию.

Если вы используете проект RN expo, а приложение содержит реагирующую навигацию, то настройка навигации по следующему коду мне помогла.

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