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] property style（在道具中找不到属性）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] property style（无法访问任何成员的属性交集类型交集成员1：ImageProps错误：属性 style在React组件中找不到属性成员2：对象类型错误：属性style在对象类型中找不到属性）const 风格：任何

Answer 1

不幸的是，React Native在使用flowtypes的方式上并不是100％一致。

如果您尝试对Text组件执行相同操作，则只需从全局Haste命名空间提供的内部TextProps模块中导入类型定义，然后使用Flow创建自己的超类型类型工会：

import type { TextProps } from 'TextProps';

type ExtendedTextProps = TextProps & {
  additionalProp: string
};

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

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

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

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

1 个答案: