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

Ответ 1

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

Ответ 2

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

В настоящее время многие официальные гиды React Native, такие как этот, рекомендуют использовать Expo при создании React Native, поэтому в дополнение к существующим ответам я также добавлю это особое решение для выставки, которое стоит отметить, поскольку оно работает как для 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 - Все, кроме обратного портрета, могут быть все 4 ориентации на некоторых устройствах Android.
• 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

Ответ 3

Для 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>

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

Ответ 4

Если вы используете 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

Ответ 5

используйте это для ios ipad Ориентация проблема, которую хотите изменить в файле 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>

Ответ 6

Просто хотел указать на возможное решение: https://github.com/yamill/react-native-orientation

Работает для меня! Обязательно внимательно следите за документацией

Ответ 7

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

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