PropType échoué de React-native sur le composant Image

Question

Je viens de commencer avec React-native et j'ai une assez bonne compréhension de React pour la création d'applications Web ... Je rencontre ici un problème déroutant qui ne s'est jamais produit lors de l'utilisation de React pour le la toile.

Fondamentalement, je rend un composant dont l'image est générée dynamiquement en mappant sur un tableau d'objets dans son composant parent.

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

Et son composant parent:

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

Dans le simulateur d'appareil, j'obtiens l'erreur suivante:

"Avertissement: propType a échoué: la source" prop "fournie à" Image "est incorrecte. Vérifiez la méthode de rendu de" BasicComponent "."

Est-ce que quelqu'un sait ce qui pourrait se passer ici?

Answer 1

Vous devez soit exiger les actifs locaux, soit utiliser l'objet avec la clé uri.

Donc, soit dans MainComponent:

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

ou dans BasicComponent:

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

Answer 2

vous devez utiliser uri pour définir l'image source

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