Question

我尝试使用map方法遍历SOURCE数组，但我一直收到此错误：

Unknown named module: '../images/one.jpeg'

任何人都知道为什么会这样吗？ require中的文件路径绝对正确。

var SECTIONS = [
  {
    title: 'One',
    fileName: 'one.jpeg',
  },
  {
    title: 'Two',
    fileName: 'two.jpeg',
  },
  {
    title: 'Three',
    fileName: 'three.jpeg',
  },
  {
    title: 'Four',
    fileName: 'four.jpeg',
  },
];


{SECTIONS.map((section, i) => (
   <CategoryCard
     key={i}
     source={require(`../images/${section.fileName}`)}
     title={section.title}
   />
))}

Answer 1

我不认为这是可能的，因为本机需要提前知道要捆绑什么（AFAIK）。但是，您可以require数组中的所有文件：

var SECTIONS = [
  {
    title: 'One',
    file: require('../images/one.jpeg'),
  },
  {
    title: 'Two',
    file: require('../images/two.jpeg'),
  },
  {
    title: 'Three',
    file: require('../images/three.jpeg'),
  },
  {
    title: 'Four',
    file: require('../images/four.jpeg'),
  },
];


{SECTIONS.map((section, i) => (
   <CategoryCard
     key={i}
     source={section.file}
     title={section.title}
   />
))}

Answer 2

您无法使用动态链接。我发现解决这个问题的最佳方法是：

var SECTIONS = {
  One: {
    title: 'One',
    file: require('../images/one.jpeg'),
  },
  Two: {
    title: 'Two',
    file: require('../images/two.jpeg'),
  },
  Three: {
    title: 'Three',
    file: require('../images/three.jpeg'),
  },
  Four: {
    title: 'Four',
    file: require('../images/four.jpeg'),
  },
};


{SECTIONS.map((section, i) => (
   <CategoryCard
     key={i}
     source={section.file}
     title={section.title}
   />
))}

这样，你可以只使用这些文件，如果你有某种动态图像选择，你可以使用这样的东西

<Image source={SECTIONS[image.type]} />

Answer 3

尝试使用类似

的直接网址在单独的浏览器中打开文件

的http：//＆LT;＆GT;＆LT;＆GT; /imgages/one.jpg

您也可以这样做：

使用react显示动态图像的一个工作示例：

Example Click Here

Answer 4

有一个可行的解决方案，虽然不推荐用于大型图像，但对于（很多）小图像效果很好。

步骤：

将图标转换为base64字符串。
创建一个JSON文件，其中filename为键，base64字符串为值。（您也可以将它们存储到本地数据库中）

e.g。 ImageData.json

{

"icon1": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQ.......==",
"icon2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQ.......=="

}

3.将json文件导入动态需要图像的位置。

e.g。

const imageData = require("./images/ImageData.json")

4：在运行时获取/生成密钥/文件名。并获得图像源。

e.g。

const imageSrc = imageData[keyname]

5：在运行时动态生成图像。

e.g。

<Image style={{ width: 70, height: 70, resizeMode: Image.resizeMode.contain }} source={ uri: imageSrc } />

完成..

附加.. 编写一个帮助程序python脚本来自动创建json文件。

import base64
import os

directory = os.fsencode('.')

with open('ImagesData.json', 'wb') as jsonFile:
    jsonFile.write(bytes('{', 'utf-8'))

    written = False

    for file in os.listdir(directory):
        filename = os.fsdecode(file)

        if filename.endswith('.png'):
            with open(filename, "rb") as image_file:
                if written:
                    jsonFile.write(bytes(',\n','utf-8'))
                encoded_string = base64.b64encode(image_file.read())
                jsonFile.write(bytes(('"' +filename+ '":'), 'utf-8'))
                jsonFile.write(bytes('"data:image/png;base64,', 'utf-8') + encoded_string + bytes('"', 'utf-8'))
                written = True

    jsonFile.write(bytes('}', 'utf-8'))

将脚本复制到图像文件夹并运行脚本（需要python 3.6）。
将创建一个json文件，其中图像名称为key，base64字符串为值。
将文件复制到项目并使用（之后可以删除图像）。
使用上面提到的json文件。

Answer 5

我遇到了同样的问题，但情况略有不同。我有一系列需要动态图像的不同对象。我已经在映射数组，但是我需要根据名称将图像匹配到该数组。这有点骇人听闻，但这就是我要做的。

首先，在父组件中，我创建了一个函数来为对象数组呈现组件。我将对象数据传递到称为“对象”的道具中。

就我而言，我知道我的数据是什么，我需要将相应的图像与从要从中获取数据的外部api提取的对象进行匹配。

renderObjects() {
return this.state.objects.map(object => (
  <ObjectListDetail
    key={object.id}
    next
    props={this.props}
    object={object}
  />
));
}

在我的ObjectListDetail组件中，我创建了一个称为图标的变量，这是另一个对象数组。这次，我创建了一个name属性，该属性与从父级传递到组件的对象匹配，然后有了第二个名为source的键，在其中提供了图像的路径。像这样。

var icons = [
{ name: "BTC", source: Images.btc },
{ name: "ETH", source: Images.eth },
{ name: "ETC", source: Images.etc },
{ name: "ZRX", source: Images.zrx },
{ name: "USDC", source: Images.usdc },
{ name: "LTC", source: Images.ltc },
{ name: "BCH", source: Images.bch },
{ name: "USD", source: Images.usd }
];

注意***我已经将我的所有图像都保存到整个应用程序的单独文件中，并将其导入到顶部。

然后，我创建了一个名为imgSrc的变量，并对结果进行了过滤，以使其与我传递给子组件的对象的名称相匹配。

var imgSrc = icons.filter(
icon => icon.name === props.wallet.name
)

然后我创建了一个Image组件，并在源需求中调用了过滤器的结果并将其指向源。

  <Image source={imgSrc[0].source} />

这就是我在应用程序中实现动态图像渲染的方式。

这可能不是最好的做事方式，对此我还是很陌生的，但是我也很乐意批评

React Native - 动态图像源

5 个答案: