图像组件上的React-native失败propType [英] React-native failed propType on Image component

问题描述

我刚刚开始使用React-native，并且对React创建Web应用程序有相当不错的把握......我遇到了一个令人困惑的问题，这个问题在处理网络反应时从未发生过。

I am just starting out with React-native and have a pretty decent grasp on React for creating web apps... I am running into a confusing issue here that never occured when working with react for the web.

基本上我正在渲染一个组件，其图像是通过映射其父组件中的对象数组来动态生成的。

Basically I am rendering a component whose image is being dynamically generated by mapping over an array of objects in its parent component.

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>
    );
  }
};

在设备模拟器中我收到以下错误：

In device simulator I am getting the following error:

警告：propType失败：提供给'Image'的无效道具'源'检查'BasicComponent'的渲染方法

"Warning: Failed propType:Invalid prop 'source' supplied to 'Image' check the render method of 'BasicComponent'"

有谁知道这里会发生什么？

Does anyone know what could be going on here?

推荐答案

你应该要求当地人资产或使用对象 uri key。

You should either require the local assets or use object with uri key.

所以要么在 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}}
  />
);

这篇关于图像组件上的React-native失败propType的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！