Javascript 为什么当我尝试使用react-native钩子时,它不能正常工作?
当我尝试Javascript 为什么当我尝试使用react-native钩子时,它不能正常工作?,javascript,react-native,react-hooks,device-orientation,Javascript,React Native,React Hooks,Device Orientation,当我尝试console.log(useDeviceOrientation())时,我正在使用react native开发一个应用程序。纵向和横向期间的输出(真/假)没有改变。有人能帮忙吗 使用的库是:@react native community/hooks 我使用的API:useDeviceOrientation 我想做的是: 卸载库 重新安装相同的库 将库的依赖项添加到package.json 同样的问题也发生了。更改方向时没有更改 代码: //从“博览会状态栏”导入{StatusBar};
console.log(useDeviceOrientation())时,我正在使用react native开发一个应用程序代码>。纵向和横向期间的输出(真/假)没有改变。有人能帮忙吗
使用的库是:@react native community/hooks
我使用的API:useDeviceOrientation
我想做的是:
卸载库
重新安装相同的库
将库的依赖项添加到package.json
同样的问题也发生了。更改方向时没有更改
代码:
//从“博览会状态栏”导入{StatusBar};
从“React”导入React;
从“react native”导入{维度、样式表、安全区域视图、警报、按钮、平台、状态栏、视图};
从'@react native community/hooks'导入{useDimensions,useDeviceOrientation}
导出默认函数App(){
log(useDeviceOrientation());
const{scape}=useDeviceOrientation();
返回(
);
}
const styles=StyleSheet.create({
容器:{
弹性:1,
背景颜色:“fff”,
paddingTop:Platform.OS==“android”?状态栏。当前高度:0,
//辩护内容:“中心”,
//对齐项目:“中心”,
},
});
这对我很有用
const { height, width } = useDimensions().window;
const landscape = width > height;
我认为这是他们正在研究的一个已知问题:@ReadRise answer是一个很好的解决方案 这不需要第三方库。您可以简单地使用这种方法。
首先创建一个名为useOrientarion的功能组件
import { useWindowDimensions } from 'react-native';
const useOrientation = () => {
const height = useWindowDimensions().height;
const width = useWindowDimensions().width;
return { isPortrait: height > width };
};
export default useOrientation;
然后在你的组件中
// import useOrientation
import useOrientation from './useOrientation';
function App() {
const orientation = useOrientation();
console.log(orientation);
// use orientation wherever you want
// OUTPUT: {"isPortrait": true} or {"isPortrait": false}
}
你需要提供更多的细节。你没有提到你正在使用的库,你已经尝试过的…我想OP是说useDeviceOrientation钩子不起作用,因为我遇到了同样的问题,当方向改变时,它的值没有更新。这段代码非常有用,谢谢!
// import useOrientation
import useOrientation from './useOrientation';
function App() {
const orientation = useOrientation();
console.log(orientation);
// use orientation wherever you want
// OUTPUT: {"isPortrait": true} or {"isPortrait": false}
}