Réagir avec une variable d'utilisation native pour le fichier image
Je sais que l'utilisation d'une image statique de réagir natif, vous devez faire une exiger que cette image-là en particulier, mais je suis en train de charger une image aléatoire basé sur un certain nombre. Par exemple, j'ai 100 images appelées img1.png - img100.png dans mon répertoire. Je suis en train d'essayer de trouver un moyen pour effectuer les opérations suivantes
<Image source={require(`./img${Math.floor(Math.random() * 100)}.png`)}/>
Je sais que cela intentionnellement ne fonctionne pas, mais toutes les solutions de contournement serait grandement apprécié.
source d'informationauteur bgrober
Vous devez vous connecter pour publier un commentaire.
Pour quiconque d'apprendre à connaître la réaction natif de la bête, cela devrait vous aider 🙂
J'ai visité quelques sites dans le passé aussi, mais de plus en plus frustrant. Jusqu'à ce que j'ai lu ce site ici.
C'est une approche différente, mais finalement ne payer à la fin.
Fondamentalement, la meilleure approche serait de charger toutes vos ressources dans un seul endroit.
Examiner la structure suivante
Dans
index.js
vous pouvez le faire:Dans vos vues, vous devez importer les images composant comme ceci:
Tout le monde a différents moyens pour une fin, il suffit de choisir celui qui vous convient le mieux.
En JS exiger des déclarations sont résolus à faisceau de temps (quand le JS bundle est calculé). Par conséquent, il n'est pas pris en charge pour mettre une expression variable comme argument pour
require
.En cas de nécessiter des ressources, il est encore plus délicat. Lorsque vous avez
require('./someimage.png')
Réagir Natif de l'emballeur aldo image de et il sera ensuite regroupés avec l'application de sorte qu'il peut être utilisé comme un "statique" de la ressource lorsque votre application est en cours d'exécution (en fait en dev mode il ne sera pas le bundle de l'image avec votre application, mais plutôt l'image sera servie par le serveur, mais cela n'a pas d'importance dans votre cas).Si vous voulez utiliser l'image aléatoire comme une ressource statique, vous devrez dire à votre application de bundle de l'image. Vous pouvez le faire de plusieurs façons:
1) Ajoutez-la à la statique de l'actif de votre application, puis de référence avec
<Image src={{uri:'name_of_the_image_in_assets.png'}}/>
(ici est comment vous pouvez l'ajouter à la native iOS app)2) Exiger que toutes les images de l'avance de manière statique. Les géohelminthiases dans une forme d':
Ensuite dans votre code, vous pouvez le faire:
3) d'Utiliser le réseau de l'image avec
<Image src={{uri:'http://i.imgur.com/random.jpg'}}/>