我刚刚开始使用 React-native,并且对用于创建 Web 应用程序的 React 有相当不错的掌握...我在这里遇到了一个令人困惑的问题,而在使用 React 进行 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”的 Prop “source”无效,请检查“BasicComponent”的渲染方法”
有人知道这里会发生什么吗?
最佳答案
您应该需要本地 Assets 或使用带有 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}}
/>
);
关于javascript - 图像组件上的 React-native 失败 propType,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36460827/