react-native - Image require local path from JSON

问题

Hello comunity :) I am working on a testapp in react-native and try to get Images from a local storage place. Actual what i am doing: I give an image directlink source to a var and call this method at my render function.

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

Working:

ImageCall-File (Imagefile.js)

var samplepicture;

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

The code snippet above works in a created class wich is named after (Imagefile.js)

The method above works pretty fine.

Now my where i want to get to > I want to save the image file in a seperated js file wich is styled like a JSON object.

Not working:

JS_JSON_File (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/>
    ); 
}

Debug the samplepicture: samplepicture = ./images/picture.png

Not sure if it is relevant but because it is a string it is formatted without the ' '. Also keep in mind that i need to set the image source by the setPicture() function for my code.

*I debugged both versions of code and had the same output:

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

Please keep in mind that this is my first question and i really hoped to format everything right. Also i searched for many related issue´s and didnt find any solution

Thanks for your help.

回答1:

seems it similar with this issue1 issue2

i think if you use require() to add your image,you should give a static path,not a variable. because they need know the specific image source to bundle. use json is just like a uncertain source so it doesnt work now there is a pr to this,

回答2:

The best solution I found today is that no solution for object - variable for dynamically loading from json file in react-native, but have to convert that image to base64 format and add it to json file, after that dispatch it from there by normal.

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> 
)}

来源：https://stackoverflow.com/questions/37608591/react-native-image-require-local-path-from-json

标签

javascript

json

image

react-native

require