我正在使用React Native应用程序中的肖像模式。但是,我想捕获屏幕的旋转事件。 有没有方法可以实现这一点?
谢谢...
我正在使用React Native应用程序中的肖像模式。但是,我想捕获屏幕的旋转事件。 有没有方法可以实现这一点?
谢谢...
这个函数可能会对你有所帮助
创建一个useOrientation.js
文件
import {useEffect, useState} from 'react';
import {Dimensions} from 'react-native';
export function useOrientation(){
const [orientation, setOrientation] = useState("PORTRAIT");
useEffect(() => {
Dimensions.addEventListener('change', ({window:{width,height}})=>{
if (width<height) {
setOrientation("PORTRAIT")
} else {
setOrientation("LANDSCAPE")
}
})
}, []);
return orientation;
}
useEffect
中使用Dimensions.removeEventListener
来移除监听函数,以避免可能引发的内存问题。https://reactnative.dev/docs/dimensions - sandaru.nyDimensions.removeEventListener
已被弃用。请使用 addEventListener()
返回的事件订阅上的 remove()
方法。 - d_coderuseWindowDimensions()
会更容易。
https://reactnative.dev/docs/usewindowdimensions
只需在您的根组件中添加以下代码:const SCREEN_WIDTH = useWindowDimensions().width;
const SCREEN_HEIGHT = useWindowDimensions().height;
return (
<View style={{ width: SCREEN_WIDTH, minHeight: SCREEN_HEIGHT}} >
//the rest of your app
</View>
);
useEffect
中使用addEventListener
,而是添加了条件if (width<height)
并将宽度和高度添加到useEffect
的依赖数组中。它运行良好,您有其他想法吗? - Oliver Dconst { width, height } =...
- Dominic使用 useWindowDimensions
import {useWindowDimensions} from "react-native"
export function useIsLandscape() {
const {height, width} = useWindowDimensions()
return width > height
}
useDeviceOrientation: 将返回一个对象,每当设备更改方向时将更新该对象的值为"true"或"false"。
import { useDeviceOrientation } from "@react-native-community/hooks";
useDeviceOrientation
返回的示例对象:{
"landscape": false,
"portrait": true,
}
const { landscape } = useDeviceOrientation();
然后我们可以使用它:
height: landscape ? "100%" : "30%"
好的,您有几个选项。 您可以使用 Dimensions API https://reactnative.dev/docs/dimensions
您可以添加一个Dimensions.change监听器,并且可以执行以下操作:
function isPortrait() {
const dim = Dimension.get("screen")
return dim.height >= dim.width
}
function isLandscape() {
const dim = Dimension.get("screen")
return dim.width >= dim.height
}
Dimensions.addEventListener("change", () => {
// orientation has changed, check if it is portrait or landscape here
})
另一种可能性是使用可用的方向包之一,例如https://github.com/wonday/react-native-orientation-locker