PropType nativo fallito sul componente Image

Question

Ho appena iniziato con React-native e ho una conoscenza abbastanza decente su React per la creazione di app Web ... Sto incontrando un problema di confusione qui che non si è mai verificato quando si lavora con react per il web.

Fondamentalmente sto eseguendo il rendering di un componente la cui immagine viene generata dinamicamente mediante il mapping su una matrice di oggetti nel suo componente padre.

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

E la sua componente principale:

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

Nel simulatore di dispositivo Sto ottenendo il seguente errore:

"Attenzione: Impossibile PropType: prop 'fonte' non valido in dotazione per 'Immagine 'controllare il metodo di rendering di' BasicComponent '"

Fa un sai cosa potrebbe succedere qui?

Answer 1

È necessario richiedere le risorse locali o utilizzare l'oggetto con la chiave uri.

Quindi, o in MainComponent:

this.state = { 
    images:[ 
    require('./src/images/1.png'), 
    require('./src/images/2.png'), 
    require('./src/images/3.png') 
    ] 
} 

o in BasicComponent:

return (
    <Image 
    source={{uri: this.props.source}} 
    /> 
);