获取 React Native 视图的宽度和高度

有时候，在 React Native 中，我们需要获取一个视图的宽度和高度。这可能是因为我们需要根据视图的大小来布局其他组件，或者需要根据它们的大小调整某些样式。

在 React Native 中，我们可以使用 onLayout 属性获取视图的宽度和高度。onLayout 是一个回调函数，当组件的布局发生变化时被调用。在这个回调函数中，我们可以访问视图的布局信息，例如它的宽度、高度、位置等。

下面是一个获取视图宽度和高度的示例代码：

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

const App = () => {
  const [layout, setLayout] = useState({ width: 0, height: 0 });

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

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

export default App;

在这个例子中，我们使用了 useState Hook 来存储视图的布局信息。当视图的布局发生变化时，handleLayout 函数会被调用，它会从 event.nativeEvent.layout 中获取视图的宽度和高度，并使用 setLayout 函数将它们保存下来。

最后，我们在 JSX 中渲染了一个 View 和两个 Text 组件来展示宽度和高度。

这就是如何在 React Native 中获取视图的宽度和高度！记得在组件挂载时获取它们的布局大小，以便在其他组件渲染前就能够进行布局计算。

参考资料：

• React Native 文档