我应该检查哪种道具类型需要来源？

Question

我正在写一个基于react native的项目。我正在使用prop-types进行组件的类型检查。现在我想在我自己的Image组件中包装react-native的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')} />

实际上，我在我自己的source组件中检查了Image道具。

source: PropTypes.any.isRequired

但事实并非如此。我知道。我不知道我应该在那里写什么。我在这里查看了require函数返回值的类型是什么？

Answer 1

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

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

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

但我认为正确的答案是使用React Native组件道具类型为source：

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

更新：

另外，确切的答案是在source源代码中使用react-native prop类型，所以最好的答案就像下面的代码：

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

首先，您正在导入Image，如：

import { Image as ImageNative } from 'react-native';

并定义Image常数如下：

const Image = ({ style, source }) => (

您应该为组件应用不同的名称或导入为不同的名称。

现在，对于您的查询，您不应该像以下一样使用源：

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

而是提供如下来源：

source={'splashSignInAsset.png'}

在组件中，应用require和path。你可以输入string或customProp来检查它的扩展名，例如png，jpg或你想要限制的任何东西。

const imgSource = `assets/images/${source}`;
<ImportedImageName source={require(imgSource)} style={style} />

YourImageComponent.propTypes = {
   source: PropTypes.string.isRequired
}

或者，定制道具：

source: function(props, propName, componentName) {
    if (!/.(jpg|jpeg|png|gif)$/i.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },