React Native中onLayout事件的TypeScript类型

Question

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

const handleOnLayout = (e: SomeTypeHere) => {
// stuff
};
<View onLayout={handleOnLayout}>
<Text>Hi</Text>
</View>

Answer 1

此方法返回具有以下属性的LayoutChangeEvent{nativeEvent: { layout: {x, y, width, height}}}

导入方式：

import { LayoutChangeEvent } from "react-native";

源

Answer 2

Murmlettiers链接到源代码很有帮助！我现在使用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>();