小编典典

图像组件上的React-native失败propType

reactjs

我刚开始使用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’的渲染方法”

有人知道这里会发生什么吗?


阅读 212

收藏
2020-07-22

共1个答案

小编典典

您应该要求本地资产或将对象与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}}
  />
);
2020-07-22