як відключити обертання в 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>

Переглянути повний перелік доступних властивостей екрана орієнтації в документах можна тут: 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 - Все, окрім зворотного портрета, може бути в усіх 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

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"

використовувати це для випуску орієнтації на ipad ipad, хочу змінити файл-список 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>

Ви можете використовувати модуль і функціональну функцію -шафка з орієнтацією на реакціюlockToPortrait() .
Це може бути корисно, якщо ви також хочете мати деякі екрани з розблокованою орієнтацією - у цьому випадку ви також можете використовувати unlockAllOrientations()функцію.

Якщо ви використовуєте проект RN expo, а додаток містить реакцію-навігацію, то мені допомогла налаштування навігації до наступного коду.

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