Image 組件上的 React-native 失敗 propType

Question

我剛剛開始使用 React-native 並且對用於創建 Web 應用程序的 React 有相當不錯的掌握......我在這里遇到了一個令人困惑的問題，在使用 React for 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' 的渲染方法”

有誰知道這里會發生什么？

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

Answer 2

你應該使用 uri 來設置源圖像

 return ( <Image source={{uri: 'https://reactnative.dev/docs/assets/p_cat2.png'}} /> );