特定React Native事件的流类型？

Question

为了flowtype事件，我定义了如下自定义类型：

export type OnScrollEvent = {
  nativeEvent: {
    contentOffset: {
      y: number
    },
    contentSize: {
      height: number
    }
  }
}

显然，有几个缺失的属性（如x和width），但我还没有它们。

我试图找到RN的相似类型，但只找到一个似乎没有特别有用的Event类型：

import type {Event} from "react-native";

handleEvent = (e: Event) => console.log(e.inexistentProperty)  // Flow doesn't care!

React Native事件是否有任何现有的流类型，还是我必须自己定义它们？

更新

它们似乎分散在代码库中。这是布局事件类型：

export type ViewLayout = {
  x: number,
  y: number,
  width: number,
  height: number,
}

export type ViewLayoutEvent = {
  nativeEvent: {
    layout: ViewLayout,
  }
}

发现于ViewPropTypes.js

Answer 1

看看SyntheticEvent类型。 PressEvent和ScrollEvent有基本定义。您可以将类型传递给泛型SynthenticEvent类型以定义您需要的任何其他内容。成员'nativeEvent'获取您的自定义类型。

function handler(e: SyntheticEvent<CustomType>): void {
  // e.nativeEvent...
}

我还没有玩那么多，但很快就会这样做。

在那里的类型中有documentation作为ReactJS的一部分，如果定义了任何这些类型，那么搜索Native代码库应该会出现。

看起来支持在v0.53中受到限制，因此您可能必须检查所获得的内容并自行推送。

Leyland Richardson maintains a Gist与RN类型，但这不包括事件。

Answer 2

你需要扮演一些侦探（正如你所注意到的）。以下位置有几种事件类型。

import {type ScrollEvent} from "react-native/Libraries/Types/CoreEventTypes";

它看起来像一个好看的地方是文件夹;

"react-native/Libraries/Types"

在任何其他情况下，跳转到源代码并从您尝试查找事件的组件开始。通常，找到这种类型非常简单，虽然很烦人。

Answer 3

由于它们是在ViewPropTypes出口，你可以使用

import type { ViewLayoutEvent } from 'react-native/Libraries/Components/View/ViewPropTypes';