锁定设备方向 - React Native (Android)

Posted 2023-03-10

【中文标题】锁定设备方向 - React Native (Android)

【英文标题】：Lock device orientation - React Native (Android)

【发布时间】：2016-07-27 20:07:39

【问题描述】：

我正在使用 React Native 0.29 并为 android 开发。我正在尝试锁定设备方向。我需要的是在纵向模式下锁定屏幕。我尝试使用此存储库https://github.com/yamill/react-native-orientation，但它还不支持 RN 0.29。

有什么方法可以锁定设备方向吗？也许任何带有 android studio 的原生 Android hack？

【参考方案1】：

只需将 android:screenOrientation="portrait" 添加到 AndroidManifest.xml 中的活动即可。

【讨论】：

添加方法见：***.com/questions/15718869/…

android/app/src/main/AndroidManifest.xml 在 react-native 项目中

【参考方案2】：

2017 年更新

目前，还有另一种方法可以在 Android 和 ios 上执行一次，方法是添加：

"orientation": "portrait"

如果您使用 Expo，请在 app.json 中：

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

或者在运行时：

ScreenOrientation.allow()

例子：

ScreenOrientation.allow(ScreenOrientation.Orientation.PORTRAIT);

请注意，它仅在您使用 Expo 构建时才有效，但由于目前（截至 2017 年）在 React Native Blog 的官方指南中推荐使用它，因此可能很多人都在使用它，因此值得一提的是它是一个有趣的解决方案除了破解 Android 特定的 XML 配置文件。

更多信息：

有关详细信息，请参阅： how to disable rotation in React Native?

【参考方案3】：

有一个拉取请求可以在 0.29.2 及更高版本上运行： https://github.com/yamill/react-native-orientation/pull/85

如果你使用他的版本，它应该可以在 0.29.2 及更高版本上运行： https://github.com/youennPennarun/react-native-orientation

步骤：

用rnpm unlink react-native-orientation取消链接之前的安装

rm -rf node_modules/react-native-orientation

在您的 package.json 中将 react-native-orientation 的条目编辑为：

"react-native-orientation": "youennPennarun/react-native-orientation"

npm install

react-native link react-native-orientation

在此之后应该可以正常工作。您可以跟踪 PR 的进度，并在合并后切换到主 repo。

【参考方案4】：

react-native-orientation - 不再与新版本兼容（我尝试过 0.39.2）。链接此模块后，我遇到了编译器错误。 据我所知，现在我们应该使用react-native-orientation-listener

npm install --save react-native-orientation-listener rnpm 链接

【讨论】：

我真的不知道。我遇到了这个模块的奇怪问题。要么是我缺乏使用 React 的经验，要么是它有问题......***.com/questions/41407229/…

【参考方案5】：

步骤：1

npm install git+https://github.com/yamill/react-native-orientation.git --save

第二步： 反应原生链接 步骤：3 修改 MainApplication.java 文件：

import com.github.yamill.orientation.OrientationPackage;// import

@Override
protected List getPackages() 
return Arrays.asList(
new MainReactPackage(),
new OrientationPackage() //add this
);

【参考方案6】：

您可以使用react-native-orientation-locker。

“react-native-orientation”已被弃用。 使用“react-native-orientation-locker”组件，您将能够检测当前方向，并通过以下方式将其锁定为纵向/横向：

Orientation.lockToPortrait();

Orientation.lockToLandscapeLeft();

甚至使用释放锁

Orientation.unlockAllOrientations();