我刚开始一个新的React-Native
项目使用博览会。我正在尝试在任何设备上将屏幕方向锁定为纵向。使用expo
包中的ScreenOrientation
时,什么都没有发生。这就是为什么经过一些研究,我安装了expo-screen-orientation
包.
你可以在下面看到我的代码(非常简单):App.js
个
import { Text, StyleSheet, SafeAreaView } from "react-native";
import * as ScreenOrientation from "expo-screen-orientation";
export default function App() {
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
return (
<SafeAreaView style={styles.container}>
<Text>OK</Text>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
});
字符串
如果您想在iOS和Android智能手机上将方向屏幕锁定为纵向模式(在iPhone 13和Redmi Note 10上测试),则此代码有效。
当涉及到平板电脑时,事情开始变得复杂。即使使用ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
,屏幕仍然可以在iPad上旋转。
我不知道这个问题是来自app.json
文件还是来自App.js
文件。app.json
{
"expo": {
"name": "blank",
"slug": "blank",
"version": "1.0.0",
"platforms": ["ios", "android", "web"]
}
}
型
我没有任何ios/或android/文件夹,因为我使用以下命令和设置创建了项目:
> npx create-react-native-app project_name
> How would you like to start : Template from expo/examples
> Pick an example : blank
型
这就是为什么我不需要安装任何pod,也不需要通过XCode进行任何设置。下面是我的项目的树结构:
\
├── .expo/
├── .vscode/
├── node_modules/
├── .gitignore
├── App.js
├── app.json
├── babel.config.json
├── package.json
└── yarn.lock
型
我想分享一些对我有用的资源:
Expo Docs - Screen Orientation
expo-screen-orientation package的
1条答案
按热度按时间cnjp1d6j1#
看来这在iOS 9以来的iPad上是意料之中的,因为启用分屏功能的变化...
世博会文件
警告:苹果在iOS 9中为iPad添加了对拆分视图模式的支持。这改变了系统处理屏幕方向的方式。简言之,对于iOS,你的iPad总是处于横向模式,除非你并排打开两个应用程序。要使用此模块锁定屏幕方向,您需要禁用此功能的支持。有关拆分视图模式的更多信息,请查看Apple官方文稿。