我应该检查哪种道具类型以获取来源？

Question

我正在写一个基于 react native 的项目。我正在使用 prop-types 对组件进行类型检查。现在我想将 react-native 的 Image 组件包装在我自己的 Image 组件中。在下面的代码中看到我自己的 Image 组件：

import React from 'react';
import { Image as ImageNative } from 'react-native';
import PropTypes from 'prop-types';

const Image = ({ style, source }) => (
  <ImageNative source={source} style={style} />
);

Image.defaultProps = {
  style: {}
};

Image.propTypes = {
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  source: PropTypes.any.isRequired
};

export default Image;

每个我决定使用自己的 Image 组件的地方，我都会导入它并像下面这样使用它：

<Image source={require('assets/images/splashSignInAsset.png')} />

实际上，我在我自己的 Image 组件中检查了 source 道具作为 any.

source: PropTypes.any.isRequired

但事实并非如此。我知道。我不知道我应该在那里写什么。我在此处检查的 require 函数 return 值的类型是什么？

Answer 1

实际上，我拒绝使用any。好的答案是 node.

当我在 Image 组件中插入 require('assets/images/splashSignInAsset.png') 函数时，我必须检查 node 属性类型，如下所示：

Image.propTypes = {
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  source: PropTypes.node.isRequired
};

但我认为正确的答案是对 source:

使用 React Native 组件道具类型

import { Image as ImageNative } from 'react-native';
...
Image.propTypes = {
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  source: ImageNative.propTypes.source.isRequired
};

更新：

此外，确切的答案是在 react-native 源代码中使用 source 属性类型，因此最佳答案如下代码所示：

source: PropTypes.oneOfType([
  PropTypes.shape({
    uri: PropTypes.string,
    headers: PropTypes.objectOf(PropTypes.string)
  }),
  PropTypes.number,
  PropTypes.arrayOf(
    PropTypes.shape({
      uri: PropTypes.string,
      width: PropTypes.number,
      height: PropTypes.number,
      headers: PropTypes.objectOf(PropTypes.string)
    })
  )
])

Answer 2

目前可以将此语句作为一种类型：

import { ImageProps } from 'react-native';

interface Props {
  imageSource: ImageProps['source'];
}

其中 ImageProps['source'] 将 return 包中的正确类型并接收进一步的更新。

我应该检查哪种道具类型以获取来源？

What prop type should I check for requiring the source?

javascript

reactjs

react-native

react-proptypes

更新：