代码之家 › 专栏 › 技术社区 › Palisand

特定React本机事件的流类型?

flowtype react-native reactjs javascript

13

Palisand · 技术社区 · 8 年前

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原生事件是否有任何现有的流类型,或者我必须自己定义它们吗?

它们似乎分散在代码库中。以下是布局事件类型:

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

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

ViewPropTypes.js

3 回复 | 直到 7 年前

1

7

marcusstenbeck 6 年前

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

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

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

"react-native/Libraries/Types"

2

4

Dave Meehan 7 年前

看看 SyntheticEvent

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

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

有 documentation 作为ReactJS中类型的一部分,如果定义了任何一种类型,则应该搜索本机代码库。

莱兰德·理查森 maintains a Gist 使用RN类型,但这不包括事件。

3

Fabio Crisci 7 年前

因为它们是在 ViewPropTypes 您可以使用

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