如何解决为什么当我尝试使用react native钩子时无法按预期正常工作?
当我尝试console.log(useDeviceOrientation());
时,我正在使用react native开发应用程序。人像和风景期间的输出( true / false )不变。有人可以帮忙吗?
使用的库为:@ react-native-community / hooks
我使用的API:useDeviceOrientation
我想做什么:
- 卸载库
- 重新安装相同的库
- 将库的依赖项添加到package.json
- 发生了相同的问题。改变方向时保持不变
代码:
// 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",},});
解决方法
对我有用。
#make data long using tidyr
df_long <- tidyr::pivot_longer(df,cols = c("loc1","loc2","loc3"))
#cartesian join with codes column
CJ(df_long$value,df2)
,
我相信这是他们正在解决的一个已知问题:https://github.com/react-native-community/hooks/issues/210。不过,@ReadRise 答案作为一种解决方法效果很好!
,为此不需要第 3 方库。您可以简单地使用这种方法。 首先创建一个名为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}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。