reactjs - 扩展流 `type Props` 以包含来自另一个组件的 prop 类型？

Question

我有以下组件，主要依赖于react-native的Image

// @flow
import React from "react";
import { Image } from "react-native";
import { deviceWidth } from "../services/device";

type Props = {
  width: number,
  ratio: number
};

class RatioImage extends React.Component<Props> {
  render() {
    const { width, ratio, style, ...props } = this.props;
    return (
      <Image
        {...props}
        style={[
          {
            width: deviceWidth * (width / 100),
            height: deviceWidth * (width / 100) * ratio
          },
          style
        ]}
      />
    );
  }
}

export default RatioImage;

我能够输入注释我自己的 Prop ，但在上面的示例中 style 抛出错误

[flow] property style (Property not found in Props) const style: any

我知道在 typescript 中我可以将接口(interface)扩展到图像之一，我可以使用流程中的某些东西来使我的 Prop 以某种方式继承Image的所有类型吗？我如何从react-native导入此类类型？

编辑我发现了称为交叉类型的概念并尝试了这个

import { Image, type Image as ImageProps } from "react-native";
type Props = ImageProps & {
  width: number,
  ratio: number
};

但是样式仍然抛出错误，尽管不同

[flow] property style (Property cannot be accessed on any member of intersection type intersection Member 1: ImageProps Error: property style Property not found in React component Member 2: object type Error: property style Property not found in object type) const style: any

Answer 1

不幸的是，React Native 在使用流类型的方式上并不是 100% 一致。

如果您尝试对 Text 组件执行相同的操作，则只需从全局 Haste 命名空间提供的内部 TextProps 模块导入类型定义，然后使用 Flow 类型联合创建您自己的父类(super class)型:

import type { TextProps } from 'TextProps';

type ExtendedTextProps = TextProps & {
  additionalProp: string
};

也就是说，没有可供您导入的 ImageProps 模块。如果你看Image (iOS) component types ，它们仍然表示为 PropTypes。

目前，我相信，为自定义图像组件添加完整类型覆盖的最简单方法是查看图像组件的 PropTypes 并手动将它们转换为 Flow 类型。一些更复杂的字段类型，例如 ImageSource和 ImageStyle已经作为流类型存在。

我不确定核心团队的意图是什么，但可能值得考虑将类型定义贡献给 React Native 本身并为 future 的用户解决这个问题。