特定 React Native 事件的流类型？答案

【问题标题】：Flow type for specific React Native events?特定 React Native 事件的流类型？
【发布时间】：2017-12-03 20:27:02
【问题描述】：

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

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

【问题讨论】：

是的，类型定义会很有用。我查看了源代码，但没有看到任何内容。似乎事件是在 Java 代码中定义的；例如，github.com/facebook/react-native/blob/master/ReactAndroid/src/…。贡献类型定义的地方是github.com/flowtype/flow-typed。如果您想花时间打包它们并提出拉取请求，我相信他们会欢迎您的自定义定义。

标签： javascript reactjs react-native flowtype

【解决方案1】：

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

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

而且看起来不错的地方是文件夹；

"react-native/Libraries/Types"

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

【讨论】：

【解决方案2】：

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

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

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

documentation 作为 ReactJS 的一部分在那里的类型上，如果定义了其中的任何一个，搜索本机代码库应该会出现。

从 v0.53 开始，支持似乎受到限制，因此您可能需要检查所获得的内容并自行推出。

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

【讨论】：

【解决方案3】：

由于它们以ViewPropTypes 导出，因此您可以使用

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

【讨论】：