代码之家 › 专栏 › 技术社区 › AmerllicA

我应该检查什么样的道具类型以获取来源?

react-proptypes react-native reactjs javascript

1

AmerllicA · 技术社区 · 7 年前

我在写一个基于 react native prop-types 用于部件的类型检查。现在我要打包了 Image react-native 在我自己的世界里 图像 图像 组成部分:

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 source={require('assets/images/splashSignInAsset.png')} />

source 我自己的道具 图像 任何

source: PropTypes.any.isRequired

但这不是真的。我知道。我不知道我应该在那里写什么。这是什么类型的 require 我在这里检查的函数返回值?

2 回复 | 直到 7 年前

1

AmerllicA 5 年前

当前可以将此语句作为类型:

import { ImageProps } from 'react-native';

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

在哪里? ImageProps['source']

2

16

AmerllicA 7 年前

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

当我插入 require('assets/images/splashSignInAsset.png') 功能在我的 Image 道具类型,如下所示:

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
};

来源 中的道具类型 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)
    })
  )
])