React Native 中 onLayout 事件的 TypeScript 类型

React Native是一种用于构建移动应用程序的开源框架，它允许开发人员使用JavaScript和React来创建跨平台的应用程序。在React Native中，onLayout事件是一种用于处理布局的事件，它提供了一个机制来获取和监测组件的布局信息。在本文中，我们将探讨React Native中onLayout事件的类型和使用方法，并提供一些案例代码来帮助读者更好地理解。

typescript
import { LayoutChangeEvent } from 'react-native';
const handleLayout = (event: LayoutChangeEvent): void => {
  const { layout } = event.nativeEvent;
  console.log('Component layout:', layout);
}
// 使用定义好的onLayout类型
const MyComponent: React.FC = () => {
  return (
    
      My Component
    
  );
}

typescript
import { useState } from 'react';
import { View, Text } from 'react-native';
const DynamicComponent: React.FC = () => {
  const [componentWidth, setComponentWidth] = useState(0);
  const [componentHeight, setComponentHeight] = useState(0);
  const handleLayout = (event: LayoutChangeEvent): void => {
    const { width, height } = event.nativeEvent.layout;
    setComponentWidth(width);
    setComponentHeight(height);
  }
  return (
    
      Component Width: {componentWidth}
      Component Height: {componentHeight}
    
  );
}