扩展流“类型道具”以包含来自另一个组件的道具类型？

Question

我有以下主要依赖于Imagereact-native 的组件

// @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] 属性style(Property not found in Props) const style: any

我知道在打字稿中我可以将接口扩展到 Image one，我可以使用流程中的某些东西来使我的道具Image以某种方式继承所有类型吗？我什至如何从 react-native 导入这些类型？

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

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

但风格仍然抛出错误，虽然不同

[flow] 属性style（无法在交集类型的任何成员上访问属性交集成员 1：ImageProps 错误：style在 React 组件中找不到属性 属性成员 2：对象类型错误：style在对象类型中找不到属性属性） const 样式：任何

Answer 1

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

如果你想对Text组件做同样的事情，你可以简单地从TextProps全局 Haste 命名空间提供的内部模块中导入类型定义，并使用 Flow 类型联合创建你自己的超类型：

import type { TextProps } from 'TextProps';

type ExtendedTextProps = TextProps & {
  additionalProp: string
};

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

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

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