Question

我正在基于react native编写一个项目。我正在使用prop-types进行组件的类型检查。现在我想将Image的{{1}}组件包装到自己的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属性为 any 。

Image

但这不是事实。我知道。我不知道该写些什么。我在此处检查过的source: PropTypes.any.isRequired函数返回值的类型是什么？

Answer 1

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

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

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道具类型，因此最佳答案类似于以下代码：

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']将从软件包中返回正确的类型，并且还会收到进一步的更新。

Answer 3

首先，您要像这样导入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键入check，这将测试其扩展名，例如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.'
      );
    }
  },

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

3 个答案:

更新：