如何在React Native中禁用旋转？

Question

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

Answer 1

目前，许多官方的React原生指南都建议在构建React原生应用时使用Expo，所以除了现有的答案，我还会添加一个Expo专用的解决方案，值得注意的是，因为它适用于iOS和Android，并且您只需设置一次，无需与XCode config、AndroidManifest.xml等混淆。

如果您正在使用Expo构建React本地应用程序，那么您可以使用< code>app.json文件中的< code>orientation字段，例如:

{
  "expo": {
    "name": "My app",
    "slug": "my-app",
    "sdkVersion": "21.0.0",
    "privacy": "public",
    "orientation": "portrait"
  }
}

它可以设置为“纵向”、 或 ，这意味着无方向锁定的自动旋转。

您还可以在运行时通过运行来覆盖该设置，例如：

Expo.ScreenOrientation.allow(Expo.ScreenOrientation.Orientation.LANDSCAPE);

其中的参数可以是:

< li> 所有 —所有4种可能的方向 < Li > < code > ALL _ BUT _ UPSIDE _ DOWN —除了纵向以外，在某些Android设备上可以是所有4个方向。 < li> 纵向 —纵向，在某些Android设备上也可以是反向纵向。 < li> 纵向向上 —仅纵向向上。 < li> 纵向_向下 —仅颠倒纵向。 < li> 横向 —任何横向方向。 < li> 横向_左侧 —仅左侧横向。 < li> 横向_右侧 —仅右侧横向。

如果允许多个方向，则可以通过侦听Dimensions（维度）对象上的更改>事件来检测更改：

Dimensions.addEventListener('change', (dimensions) => {
  // you get:
  //  dimensions.window.width
  //  dimensions.window.height
  //  dimensions.screen.width
  //  dimensions.screen.height
});

也可以随时使用dimensions获取尺寸。get（'window'）和尺寸。获取（“屏幕”）如下：

const dim = Dimensions.get('window');
// you get:
//  dim.width
//  dim.height

或：

const dim = Dimensions.get('screen');
// you get:
//  dim.width
//  dim.height

当您收听事件时，您将同时获得窗口和屏幕，因此这就是为什么您以不同的方式访问它的原因。

有关更多信息，请参见:

< Li > https://docs . Expo . io/versions/latest/guides/configuration . html # orientation < Li > https://docs . Expo . io/versions/latest/SDK/screen-orientation . html < Li > https://Facebook . github . io/react-native/docs/dimensions . html

Answer 2

iOS，Jarek的回答很棒。

对于Android系统，您需要编辑Android智能.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

Answer 3

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