使用带有 react-native 的流

Question

我是 flow 新手，我没有成功将它与 react-native 一起正确使用。我不明白我应该如何加载 RN 类型。 例如，我正在尝试键入一个返回 nativeEvent.layout 的函数，该函数的类型为 LayoutRectangle。

我试过了：import * as RN from 'react-native';

但按原样使用它会给我Cannot resolve name LayoutRectangle 和RN.LayoutRectangle 给我：Cannot get RN.LayoutRectangle because property LayoutRectangle is missing in module react-native [1]

这是我正在尝试制作的示例组件。

// @flow
import * as React from 'react';
import * as RN from 'react-native';

type CompReference = {
  getLocation?: () => LayoutRectangle,
}
type Ref<T> = {
  current: null | T
}
type Props = {
  value: string
}

function CompFunction({value = ''}: Props = {}, ref: CompReference & Ref<HTMLElement> = {}) {
    const location: LayoutRectangle = React.useRef(null);
    ref.getLocation = () => location.current || { height: 0, width: 0, x: 0, y: 0 };
    return (<RN.Text onLayout={({nativeEvent}) => location.current = nativeEvent.layout}>{value}</RN.Text>);
}

const Comp = React.forwardRef<Props, CompReference & Ref<HTMLElement>>(CompFunction);
Comp.displayName = 'Comp';

export default Comp;

我也收到有关 forwardRef 的错误：

Cannot call `React.forwardRef` with `CompFunction` bound to `render` because property `current` is missing in function type [1] but exists in `Ref` [2] in the second argument. (index.js:34:76)flow
Cannot call `React.forwardRef` with `LetterFunction` bound to `render` because property `getLocation` is missing in object type [1] but exists in `CompReference` [2] in the second argument. (index.js:34:76)flow
Cannot call `React.forwardRef` with `CompFunction` bound to `render` because property `getLocation` is missing in statics of function type [1] but exists in `CompReference` [2] in the second argument. (index.js:34:76)flow
Cannot call `React.forwardRef` with `CompFunction` bound to `render` because property `current` is missing in `HTMLElement` [1] but exists in `Ref` [2] in property `current` of the second argument. (index.js:34:76)flow
Cannot call `React.forwardRef` with `CompFunction` bound to `render` because in property `current` of the second argument: Either `CompReference` [1] is incompatible with `HTMLElement` [2]. Or `Ref` [3] is incompatible with `HTMLElement` [2]. (index.js:34:76)flow

我做错了什么？

Answer 1

使用 Flow 时，需要导入类型。

所以你需要添加类似的东西

// @flow
import * as React from 'react';
import * as RN from 'react-native';
import type {LayoutRectangle} from 'CoreEventTypes'; //Or wherever your type LayoutRectangle is defined

_{请注意，我可能没有与您相同的 RN 版本，因为在我没有 current 属性的版本中，nativeEvent.layout 的类型为 Layout。}

注意：如果类型没有导出到任何地方，您可以使用：

import typeof {LayoutRectangle} from 'react-native';

来源：https://flow.org/en/docs/types/modules/#importing-and-exporting-types-