Utilisez <Image> avec un fichier local

La documentation dit que le seul moyen de faire référence à une image statique est d'utiliser l'exigent.

Mais je ne suis pas sûr de l'endroit où ne réagit pas s'attendre à avoir ces images. Les exemples n'ont pas tous les domaines, de sorte qu'il semble que vous ayez à aller à Xcode et les ajouter à vos Images.xcassets, mais cela ne fonctionne pas pour moi.

InformationsquelleAutor Blai Pratdesaba | 2015-03-26
  1. 19

    Il fonctionne exactement comme vous l'attendez de travail. Il y a un bug https://github.com/facebook/react-native/issues/282 qui l'empêche de fonctionner correctement.

    Si vous avez node_modules (avec react_native) dans le même dossier que le projet xcode, vous pouvez modifier node_modules/react-native/packager/packager.js et de faire ce changement: https://github.com/facebook/react-native/pull/286/files . Il va travailler comme par magie 🙂

    Si votre react_native est installé quelque part d'autre et le patch ne fonctionne pas, commenter https://github.com/facebook/react-native/issues/282 de leur laisser savoir à propos de votre installation.

    • Merci. Je me serais levé vote de votre réponse, mais je suis encore trop nouveau dans StackExchange. De toute façon, marqué aussi bon 🙂
    • Vous ne devriez pas avoir à modifier le fichier plus. Le correctif semble être pour glisser/déposer les images à l'actif du bundle et de garder le nom de le même que le nom de fichier sur le disque.
    InformationsquelleAutor syrnick
  2. 24

    À l'aide de Réagir Natif de 0,41 (en Mars 2017), le ciblage de iOS, je viens de trouver ça aussi simple que:

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

    Le fichier image doit exister dans le même dossier que le .fichier js qui en a besoin.

    Je n'avais pas à changer quoi que ce soit dans le projet XCode. Il a juste travaillé. Peut-être que les choses ont beaucoup changé en 2 ans!

    Notez que si le nom de fichier a autre chose que des lettres minuscules, ou le chemin d'accès est rien de plus que "./", alors pour moi, il a commencé à défaut. Pas sûr de ce que les restrictions sont, mais de commencer simple et le travail de l'avant.

    Espère que cela aide quelqu'un, que toutes les réponses ci-dessus semblent trop complexes et plein de (méchant) lien hors-site.

    Mise à JOUR: BTW - La documentation officielle pour c'est ici:
    https://facebook.github.io/react-native/docs/images.html

    • Même la documentation officielle dit - je peux faire un dossier nommé img et puis je peux mettre toutes les images dans ce dossier. Il ne fonctionne pas pour moi ! Je dois mettre toutes les images dans le même dossier où l' .js est. Étrange !!!
    InformationsquelleAutor spechter
  3. 5

    De la UIExplorer exemple d'application:

    Statique actifs doivent être tenus en préfixant avec image! et sont situés dans l'app bundle.

    Utilisez <Image> avec un fichier local

    Donc comme ceci:

    render: function() {
  return (
    <View style={styles.horizontal}>
      <Image source={require('image!uie_thumb_normal')} style={styles.icon} />
      <Image source={require('image!uie_thumb_selected')} style={styles.icon} />
      <Image source={require('image!uie_comment_normal')} style={styles.icon} />
      <Image source={require('image!uie_comment_highlighted')} style={styles.icon} />
    </View>
  );
}
    • Oh! Je n'ai pas remarqué cet exemple avec des images. Merci pour le signaler. Encore, je n'ai pas été en mesure de le faire fonctionner sur mon projet de test. Continuerons à essayer plus tard et après mon résultat
    • Où placez-vous l'image dans le projet? J'ai essayé de l'ajouter dans les Images.xcassets en le faisant glisser dans Xcode, mais simplement obtenir inconnue " module "de l'image!toile de fond". Le code est ici: gist.github.com/StefanWallin/3abbb026c03615545bd8
    • Donc au final ma question était liée aux emballages. Cette réponse a aidé à le résoudre.
    InformationsquelleAutor Jake Marsh
  4. 5

    J'ai eu exactement ce même problème jusqu'à ce que j'ai réalisé que je n'avais pas mis l'image dans mon Image.xcassets. J'ai été en mesure de faire glisser et de le déposer dans Xcode avec Image.xcassets ouvrir et après la reconstruction, il a résolu le problème!

    Utilisez <Image> avec un fichier local

    InformationsquelleAutor crockpotveggies
  5. 1

    J'ai eu du mal à réagir indigènes de la navigation, j'ai créé mon propre composant d'en-tête, puis d'insérer une image en tant que logo sur la gauche avant le titre, puis quand j'ai été le déclenchement de passer à un autre écran, et ensuite de retour à nouveau, logo était en train de charger de nouveau, avec un délai d'attente près de 1s, mon agissait d'un fichier local. Ma solution :

    Logo.json

    {"file" : "base64 big string"}

    App.js

    import Logo from '.../Logo.json'
...
<Image source:{{uri:Logo.file}} />
    InformationsquelleAutor Bruno
  6. 0

    Ce de https://github.com/facebook/react-native/issues/282 fonctionné pour moi:

    adekbadek a commenté le 11 Novembre, 2015
    Il doit être mentionné que vous n'avez pas à mettre les images dans les Images.xcassets - vous il suffit de les placer dans la racine du projet et puis juste require('./myimage.png') comme @anback a écrit
    Regardez cette SORTE de réponse et de la traction, il les références

    InformationsquelleAutor Vijay Vepakomma
  7. -9

    Vous devez ajouter à la source de la propriété d'un objet avec une propriété appelée "uri", où vous pouvez spécifier le chemin de votre image comme vous pouvez le voir dans l'exemple suivant:

    <Image style={styles.image} source={{uri: "http://www.mysyte.com/myimage.jpg"}} />

    souviens alors de définir la largeur et la hauteur par le style de propriété:

    var styles = StyleSheet.create({
   image:{
    width: 360,
    height: 40,
  }
});
    • Je pense que l'OP a été à la recherche pour savoir comment faire des images statiques, au lieu d'un réseau chargé chers.
    InformationsquelleAutor luca mezzalira