React-nativeが画像コンポーネントのpropTypeに失敗しました

Question

私はReact-nativeで始まり、Webアプリケーションを作成するためのReactについてかなりよく理解しています...私はここで混乱する問題に遭遇しています。ウェブ用。

基本的には、親コンポーネント内のオブジェクトの配列をマッピングすることによって、イメージが動的に生成されるコンポーネントをレンダリングしています。

export default class ImageComponent extends React.Component { 
    render() { 
    return (
     <Image source={this.props.source}/> 
    ); 
    } 
}; 

とその親コン​​ポーネント：

「警告：失敗しましたpropType：無効な小道具 'ソース' の画像「に供給されるデバイス・シミュレータで

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

私は、次のエラーを取得しています'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}} 
    /> 
);