react-native

Question

你好社区 :) 我正在使用 react-native 开发一个测试应用程序，并尝试从本地存储位置获取图像。实际我在做什么：我将图像直接链接源提供给 var 并在我的渲染函数中调用此方法。

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

Working:

ImageCall-文件 (Imagefile.js)

var samplepicture;

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

上面的代码片段在创建的 class 中工作，该 class 以 (Imagefile.js)

命名

上面的方法很好用。

现在我想去的地方 > 我想将图像文件保存在一个单独的 js 文件中，该文件的样式类似于 JSON 对象。

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

不确定它是否相关，但因为它是一个字符串，所以它的格式没有“”。还要记住，我需要通过 setPicture() 函数为我的代码设置图像源。

*我调试了两个版本的代码并得到了相同的输出：

版本 1：示例图片 = ./images/picture.png
版本 2：示例图片 = ./images/picture.png

*

请记住，这是我的第一个问题，我真的希望一切都正确格式化。我也搜索了许多相关问题，但没有找到任何解决方案

感谢您的帮助。

Answer 1

好像跟这个很相似issue1 issue2

我认为如果你使用 require() 添加你的图像，你应该给出一个静态路径，而不是一个变量。因为他们需要知道要捆绑的特定图像源。使用 json 就像一个不确定的来源，所以它不起作用现在有一个 pr，

Answer 2

我今天找到的最好的解决方案是没有解决方案 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 文件，然后按正常方式从那里发送它。

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

react-native - 图片需要来自 JSON 的本地路径

react-native - Image require local path from JSON

javascript

json

image

require