Chargement dynamique des images stockées localement avec réaction natif

Problème avec le chargement dynamique des ressources d'image dans une boucle/liste.Chargement dynamique des images stockées localement avec réaction natif

J'ai toutes mes ressources locales statiques nécessaires en tant que tels:

actifs/listeImages.js

const images = { 
    appLogo: require('./app-logo.png'), 

    cardOne: require('./cards/card-1.png'), 
    cardTwo: require('./cards/card-2.png'), 
    ... 
    cardForty: require(./cards/card-40.png) 
} 

export default images;

Puis dans mon écran de la liste:

... 
import images from '../assets/images'; 
... 
renderListItems(item) { 

    const image_name = `images.card${item.cardName}`; 
    console.log(image_name); // images.cardOne, images.cardTwo etc.. 

    return (
     <ListItem avatar> 
      <Thumbnail square size={80} source={image_name} /> // This is nativebase component which wraps the RN image component 
      <Body> 
       <Text>{item.name}</Text> 
      </Body> 
      <Right> 
       <NBIcon name="arrow-forward" /> 
      </Right> 
     </ListItem> 
    ); 
} 
...

Aucune ressource obtenir chargé. Pourtant, si je change la source = {image_name} à source = {images.cardOne} directement (où images.cardOne est exactement le même que la variable image_name à la première itération) cela fonctionne - sauf pour le fait qu'ils ont tous la même image .

J'ai également essayé d'utiliser la syntaxe {{uri: image_name}} mais rien ne s'y passe aussi.

Il ne semble pas être une solution à cela, autre que la création d'une instruction switch massif

Source

2017-06-18 Martin

Eh bien, c'est parce que image_name est une chaîne avec la valeur de images.cardOne alors images.cardOne est également une chaîne mais avec la valeur du chemin réel des images dans votre système de fichiers (par exemple ./app-logo.png). Donc, si vous voulez charger des images dynamiquement objet à IMAGE_NAME, vous devez utiliser la notation de support comme ceci:

const image_name = images[`card${item.cardName}`];

De cette façon image_name va maintenant pointer vers le chemin de vos images (par exemple ./app-logo.png) .

Source

2017-06-18 00:56:28

Merci, qui a travaillé un charme – Martin

Chargement dynamique des images stockées localement avec réaction natif

Répondre

Questions connexes