छवि घटक

Question

पर प्रतिक्रिया-मूल विफल प्रोपटाइप मैं केवल प्रतिक्रिया-मूल के साथ शुरू कर रहा हूं और वेब ऐप्स बनाने के लिए प्रतिक्रिया पर एक सुंदर सभ्य समझ है ... मैं यहां एक भ्रमित समस्या में भाग रहा हूं जो प्रतिक्रिया के साथ काम करते समय कभी नहीं हुआ वेब के लिए

असल में मैं एक घटक प्रस्तुत कर रहा हूं जिसकी छवि को इसके मूल घटक में ऑब्जेक्ट्स की एक सरणी पर मैप करके गतिशील रूप से उत्पन्न किया जा रहा है।

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: अमान्य प्रोप 'स्रोत' 'छवि को आपूर्ति 'बेसिक कॉम्पोनेंट' की रेंडर विधि की जांच करें "

क्या कोई योन पता है कि यहाँ क्या हो सकता है?

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