特定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...
}

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

在那里的类型上有作为ReactJS的一部分的文档 ，如果定义了任何这些类型，则应该查找Native代码库。

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

Leyland Richardson 坚持使用RN类型的Gist ，但这不包括事件。

Answer 2

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

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

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

"react-native/Libraries/Types"

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

Answer 3

由于它们是在ViewPropTypes中导出的， ViewPropTypes您可以使用它们

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