如何在 React Native 中禁用旋转？

Question

我只想支持纵向视图。如何使 React Native 应用程序不自动旋转？ 我尝试搜索文档和 Github 问题，但没有发现任何有用的信息。

Answer 1

React Native 应用程序几乎只是一个普通的 iOS 应用程序，因此您可以按照与所有其他应用程序完全相同的方式进行操作。只需在常规应用程序属性中取消选中（在 XCode 中）“横向左”和“横向右”作为允许的设备方向：

Answer 2

对于 iOS，Jarek 的回答很棒。

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

Answer 3

2017 年更新：{"orientation": "portrait"}

目前许多官方 React Native 指南，如 this one 建议在构建 React Native 应用程序时使用 Expo，因此除了现有答案之外，我还将添加一个值得注意的 Expo 特定解决方案，因为它适用于 iOS 和 Android 以及您只需设置一次，无需乱用 XCode 配置、AndroidManifest.xml 等。

在构建时设置方向：

如果您正在使用 Expo 构建您的 React Native 应用程序，那么您可以在您的 app.json 文件中使用 orientation 字段 - 例如：

{
  "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 — 仅限右侧风景。

检测旋转：

当您允许多个方向时，您可以通过侦听Dimensions 对象上的change 事件来检测更改：

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 4

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 中选中或取消选中旋转模式

Answer 5

对于安卓： 在您的清单文件中放置：

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

然后在应用标签里面放：

tools:ignore="LockedOrientationActivity"

然后在所有活动集中：

android:screenOrientation="portrait"

Answer 6

对于 Android，您需要编辑 AndroidManifest.xml 文件。将以下行添加到要锁定为纵向模式的每个活动：

android:screenOrientation="portrait"

因此，一个完整的示例可能如下所示：

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

Answer 7

如果您使用 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

Answer 8

安卓：

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

IOS：

很简单，您必须从 XCODE 中取消选中旋转模式

在此处输入图片描述

来自 ANKIT-DETROJ 的回答。

Answer 9

您可以使用react-native-orientation-locker 模块和lockToPortrait() 函数。
如果您还希望某些屏幕具有解锁方向，这会很有帮助 - 在这种情况下，您还可以使用 unlockAllOrientations() 函数。

Answer 10

将此用于 ios ipad orientaion 问题想要更改 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>

Answer 11

如果您使用的是 RN expo 项目，并且应用程序包含 react-navigation，那么设置导航到以下代码对我有帮助。

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