我刚开始使用React- native,并且对React用于创建Web应用程序有相当的了解…在这里,我遇到了一个令人困惑的问题,在为Web使用React时从未发生过。
基本上,我正在渲染一个组件,该组件的映像是通过映射其父组件中的对象数组来动态生成的。
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’的渲染方法”
有人知道这里会发生什么吗?
您应该要求本地资产或将对象与uri密钥一起使用。
uri
因此,无论在MainComponent:
MainComponent
this.state = { images:[ require('./src/images/1.png'), require('./src/images/2.png'), require('./src/images/3.png') ] }
或在BasicComponent:
BasicComponent
return ( <Image source={{uri: this.props.source}} /> );