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

Posted 2023-02-24

【中文标题】react-native - 图像需要来自 JSON 的本地路径

【英文标题】：react-native - Image require local path from JSON

【发布时间】：2016-10-03 04:17:02

【问题描述】：

Hello comunity :) 我正在 react-native 中开发一个 testapp，并尝试从本地存储位置获取图像。实际我在做什么：我将图像直接链接源提供给 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/>
    ); 

上面的代码 sn-p 在一个以 (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/>
    ); 

调试示例图片： 示例图片 = ./images/picture.png

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

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

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

*

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

感谢您的帮助。

【参考方案1】：

我今天找到的最好的解决方案是没有解决方案对象 - 用于从 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> 
)

【讨论】：

function _loadDataSoundFromJson() return new Promise((resolve,reject)=> if (soundData) setTimeout(function() resolve(soundData) ,1500) else reject("没有找到数据”） ）; ;

并显示：_renderNoPlaying=(item)=> return( item.key )

为我工作，谢谢。

【参考方案2】：

似乎与issue1issue2类似

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

【讨论】：

感谢您的快速回答。在这种情况下，将其设为静态是有问题的 -> 在我的应用程序中，我有不止一张图片。在我的 setPicture 方法中，我决定是否在列表视图中使用一张或另一张图片。所以用 json 来制作这个变量会非常棒。我将尝试由您的链接问题编写的一些解决方案。也许我可以找到适合我的解决方案:)

我厌倦了一切。没有从这两个相关问题中找到解决方案。总之谢谢你。或许目前还做不到

现在你可以像'picture':require('imagePath')一样改变你的pictureRef代码，然后你可以使用pictureRef.picture来设置你的图片来源。

同样在 issue2 中，有一个 PR 来解决需要的可变路径。但我现在没有测试

非常感谢。这对我来说是一个合适的解决方法:)。根据“问题2”，这对我不起作用，要么我太笨了，要么就是不适合我的问题:) Br