为什么当我尝试使用react原生钩子时，它不能像预期的那样正常工作？

xxhby3vn 于 2023-02-09 发布在 React

关注(0)|答案(4)|浏览(118)

我正在使用react native开发一个应用程序，当我尝试console.log(useDeviceOrientation());时。纵向和横向的输出（true/false）没有改变。有人能帮忙吗？
使用的库为：@React-原生-社区/钩子
我使用的API：使用设备方向
我尝试做的是：
1.卸载存储库
1.重新安装相同的存储库
1.将库的依赖项添加到package.json
1.发生相同的问题。更改方向时没有更改
代码：

// import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Dimensions, StyleSheet, SafeAreaView, Alert, Button, Platform, StatusBar, View } from 'react-native';
import { useDimensions, useDeviceOrientation } from '@react-native-community/hooks'

export default function App() {
  console.log(useDeviceOrientation());
  const { landscape } = useDeviceOrientation();

  return (
    <SafeAreaView style={styles.container}>
      <View style={{
        backgroundColor: "dodgerblue",
        width: "100%",
        height: landscape ? "100%" : "30%",
      }}
      ></View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    // justifyContent: "center",
    // alignItems: "center",
  },
});

react-native

来源：https://stackoverflow.com/questions/64724129/why-when-i-try-to-use-react-native-hooks-it-does-not-work-properly-as-intended-t

4条答案

按热度按时间

c8ib6hqw1#

这不需要第三方库，你可以使用这种方法，首先创建一个名为useOrientarion的功能组件，

import { useWindowDimensions } from 'react-native';

const useOrientation = () => {
  const { width, height } = useWindowDimensions();

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

赞(0）回复(0）举报 2023-02-09

deyfvvtc2#

对我很有效。

const { height, width } = useDimensions().window;
const landscape = width > height;

React原生群落

赞(0）回复(0）举报 2023-02-09

sqxo8psd3#

我认为这是他们正在解决的一个已知问题：https://github.com/react-native-community/hooks/issues/210. @ReadRise答案作为一个解决方案效果很好！

赞(0）回复(0）举报 2023-02-09

cig3rfwq4#

我也有同样的问题停止应用程序并重新构建就足以修复它。

赞(0）回复(0）举报 2023-02-09

我来回答

为什么当我尝试使用react原生钩子时，它不能像预期的那样正常工作？

4条答案

相关问题

热门标签

最新问答