react-native - 圖像需要來自JSON的本地路徑

Question

您好comunity :)我正在使用react-native的testapp，並嘗試從本地存儲位置獲取圖像。 實際我在做什么：我給一個圖像directlink源到var並在我的渲染函數中調用這個方法。

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

工作：

ImageCall-File（Imagefile.js）

var samplepicture;

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

上面的代碼片段在以（Imagefile.js）命名的創建類中工作

上面的方法工作得很好。

現在我想去的地方>我想將圖像文件保存在一個分隔的js文件中，其樣式類似於JSON對象。

不工作：

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

調試samplepicture：samplepicture = ./ images/picture.png

不確定它是否相關，但因為它是一個字符串，它的格式沒有''。 還要記住，我需要通過setPicture（）函數為我的代碼設置圖像源。

*我調試了兩個版本的代碼並具有相同的輸出：

• 版本1：samplepicture = ./ images/picture.png
• 版本2：samplepicture = ./ images/picture.png

*

請記住，這是我的第一個問題，我真的希望格式化一切正確。 我也搜索了許多相關的問題，並沒有找到任何解決方案

謝謝你的幫助。

Answer 1

似乎與此問題1 相似 2

我認為如果你使用require（）來添加你的圖像，你應該給出一個靜態路徑，而不是一個變量。 因為他們需要知道要捆綁的特定圖像源。 使用json就像一個不確定的來源，所以它現在沒有用，有一個pr，這個，

Answer 2

我今天發現的最好的解決方案是沒有對象的解決方案 - 從react-native中的json文件動態加載變量，但必須將該圖像轉換為base64格式並將其添加到json文件，然后通過普通方式從那里調度它。

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