react-native - Image require local path from JSON

Question

Bonjour à la communauté :) Je travaille sur une testapp en react-native et j'essaye de récupérer des images depuis un espace de stockage local. Je suis en train de faire ce que j'ai à faire : Je donne un lien direct de l'image source à une var et j'appelle cette méthode dans ma fonction de rendu.

*react: ^0.14.8 ||*
*react-native: ^0.23.1||*
*npm: 2.15.1 ||*
*node: v4.4.4*

Travailler :

ImageCall-File (Imagefile.js)

var samplepicture;

setPicture(){
    samplepicture= require('./images/picture.png')
}
render() { 
    this.setPicture; 
    return(
        <Image source=samplepicture/>
    ); 
}

L'extrait de code ci-dessus fonctionne dans une classe créée qui porte le nom de (Imagefile.js).

La méthode ci-dessus fonctionne très bien.

Je veux sauvegarder le fichier image dans un fichier js séparé qui est stylé comme un objet JSON.

Ne fonctionne pas :

Fichier JS_JSON (pictureRef.js)

module.exports = {
    "pictureRef": 
{
    "picture": './images/picture.png'
}}

ImageCall_File (Imagefile.js)

var pictureRef = require('./pictureRef.js');
var samplepicture;

setPicture(){
    samplepicture= require(pictureRef.pictureRef.picture);
}
render() { 
    this.setPicture; 
    return(
        <Image source=samplepicture/>
    ); 
}

Déboguer l'image d'exemple : samplepicture = ./images/picture.png

Je ne sais pas si c'est pertinent, mais comme il s'agit d'une chaîne de caractères, elle est formatée sans le ' '. Il faut également garder à l'esprit que je dois définir la source de l'image par la fonction setPicture() pour mon code.

*J'ai débogué les deux versions du code et j'ai obtenu le même résultat :

• Version 1 : samplepicture = ./images/picture.png
• Version 2 : samplepicture = ./images/picture.png

*

N'oubliez pas qu'il s'agit de ma première question et que j'espérais vraiment tout formuler correctement. De plus, j'ai fait des recherches sur de nombreux problèmes connexes et je n'ai pas trouvé de solution.

Merci pour votre aide.

Answer 1

Semble similaire à celle-ci numéro 1 numéro 2

Je pense que si vous utilisez require() pour ajouter votre image, vous devriez donner un chemin statique, pas une variable, parce qu'ils ont besoin de connaître la source d'image spécifique pour le bundle. L'utilisation de json est juste comme une source incertaine, donc cela ne fonctionne pas. Maintenant, il y a un prix à cela,

Answer 2

La meilleure solution que j'ai trouvée aujourd'hui est qu'il n'y a pas de solution pour l'objet - variable pour le chargement dynamique à partir d'un fichier json dans react-native, mais il faut convertir cette image au format base64 et l'ajouter au fichier json, après quoi il faut le dispatcher à partir de là par voie normale.

export class AppModule { }
function _loadDataSoundFromJson(){ 
  return new Promise((resolve,reject)=>{ 
    if (soundData){ 
      setTimeout(function(){ 
        resolve(soundData) },1500) 
    }
    else { 
      reject("No data found") 
    }}); 
};

_renderNoPlaying = (item) => {
   return ( 
     <View style={styles.horizontalContainer}> 
     <Image 
        source={{uri : item.img!=null?item.img:nullImg.nil}} 
        resizeMethod={'scale'} 
        style={{
            width:150,
            height:120, 
            borderTopLeftRadius:20,
            borderTopRightRadius:20}}
     /> 
     <Text style={styles.titleItem}>{item.key}</Text> 
)}