我应该检查什么道具类型以要求来源？答案

【问题标题】：What prop type should I check for requiring the source?我应该检查什么道具类型以要求来源？
【发布时间】：2018-10-09 11:59:45
【问题描述】：

我正在编写一个基于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函数返回值的类型是什么？

【问题讨论】：

标签： javascript reactjs react-native react-proptypes

【解决方案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)
    })
  )
])

【讨论】：

【解决方案2】：

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

import { ImageProps } from 'react-native';

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

ImageProps['source'] 将从包中返回正确的类型，并且还会收到进一步的更新。

【讨论】：

很高兴帮助@AmerllicA :)
_reactNative.ImageProps 未定义？ v0.61.5