让 ReactNative 组件获取当前窗口的高度和宽度 - Javascript

在 ReactNative 中，有时候需要获取当前窗口的高度和宽度，比如根据窗口大小设置组件的样式，或者根据窗口大小计算组件的位置等等。本文将介绍如何在 ReactNative 中获取当前窗口的高度和宽度。

获取窗口大小

ReactNative 提供了 Dimensions API 来获取窗口大小。使用 Dimensions API 首先需要导入 Dimensions：

import { Dimensions } from 'react-native';

然后使用 Dimensions API 就可以获取窗口大小了。例如：

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

以上代码分别获取了当前窗口的宽度和高度。Dimensions.get('window') 返回一个具有 width 和 height 属性的对象，分别表示窗口的宽度和高度。

需要注意的是，获取窗口大小只能在运行时进行，因为窗口大小可能在运行时改变。如果需要在组件初始化时就获取窗口大小，需要在组件的 constructor() 中或者 componentWillMount() 中获取。

监听窗口大小改变

如果需要监听窗口大小的改变，可以使用 Dimensions.addEventListener() 方法。例如：

const onWindowChange = () => {
  const windowWidth = Dimensions.get('window').width;
  const windowHeight = Dimensions.get('window').height;
  console.log('Window size changed:', windowWidth, windowHeight);
}

Dimensions.addEventListener('change', onWindowChange);

以上代码会在窗口大小改变时调用 onWindowChange() 方法，并打印窗口的新大小。

需要注意的是，每次窗口大小改变时都会调用 onWindowChange() 方法，因此计算窗口大小的逻辑应该放在 onWindowChange() 方法中。

封装获取窗口大小的 hook

为了方便在组件中使用，可以封装一个自定义 hook 来获取窗口大小。例如：

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

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(Dimensions.get('window'));

  useEffect(() => {
    const onWindowChange = () => {
      setWindowDimensions(Dimensions.get('window'));
    };

    Dimensions.addEventListener('change', onWindowChange);

    return () => {
      Dimensions.removeEventListener('change', onWindowChange);
    };
  }, []);

  return windowDimensions;
}

以上 hook 使用了 useState 和 useEffect，并监听窗口大小的改变。使用该 hook 可以在组件中方便地获取窗口大小。例如：

import React from 'react';
import { View } from 'react-native';
import useWindowDimensions from './useWindowDimensions';

export default function MyComponent() {
  const { width, height } = useWindowDimensions();
  const componentWidth = 0.9 * width;
  const componentHeight = 0.5 * height;

  return (
    <View style={{ width: componentWidth, height: componentHeight }}>
      // ...
    </View>
  );
}

结论

本文介绍了如何在 ReactNative 中获取当前窗口的高度和宽度，并封装了一个自定义 hook，方便在组件中使用。通过使用 Dimensions API 和监听 change 事件，可以实现在任何时候获取窗口大小，并根据窗口大小设置组件样式或位置等。