React Native中onLayout事件的TypeScript类型？

Question

我如何在TypeScript中指定React Native的onLayout事件的类型？

  const handleOnLayout = (e: SomeTypeHere) => {
    // stuff
  };

  <View onLayout={handleOnLayout}>
    <Text>Hi</Text>
  </View>

- Evanss

Answer 1

该方法返回一个具有以下属性的 LayoutChangeEvent 对象 {nativeEvent: { layout: {x, y, width, height}}}

导入方式：

import { LayoutChangeEvent } from "react-native";

来源

- Murmeltier

Answer 2

Murmletiers提供的源链接很有帮助！我现在正在使用LayoutRectangle，因为这是我要查找的类型定义：

   export interface LayoutRectangle {
        x: number;
        y: number;
        width: number;
        height: number;
    }

    // @see TextProperties.onLayout
    export interface LayoutChangeEvent {
        nativeEvent: {
            layout: LayoutRectangle
        }
    }

使用方法

import { LayoutRectangle } from "react-native";

const [layout, setLayout] = useState<LayoutRectangle>();

- Michael Brenndoerfer