ios 如何在 React Native 中禁用旋转？

how to disable rotation in React Native?

提问by syg

I would like to support only portrait view. How can I make a React Native app not to autorotate? I tried searching documentation and Github issues, but I didn't find anything helpful.

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

回答by Jarek Potiuk

React Native app is pretty much just a normal iOS application, so you can do it in exactly the same way as you do for all other apps. Simply uncheck (in XCode) the "Landscape Left" and "Landscape Right" as allowed Device Orientations in the General application properties:

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

回答by Jim Wilson

For iOS, Jarek's answer is great.

对于 iOS，Jarek 的回答很棒。

For Android, you need to edit the AndroidManifest.xml file. Add the following line to each activity that you want to lock into portrait mode:

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

android:screenOrientation="portrait" 

So, a full example might look like this:

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

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

See full list of available screenOrientation properties in the docs, here: https://developer.android.com/guide/topics/manifest/activity-element.html

请在此处查看文档中可用 screenOrientation 属性的完整列表：https: //developer.android.com/guide/topics/manifest/activity-element.html

回答by rsp

2017 Update: {"orientation": "portrait"}

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

Currently many official React Native guides like this onerecommend using Expo when building React Native apps so in addition to existing answers I'll also add an Expo-specific solution which is worth noting because it works for both iOS and Android and you only need to set it once with no need to mess with XCode config, AndroidManifest.xml etc.

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

Setting orientation at build time:

在构建时设置方向：

If you're building your React Native apps with Expo then you can use the orientationfield in your app.jsonfile - for example:

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

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

It can be set to "portrait", "landscape"or "default"which means to autorotate with no orientation lock.

它可以设置为"portrait"，"landscape"或者"default"这意味着在没有方向锁定的情况下自动旋转。

Setting orientation at runtime:

在运行时设置方向：

You can also override that setting at runtime by running, for example:

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

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

where the argument can be:

参数可以是：

• ALL— All 4 possible orientations
• ALL_BUT_UPSIDE_DOWN— All but reverse portrait, could be all 4 orientations on certain Android devices.
• PORTRAIT— Portrait orientation, could also be reverse portrait on certain Android devices.
• PORTRAIT_UP— Upside portrait only.
• PORTRAIT_DOWN— Upside down portrait only.
• LANDSCAPE— Any landscape orientation.
• LANDSCAPE_LEFT— Left landscape only.
• LANDSCAPE_RIGHT— Right landscape only.

• ALL— 所有 4 种可能的方向
• ALL_BUT_UPSIDE_DOWN— 除了反向纵向，在某些 Android 设备上可能是所有 4 个方向。
• PORTRAIT— 纵向，也可以在某些 Android 设备上反向纵向。
• PORTRAIT_UP— 仅限正面肖像。
• PORTRAIT_DOWN— 仅限倒置肖像。
• LANDSCAPE— 任何横向。
• LANDSCAPE_LEFT— 仅左侧风景。
• LANDSCAPE_RIGHT— 仅正确的风景。

Detecting the rotation:

检测旋转：

When you allow more than one orientation then you can detect the changes by listening to the changeevents on the Dimensionsobject:

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

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

or you can also just get the dimensions anytime with Dimensions.get('window')and Dimensions.get('screen')like this:

或者你也可以只拿到尺寸随时随地与Dimensions.get('window')和Dimensions.get('screen')这样的：

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

or:

或者：

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

When you listen to the event you get both windowand screenat the same time so that's why you access it differently.

当您收听事件时，您会同时获得两者window，screen这就是您以不同方式访问它的原因。

Documentation:

文档：

For more info see:

有关更多信息，请参阅：

• 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

• 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

回答by ANKIT-DETROJA

Answer for disable rotation in React Native.

Answer for disable rotation in React Native.

For Android :

For Android :

Go to the Androidmenifest.xml file and add one line : android:screenOrientation="portrait"

转到 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 :

For IOS :

Simple you have to check or uncheck rotation mode from your XCODE

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

回答by Idan

If you using Expo you can do it simply with this code:

如果您使用 Expo，您只需使用以下代码即可：

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

Put it on App.js before render

在渲染之前把它放在 App.js 上

All options:

所有选项：

ALLALL_BUT_UPSIDE_DOWNPORTRAITPORTRAIT_UPPORTRAIT_DOWNLANDSCAPELANDSCAPE_LEFTLANDSCAPE_RIGHT

ALLALL_BUT_UPSIDE_DOWNPORTRAITPORTRAIT_UPPORTRAIT_DOWNLANDSCAPELANDSCAPE_LEFTLANDSCAPE_RIGHT

回答by Ravindra

use this for ios ipad orientaion issue want to change in plist file https://www.reddit.com/r/reactnative/comments/7vkrfp/disabling_screen_rotate_in_react_native_both/

将此用于 ios ipad orientaion 问题想要更改 plist 文件https://www.reddit.com/r/reactnative/comments/7vkrfp/disabling_screen_rotate_in_react_native_both/

IOS:

IOS：

<key>UISupportedInterfaceOrientations</key> <array> <string>UIInterfaceOrientationPortrait</string> <string>UIInterfaceOrientationPortraitUpsideDown</string> </array>

回答by Paresh Chavda

For Android, you need to edit the AndroidManifest.xml file. Add the following line to each activity that you want to lock into portrait mode:

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

android:screenOrientation="portrait"

机器人：屏幕方向=“肖像”

So, a full example might look like this:

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

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

回答by Ankit Adlakha

For Android: In your manifest file put:

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

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

Then inside the application tag put:

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

tools:ignore="LockedOrientationActivity"

And then in all activity set:

然后在所有活动集中：

android:screenOrientation="portrait"

回答by Filip Kwiatkowski

You can use react-native-orientation-lockermodule and lockToPortrait()function.
This can be helpful if you would also like to have some of the screens with unlocked orientation - in this case you could also use unlockAllOrientations()function.

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

回答by Manoj

If you are using RN expo project, and app contains react-navigation, then setting up the navigation to the following code helped me.

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

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