如何在React Native中禁用旋转？

Question

我只想支持纵向视图.如何让React Native应用程序不自动旋转？我尝试搜索文档和Github问题,但我没有找到任何有用的东西.

Answer 1

React Native应用程序几乎只是一个普通的iOS应用程序,因此您可以使用与所有其他应用程序完全相同的方式执行此操作.只需取消选中(在XCode中)"Landscape Left"和"Landscape Right"作为常规应用程序属性中允许的设备方向:

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指南建议在构建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设备上的所有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 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

如果您使用的是反应导航那么您可以简单地通过

screenOptions={{ orientation: 'portrait'}}

对于堆栈导航，我们可以像这样传递此属性：

或者像这样：

Answer 6

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

Answer 7

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

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

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

tools:ignore="LockedOrientationActivity"

然后在所有活动集中：

android:screenOrientation="portrait"