React Native：样式表中获取窗口宽高及解决无效Hook调用问题

这个错误的核心是React Hook的调用规则：所有Hook必须在函数组件的顶层作用域，或者其他自定义Hook内部调用，绝对不能在组件外部、普通JS文件的全局作用域里直接执行。你的样式表文件是普通JS模块，不是React函数组件，所以直接调用useDimensions()肯定会触发这个报错。

要在样式里用动态窗口尺寸，有两种靠谱的方案：

方案1：组件内动态生成样式 #

把全局样式改成能接收尺寸参数的函数，在函数组件里先调用Hook拿到最新尺寸，再生成对应样式。

1. 改写全局样式文件：

import { StyleSheet } from "react-native";
import Colors from "./Colors";

// 改成接收width/height参数的函数
export const createGlobalStyles = (windowWidth, windowHeight) => StyleSheet.create({
  test: {
    width: windowWidth,
    // 其他依赖尺寸的样式也可以这么写
    height: windowHeight * 0.5
  }
});

2. 在组件里使用：

import { createGlobalStyles } from './path/to/GlobalStyles';
import { useDimensions } from '../App/Components/TestDimesions';

function MyComponent() {
  const { windowWidth, windowHeight } = useDimensions();
  const styles = createGlobalStyles(windowWidth, windowHeight);

  return <View style={styles.test}></View>;
}

方案2：静态尺寸+监听更新（非Hook） #

如果不想每个组件都处理，可以单独搞个尺寸管理模块，用非Hook的方式监听尺寸变化，导出动态变量，然后在样式文件里引用。

1. 新建DimensionService.js：

import { Dimensions } from 'react-native';

let windowWidth = Dimensions.get('window').width;
let windowHeight = Dimensions.get('window').height;

// 监听尺寸变化，实时更新变量
Dimensions.addEventListener('change', ({ window }) => {
  windowWidth = window.width;
  windowHeight = window.height;
});

export { windowWidth, windowHeight };

2. 在样式文件里引用：

import { StyleSheet } from "react-native";
import Colors from "./Colors";
import { windowWidth, windowHeight } from './DimensionService';

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

export default Global;

注意：这种方式有个局限——样式是模块加载时静态创建的，后续尺寸变化不会自动更新样式。如果需要尺寸变了样式跟着变，还是选方案1更稳妥。

你的Hook里没写事件监听的清理逻辑，会导致内存泄漏，补上就行：

import { useEffect, 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 = ({ window }) => {
            setWindowWidth(window.width);
            setWindowHeight(window.height);
        }
    
        Dimensions.addEventListener('change', callback);

        // 组件卸载时移除监听，避免内存泄漏
        return () => {
          Dimensions.removeEventListener('change', callback);
        };
    }, []);
  
    return {windowWidth, windowHeight};
};

内容的提问来源于stack exchange，提问作者Mahdi