Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/react-native/7.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 为什么当我尝试使用react-native钩子时,它不能正常工作?_Javascript_React Native_React Hooks_Device Orientation - Fatal编程技术网

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}
    }