javascript - 我应该检查哪种 Prop 类型以获取来源？

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 函数返回值的类型是什么？

Answer 1

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

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

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 prop type，所以最好的答案就像下面的代码:

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)
    })
  )
])