如何禁用React Native中的旋转?

我只想支持肖像视图。 我如何使一个React Native应用程序不自动旋转? 我试着search文档和Github问题,但是我没有find有用的东西。

React Native应用程序几乎只是一个普通的iOS应用程序,所以您可以按照与所有其他应用程序完全相同的方式进行操作。 只需在“常规”应用程序属性中取消选中(在XCode中)“左侧风景”和“右侧风景”作为允许的设备方向:

设备方向

对于iOS来说,Jarek的答案非常好。

对于Android,您需要编辑AndroidManifest.xml文件。 将以下行添加到要locking到纵向模式的每个活动:

 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

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

目前很多官方的React Native指南都推荐在使用Expo时使用Expo,因此除了现有的答案之外,我还将添加一个值得注意的世博会特定解决scheme,因为它适用于iOS和Android,您只需要设置一次,不需要弄乱XCodeconfiguration,AndroidManifest.xml等

在构build时设置方向:

如果您正在使用Expo构build您的React Native应用程序,那么您可以在app.json文件中使用orientation字段 – 例如:

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

它可以设置为"portrait""landscape""default" ,这意味着自动旋转没有方向locking。

运行时设置方向:

您也可以在运行时通过运行覆盖该设置,例如:

 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 – 只有正确的风景。

检测旋转:

如果您允许多个方向,则可以通过侦听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 ,这就是为什么你以不同的方式访问它。

文档:

更多信息请参阅: