如何在React Native中禁用旋转？

5 回答

• 38

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

  

  回复于 2024-04-26T08:16:57+08:00
• 93

  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 - 除了反向纵向外，其他所有设备都可以是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

  回复于 2024-04-26T08:16:57+08:00
• 50

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

  回复于 2024-04-26T08:16:57+08:00
• 0

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

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

  回复于 2024-04-26T08:16:57+08:00
• 0

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

  回复于 2024-04-26T08:16:57+08:00