在React应用中，获取窗口尺寸是一个常见的需求，无论是用于布局适配还是实现动态效果。本文将详细介绍如何在React应用中轻松获取窗口尺寸。

基本方法

React Native 提供了 Dimensions API，可以方便地获取设备屏幕的宽高。以下是一个基本的示例：

import { Dimensions } from 'react-native';

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

console.log(`Window width: ${windowWidth}`);
console.log(`Window height: ${windowHeight}`);

在这个例子中，我们使用 Dimensions.get('window') 方法来获取当前窗口的尺寸，然后通过 .width 和 .height 属性来分别获取宽度和高度。

监听窗口尺寸变化

在某些情况下，你可能需要监听窗口尺寸的变化，以便在窗口大小改变时执行特定的操作。这时，你可以使用 Dimensions.addEventListener 方法：

import { Dimensions } from 'react-native';

const handleResize = ({ windowWidth, windowHeight }) => {
  console.log(`Window resized: width: ${windowWidth}, height: ${windowHeight}`);
};

Dimensions.addEventListener('change', handleResize);

// 在组件卸载时，记得移除事件
Dimensions.removeEventListener('change', handleResize);

在这个例子中，我们定义了一个 handleResize 函数，它会在窗口尺寸变化时被调用，并打印出新的窗口尺寸。

使用 useWindowDimensions 钩子

如果你正在使用函数组件，React Native 提供了 useWindowDimensions 钩子，它可以让你在组件中方便地获取窗口尺寸：

import { useWindowDimensions } from 'react-native';

function MyComponent() {
  const { width, height } = useWindowDimensions();

  return (
    <View style={{ width, height, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Window width: {width}</Text>
      <Text>Window height: {height}</Text>
    </View>
  );
}

在这个例子中，我们使用 useWindowDimensions 钩子来获取当前的窗口尺寸，并将其作为 View 组件的样式属性。

总结

获取React应用中的窗口尺寸有多种方法，你可以根据具体的需求选择合适的方法。无论使用哪种方法，都可以让你的React应用更加灵活和响应式。