如何使用本机反应在样式表文件中获取 window 宽度和高度？

Question

我有一个 function 用于在更改布局时检测 window 宽度和高度。

用于检测宽度和高度的 function 工作正常，但问题是在样式表文件中使用它们。

错误是：无效的钩子调用。 钩子只能在 function 组件的内部调用。

我的Function：

import { useEffect, useCallback, useState } from 'react';
import { Dimensions } from 'react-native';

export function useDimensions () {

    const [windowWidth, setWindowWidth] = useState(Dimensions.get('window').width);
    const [windowHeight, setWindowHeight] = useState(Dimensions.get('window').height);

    useEffect(() => {
        
        const callback = () => {
            setWindowWidth(Dimensions.get('window').width);
            setWindowHeight(Dimensions.get('window').height);
        }
    
        Dimensions.addEventListener('change', callback);
    
    }, []);
  
    return {windowWidth, windowHeight};
};

这是我在样式表（自定义全局样式表文件）中尝试过的内容：

import { StyleSheet } from "react-native";
import Colors from "./Colors";
import { windowHeight, windowWidth } from '../App/Components/Dimensions';
import { useDimensions } from '../App/Components/TestDimesions';

// Here is the problem : Invalid hook call...
const orientation = useDimensions();

const Global = StyleSheet.create({
test:{
 width: windowWidht
}
});

export default Global

Answer 1

你只能在 React 组件中使用钩子。 由于useDimensions是一个钩子，你只能像这样使用它：

function MyComponent() {
  const orientation = useDimensions();

  return (
    <View style={[styles.test, { width: orientation.windowWidth }]} />
  )
}

Answer 2

除了必须在 function 内部调用挂钩之外，还应删除 useEffect 中的事件监听器。

useEffect(() => {
    //here 
    const listener = Dimensions.addEventListener('change', callback);
    return () => listener.remove();
}, []);

Answer 3

使用可以简单地通过window.innerHeight和window.innerWidth获得高度和宽度。 通过这两个你可以得到windows的高度和宽度。

Answer 4

您可以像这样更新您的 function：

import { Dimensions } from 'react-native';

export const ScreenWidth = Dimensions.get('window').width;
export const ScreenHeight = Dimensions.get('window').height;

您可以通过导入来使用它：

import { StyleSheet } from "react-native";
import Colors from "./Colors";
import { ScreenWidth, ScreenHeight } from '../App/Components/TestDimesions';

const Global = StyleSheet.create({
  test:{
    width: ScreenWidth,
  }
});

export default Global