web-dev-qa-db-fra.com

réagit variable d'utilisation native pour le fichier image

Je sais que pour utiliser une image statique en mode natif, vous devez créer une requête spécifique pour cette image, mais je tente de charger une image aléatoire basée sur un nombre. Par exemple, j'ai 100 images appelées img1.png - img100.png dans mon répertoire. J'essaie de trouver un moyen de faire ce qui suit

<Image source={require(`./img${Math.floor(Math.random() * 100)}.png`)}/>

Je sais que cela ne fonctionne pas intentionnellement, mais toute solution de contournement serait grandement appréciée. 

javascriptiosreact-native
28
bgrober

Pour tous ceux qui veulent connaître la bête réagissante, cela devrait aider :)

J'ai également visité quelques sites dans le passé, mais je l'ai trouvé de plus en plus frustrant. Jusqu'à ce que je lise ce site ici .

Il s’agit d’une approche différente, mais elle finit par porter ses fruits ……. La meilleure approche consiste essentiellement à charger toutes vos ressources au même endroit… .. envisager la structure suivante

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

Dans index.js, vous pouvez 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 le composant images comme suit:

import Images from './img/index';

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

Tout le monde a des moyens différents pour atteindre son but, il suffit de choisir celui qui vous convient le mieux.

Da Man - Q: Comment cette réponse utilise-t-elle une variable?

Eh bien, puisque require accepte uniquement une chaîne littérale, vous ne pouvez pas utiliser de variables, de chaînes concaténées, etc. Ceci est la meilleure chose à faire. Oui, cela demande encore beaucoup de travail, mais vous pouvez maintenant faire quelque chose qui ressemble à la question du PO:

render() {
  var images = { test100: "image100" };
  return (
    <View>
      <Text>
       test {images["test" + "100"]}
      </Text>
    </View>
  );
}
45
DerpyNerd

Dans JS, les instructions requises sont résolues au moment de l’implantation (lorsque l’ensemble est calculé). Par conséquent, il n'est pas pris en charge de mettre l'expression de variable en tant qu'argument pour require.

En cas de besoin de ressources, c'est encore plus compliqué. Lorsque vous avez require('./someimage.png'), le conditionneur natif de React enregistrera les paramètres régionaux requis et sera ensuite associé à l'application, de sorte qu'il puisse être utilisé comme ressource "statique" lorsque votre application est en cours d'exécution (en fait, elle ne sera pas intégrée en mode dev. l'image avec votre application, mais au lieu de cela l'image sera diffusée à partir du serveur, mais cela n'a pas d'importance dans votre cas).

Si vous souhaitez utiliser une image aléatoire en tant que ressource statique, vous devez indiquer à votre application de regrouper cette image. Vous pouvez le faire de plusieurs manières:

1) Ajoutez-le en tant qu'actif statique de votre application, puis faites-y référence avec <Image src={{uri:'name_of_the_image_in_assets.png'}}/> ( ici comment vous pouvez l'ajouter à l'application iOS native)

2) Exiger toutes les images à l'avance statiquement. Sth sous 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) Utiliser une image réseau avec <Image src={{uri:'http://i.imgur.com/random.jpg'}}/>

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

Dans le cadre de cette discussion, j'ai eu ce cas où je voulais assigner dynamiquement des images pour un fond particulier Ici je change d'état comme ça

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

Je suis venu sur ce fil à la recherche d'un moyen d'ajouter des images de manière dynamique. J'ai rapidement constaté que le passage d'une variable à l'image -> require () ne fonctionnait pas.

Merci à DerpyNerd de m'avoir mis sur le bon chemin.

Après avoir implémenté les ressources à un endroit, j'ai ensuite trouvé facile d'ajouter les Images. Cependant, j'avais toujours besoin d'un moyen d'attribuer dynamiquement ces images en fonction de l'évolution de l'état de mon application.

J'ai créé une fonction qui accepterait une chaîne à partir d'une valeur d'état et renverrait ensuite l'image correspondant à cette chaîne de manière logique.

Installer

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

Dans 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 composant SearchableList.js, j'ai ensuite importé le composant Images comme suit:

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];
};

Ensuite, dans mes composants, la fonction render, j'appelle cette nouvelle fonction imageSelect pour attribuer dynamiquement l'image souhaitée en fonction de 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 le bon chemin. J'espère que cette réponse aide les autres. :)

0
Shark