扩展流“类型道具”以包括来自其他组件的道具类型？

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;

我能够输入注释我自己的道具，但在上面的例子中style抛出了一个错误

[flow]属性<代码>样式（在道具中找不到属性）常量样式：任意

我知道在typescript中，我可以将接口扩展到Image one，流程中是否有一些东西可以让我的道具以某种方式从Image继承所有类型？我如何从react native导入这些类型？

编辑我发现了一个叫做交叉点类型的概念，并尝试了这个

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

但风格仍然抛出了一个错误，尽管是不同的错误

[flow]propertystyle（无法在交叉点类型的任何成员上访问属性交叉点成员1:ImageProps错误：在React组件成员中未找到属性style属性2:对象类型错误：在对象类型中未找到属性style属性）常量样式：任意

Answer 1

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

如果您试图对Text组件执行相同的操作，您可以简单地从全局Hati命名空间提供的内部TextProps模块导入类型定义，并使用Flow类型联合创建自己的超类型：

import type { TextProps } from 'TextProps';

type ExtendedTextProps = TextProps & {
  additionalProp: string
};

也就是说，没有用于导入的ImageProps模块。如果查看Image（iOS）组件类型，它们仍然表示为PropType。

此时，我相信，为自定义图像组件添加完整类型覆盖的最简单方法是查看图像组件的proptype并手动将其转换为流类型。一些更复杂的字段类型（如ImageSource和ImageStyle）已作为流类型存在。

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