Chargement de l'image transmise comme des accessoires de réagir natif

Quand j'essaye de charger une image à partir d'accessoires, j'obtiens l'erreur suivante
avertissement: échec de la prop type: invalid prop source fourni à image
Voici mon code

src/components/common/Header.js

<View style={viewStyle}>
  <Text style={textStyle}>{props.children}</Text>
  <Image style={{height:25, width:25}} source={props.imageUri} />
</View>

src/index.js

<Header imageUri='../../images/logout.png'>My App</Header>

et l'image est dans le chemin de la src/images/déconnexion.png

s'il vous plaît aider

OriginalL'auteur Raj Suvariya | 2017-03-21

  1. 7

    votre source est faux.

    Il doit utiliser uri propriétés.

    Soit vous utilisez besoin:

    <Image source={require('.../../images/logout.png')} />

    à son tour, vous pouvez exiger cet accessoire trop

    <Image source={require(props.imageUri)} />

    Ou vous utilisez l'Uri est:

    <Image source={{uri: props.imageUri }} />

    Reportez-vous à la documentation pour plus de détails ici

    quel devrait être le PropType être passé dans?
    J'ai essayé de faire cela, mais je ne suis pas être en mesure d'obtenir un composant indépendant de nom et donc très frustré par moi-même. Merci de m'aider pour résoudre javascript réagir en natif. Chaque fois que je le mettre en application les liens à l'intérieur, il se termine jusqu'à l'erreur de jeter que la source n'est pas valide ou invalide appel

    OriginalL'auteur Tikkes

  2. 1

    Pour un local chemin de l'image, la syntaxe est

    <Image style={{height:25, width:25}} source={require(props.imageUri)} />

    OriginalL'auteur Hariks

  3. 0

    Comme le Réagir Natif de la Documentation dit, toutes vos images sources doit être chargé avant de compiler votre bundle.

    L'ajout d'une simple image de Réagir Natif devrait ressembler à ceci:

    <Image source={require('./path_to_your_image.png')} />

    Disons que vous avez ceci:

    const slides = {
  car: './car.png',
  phone: '../phone.png',
}

    Ensuite, vous passez slides comme un paramètre, mais encore, vous ne serez pas en mesure de l'utiliser de cette façon (même si, logiquement, devrait fonctionner):

    <Image source={require(props.car)} />

    Utilisation require() à l'intérieur de la sildes{}

    const slides = {
  car: require('./car.png'),
  phone: require('../phone.png'),
}

    Et l'utiliser comme ceci:

    <Image source={props.car}></Image>

    OriginalL'auteur Carlos Abraham