圖像組件上的React-native失敗propType

Question

我剛剛開始使用React-native，並且對React創建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：無效丙 '源' 供給到「圖片'檢查'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}} 
    /> 
);