首页 文章

如何在React Native中禁用旋转?

提问于
浏览 721
72

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

5 回答

  • 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
    

    当您收听该事件时,您同时获得 windowscreen ,这就是您以不同方式访问它的原因 .

    文档:

    有关详情,请参阅:

  • 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

  • 38

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

    Device orientation

  • 0

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

    const AppNavigator = createStackNavigator(
    {
        Page1: { screen: Page1}
    },
    {
        portraitOnlyMode: true
    });
    
  • 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

相关问题