[英]Lock device orientation - React Native (Android)
I'm using React Native 0.29 and developing for Android. 我正在使用React Native 0.29并为Android开发。 I'm trying to lock the device orientation.
我正在尝试锁定设备方向。 What I need is to lock the screen in portrait mode.
我需要将屏幕锁定为纵向模式。 I tried with this repository https://github.com/yamill/react-native-orientation but it is not supporting RN 0.29 yet.
我尝试使用此存储库https://github.com/yamill/react-native-orientation,但它尚不支持RN 0.29。
Is there any way I can lock the device orientation? 有什么方法可以锁定设备方向? Maybe any native Android hack with android studio?
也许任何原生Android hack与android studio?
只需将android:screenOrientation =“ portrait”添加到AndroidManifest.xml中的活动即可。
There is a pull request for this to work on 0.29.2 and above: https://github.com/yamill/react-native-orientation/pull/85 有一个请求请求才能在0.29.2及更高版本上运行: https : //github.com/yamill/react-native-orientation/pull/85
If you use his version, it should work on 0.29.2 and above: https://github.com/youennPennarun/react-native-orientation 如果您使用他的版本,则该版本应适用于0.29.2及更高版本: https : //github.com/youennPennarun/react-native-orientation
Steps: 脚步:
rnpm unlink react-native-orientation
rnpm unlink react-native-orientation
先前安装的rnpm unlink react-native-orientation
rm -rf node_modules/react-native-orientation
in your package.json edit the entry of react-native-orientation
to be as: 在package.json中,将
react-native-orientation
的条目编辑为:
"react-native-orientation": "youennPennarun/react-native-orientation"
npm install
react-native link react-native-orientation
Things should work after this. 在此之后,事情应该起作用。 You can track the progress of the PR and switch to main repo when it has been merged.
您可以跟踪PR的进度,并在合并后切换到主仓库。
Currently, there is also another way to do it once for both Android and iOS by adding: 当前,还有另一种方法可以针对Android和iOS做到这一点,方法是添加:
"orientation": "portrait"
in app.json
if you're using Expo: 如果您使用的是Expo,则在
app.json
:
{
"expo": {
"name": "My app",
"slug": "my-app",
"sdkVersion": "21.0.0",
"privacy": "public",
"orientation": "portrait"
}
}
Or at runtime: 或在运行时:
ScreenOrientation.allow()
Example: 例:
ScreenOrientation.allow(ScreenOrientation.Orientation.PORTRAIT);
Note that it only works if you're building with Expo but since this is currently (as of 2017) recommended in official guides on React Native Blog then probably a lot of people are using it so it's worth mentioning as an interesting solution in addition to hacking the Android-specific XML configuration files. 请注意,它仅在您使用Expo构建时才有效,但是由于目前(截至2017年)在React Native Blog的官方指南中建议使用,因此可能很多人都在使用它,因此除了值得一提的是有趣的解决方案入侵Android专用的XML配置文件。
For more info see: how to disable rotation in React Native? 有关更多信息,请参见: 如何在React Native中禁用旋转?
react-native-orientation - is no longer compatible with new version (I have tried 0.39.2). react-native-orientation-不再与新版本兼容(我已经尝试过0.39.2)。 After linking this module I have the compiler's error.
链接此模块后,出现编译器错误。 As I got it, now we should use react-native-orientation-listener
就我所知,现在我们应该使用react-native-orientation-listener
npm install --save react-native-orientation-listener npm install --save react-native-orientation-listener
rnpm link rnpm链接
Step:1 步骤1
npm install git+https://github.com/yamill/react-native-orientation.git --save
Step2: react-native link Step:3 Modify the MainApplication.java file with: 步骤2: react-native链接步骤:3 使用以下命令修改MainApplication.java文件:
import com.github.yamill.orientation.OrientationPackage;// import
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new OrientationPackage() //add this
);
}
You can use react-native-orientation-locker . 您可以使用react-native-orientation-locker 。
The 'react-native-orientation' has been deprecated. “反应本机取向”已被弃用。 Using the 'react-native-orientation-locker' component, you would be able to detect the current orientation, as well as locking it to Portrait/Landscape by using:
使用“ react-native-orientation-locker”组件,您将能够检测到当前方向,并通过以下方式将其锁定为“纵向/横向”:
Orientation.lockToPortrait();
Orientation.lockToLandscapeLeft();
Even release the locks using 甚至使用
Orientation.unlockAllOrientations();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.