javascript – Image组件上的React-native failed propType

发布时间：2020-12-15 01:51:17 所属栏目：百科来源：网络整理

导读：我刚刚开始使用React-native并且对React创建Web应用程序有相当不错的把握……我遇到了一个令人困惑的问题,这个问题在处理web响应时从未发生过. 基本上我正在渲染一个组件,其图像是通过映射其父组件中的对象数组来动态生成的. export default class ImageComp

我刚刚开始使用React-native并且对React创建Web应用程序有相当不错的把握……我遇到了一个令人困惑的问题,这个问题在处理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}}
  />
);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!