variable d'utilisation de react native pour le fichier image

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. Considérez la structure suivante

app  
   |--img
      |--image1.jpg
      |--image2.jpg
      |--profile
          |--profile.png
          |--comments.png
      |--index.js

index.js, vous pouvez le faire ceci:

const images = {
    profile: {
        profile: require('./profile/profile.png'),
        comments: require('./profile/comments.png'),
    },
    image1: require('./image1.jpg'),
    image2: require('./image2.jpg'),
};

export default images;

Dans vos vues, vous devez importer les images composant comme ceci:

import Images from './img/index';

render() {
    <Image source={Images.profile.comments} />
}

tout le monde a des moyens différents pour une fin, il suffit de choisir celui qui vous convient le mieux.

dans JS require les énoncés sont résolus au moment du groupement (lorsque le groupement JS est calculé). Par conséquent, il n'est pas supporté de mettre l'expression variable comme argument pour require.

en cas de besoin de ressources, c'est encore plus délicat. Lorsque vous avez require('./someimage.png'), React Native packager localisera l'image requise et elle sera ensuite regroupée avec l'application de sorte qu'elle puisse être utilisée comme une ressource "statique" lorsque votre application est en cours d'exécution (en fait en mode dev il ne va pas regrouper 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 random image comme une ressource statique, vous devez dire à votre application de regrouper cette 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 c'est comment vous pouvez l'ajouter à la native iOS app)

2) Exiger que toutes les images de l'avance de manière statique. Sth sous une forme de:

var randomImages = [
    require('./image1.png'),
    require('./image2.png'),
    require('./image3.png'),
    ...
];

Ensuite, dans votre code, vous pouvez faire:

<Image src={randomImages[Math.floor(Math.random()*randomImages.length)]}/>

3) Utilisez l'image réseau avec <Image src={{uri:'http://i.imgur.com/random.jpg'}}/>

class ImageContainer extends Component {
   this.state ={
     image:require('default-img')
   }
    <View>
           <Image source={this.state.image} />
    </View>
}

dans le contexte de cette discussion,j'ai eu ce cas où je voulais assigner dynamiquement des images pour un fond particulier. Ici, j'ai changer l'état comme ceci

this.setState({
  image:require('new-image')
})

je suis venu à ce fil, à la recherche d'un moyen d'ajouter des images dynamiques. J'ai rapidement découvert que passer une variable à L'Image -> require() ne fonctionnait pas.

merci à DerpyNerd de m'avoir mis sur la bonne voie.

après avoir implémenté les ressources en un seul endroit, j'ai trouvé qu'il était facile d'ajouter les Images. Mais, j'avais encore besoin d'un moyen pour assigner dynamiquement ces images en fonction de l'état changeant de mon application.

j'ai créé une fonction qui accepterait une chaîne à partir d'une valeur d'état et retournerait alors l'Image qui correspondrait logiquement à cette chaîne.

Setup

structure de L'Image:

app  
  |--src
    |--assets
      |--images
        |--logos
          |--small_kl_logo.png
          |--small_a1_logo.png
          |--small_kc_logo.png
          |--small_nv_logo.png
          |--small_other_logo.png

        |--index.js
    |--SearchableList.js

index.js, j'ai ceci:

const images = {
  logos: {
    kl: require('./logos/small_kl_logo.png'),
    a1: require('./logos/small_a1_logo.png'),
    kc: require('./logos/small_kc_logo.png'),
    nv: require('./logos/small_nv_logo.png'),
    other: require('./logos/small_other_logo.png'),
  }
};

export default images;

Dans mon SearchableList.js composant, j'ai ensuite importé les Images composant comme ceci:

import Images from './assets/images';

j'ai ensuite créé une nouvelle fonction imageSelect dans mon composant:

imageSelect = network => {
  if (network === null) {
    return Images.logos.other;
  }

  const networkArray = {
    'KL': Images.logos.kl,
    'A1': Images.logos.a1,
    'KC': Images.logos.kc,
    'NV': Images.logos.nv,
    'Other': Images.logos.other,
  };

  return networkArray[network];
};

Puis dans mes composants render fonction que j'appelle cette nouvelle imageSelect fonction pour assigner dynamiquement l'Image désirée basée sur la valeur dans le this.state.network:

render() {
  <Image source={this.imageSelect(this.state.network)} />
}

encore une fois, merci à DerpyNerd de m'avoir mis sur la bonne voie. J'espère que cette réponse aidera les autres. :)