如何在React Native中禁用旋转？

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

React Native应用程序几乎只是一个普通的iOS应用程序，因此您可以使用与其他所有应用程序完全相同的方式来进行操作。只需在常规应用程序属性中取消选中（在XCode中）“ Landscape Left”和“ Landscape Right”即可：

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

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

目前，许多像这样的官方React Native指南都建议在构建React Native应用时使用Expo。因此，除了现有答案外，我还将添加一个Expo专用解决方案，这一点值得注意，因为它适用于iOS和Android，并且您只需要只需设置一次即可，而无需与XCode配置，AndroidManifest.xml等混淆。

在构建时设置方向：

如果您正在使用Expo构建React Native应用，则可以使用文件中的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设备上，除了反向肖像外，所有其他四个方向都可以。
• 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 =“ 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>

对于Android：在清单文件中输入：

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

然后在应用程序标签内放：

tools:ignore="LockedOrientationActivity"

然后在所有活动集中：

android:screenOrientation="portrait"

将此用于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>

您可以使用react-native-orientation-locker模块和lockToPortrait()功能。
如果您还希望某些屏幕具有未锁定的方向，这将很有帮助-在这种情况下，您也可以使用unlockAllOrientations()功能。

如果您正在使用RN expo项目，并且应用程序包含react-navigation，则将导航设置为以下代码对我有帮助。

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