[英]React-native failed propType on Image component
我刚刚开始使用 React-native 并且对用于创建 Web 应用程序的 React 有相当不错的掌握......我在这里遇到了一个令人困惑的问题,在使用 React for Web 时从未发生过。
基本上,我正在渲染一个组件,该组件的图像是通过映射其父组件中的对象数组来动态生成的。
export default class ImageComponent extends React.Component {
render() {
return (
<Image source={this.props.source}/>
);
}
};
及其父组件:
export default class MainComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
images:[
{ src: './src/images/1.png'},
{ src: '/src/images/2.png'},
{ src: './src/images/3.png'}
]
}
}
render() {
let images = this.state.images.map((image) => {
return(<ImageComponent source={image.src} />);
})
return (
<View>
{images}
</View>
);
}
};
在设备模拟器中,我收到以下错误:
“警告:失败 propType:提供给 'Image' 的无效道具 'source' 检查 'BasicComponent' 的渲染方法”
有谁知道这里会发生什么?
您应该需要本地资产或使用带有uri
键的对象。
所以无论是在MainComponent
:
this.state = {
images:[
require('./src/images/1.png'),
require('./src/images/2.png'),
require('./src/images/3.png')
]
}
或在BasicComponent
:
return (
<Image
source={{uri: this.props.source}}
/>
);
你应该使用 uri 来设置源图像
return ( <Image source={{uri: 'https://reactnative.dev/docs/assets/p_cat2.png'}} /> );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.