我正在编写一个基于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
函数返回值的类型是什么?
最佳答案
实际上,我拒绝使用任何
。好的答案是 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)
})
)
])
关于javascript - 我应该检查哪种 Prop 类型以获取来源?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52720585/