在 React Native 中获取视图的大小 - Javascript

在 React Native 中，有时候我们需要获取一个视图的大小，这时候我们可以使用 onLayout 属性和 measure 方法来实现。

1. 使用 onLayout 属性

当一个视图的大小或位置发生改变时，onLayout 属性会被触发，我们可以在这个属性中获取到视图的大小和位置信息。

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';

const Example = () => {
  const [height, setHeight] = useState(0);
  const [width, setWidth] = useState(0);

  const handleLayout = event => {
    const { height, width } = event.nativeEvent.layout;
    setHeight(height);
    setWidth(width);
  }

  return (
    <View onLayout={handleLayout}>
      <Text>Height: {height}</Text>
      <Text>Width: {width}</Text>
    </View>
  );
};

export default Example;

在上面的代码中，我们通过 useState 定义了 height 和 width 两个状态。当视图的大小发生变化时，我们可以通过 handleLayout 函数来获取新的高度和宽度，并将它们保存在状态中。最后，在组件中渲染两个 Text 组件，分别显示当前视图的高度和宽度。

2. 使用 measure 方法

除了 onLayout 属性，我们还可以使用视图的 measure 方法来获取其大小和位置信息。需要注意的是，该方法需要在视图已经渲染到屏幕上后调用，并且它会返回一个包含四个属性的对象，分别是视图的位置坐标、宽度和高度。

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';

const Example = () => {
  const [height, setHeight] = useState(0);
  const [width, setWidth] = useState(0);

  const handleMeasure = () => {
    viewRef.current.measure((x, y, width, height, pageX, pageY) => {
      setHeight(height);
      setWidth(width);
    });
  }

  const viewRef = React.useRef();

  useEffect(() => {
    handleMeasure();
  }, [])

  return (
    <View ref={viewRef}>
      <Text>Height: {height}</Text>
      <Text>Width: {width}</Text>
    </View>
  );
};

export default Example;

在上面的代码中，我们定义了 handleMeasure 函数来获取视图的大小信息，并将这些信息保存在 height 和 width 两个状态中。为了使用 measure 方法，我们创建了一个 viewRef 引用，并将其传递给视图的 ref 属性中。最后，在组件的 useEffect 钩子函数中调用 handleMeasure 函数来获取并更新视图的大小信息。