Javascript React Native-动态图像源

我试图用map方法循环遍历

源

数组，但一直出现以下错误：

未知命名模块：'../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}
   />
))}

var节=[
{
标题:"一",，
文件名：“one.jpeg”，
},
{
标题:"两个",，
文件名：“two.jpeg”，
},
{
标题:"三",，
文件名：“three.jpeg”，
},
{
标题:"四",，
文件名：“four.jpeg”，
},
];
{SECTIONS.map（（section，i）=>(
))}

我认为这是不可能的，因为react native需要提前知道要打包什么（AFAIK）。但是，您可以

要求阵列中的所有文件：

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

var节=[
{
标题:"一",，
文件：需要（'../images/one.jpeg'），
},
{
标题:"两个",，
文件：需要（'../images/two.jpeg'），
},
{
标题:"三",，
文件：需要（'../images/three.jpeg'），
},
{
标题:"四",，
文件：需要（'../images/four.jpeg'），
},
];
{SECTIONS.map（（section，i）=>(
))}
尝试在单独的浏览器中使用直接URL打开文件，如

http:///imgages/one.jpg

您也可以这样做：


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

获得了一个可行的解决方案，尽管不建议用于大图像，但它非常适合（许多）小图像

步骤：

将图标转换为base64字符串
创建一个JSON文件，文件名作为键，base64字符串作为值。
（也可以将它们存储到本地数据库）
e、 g。
ImageData.json

{

}

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

e、 g

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

e、 g

5：在运行时动态生成映像

e、 g

将脚本复制到image文件夹并运行脚本（需要python 3.6）
将创建一个json文件，图像名称作为键，base64字符串作为值
将文件复制到project并使用（之后可以删除图像）
使用上面提到的json文件
您不能使用动态链接。我发现解决这个问题的最好方法是：

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

var节={
一:{
标题:"一",，
文件：需要（'../images/one.jpeg'），
},
二:{
标题:"两个",，
文件：需要（'../images/two.jpeg'），
},
三:{
标题:"三",，
文件：需要（'../images/three.jpeg'），
},
四:{
标题:"四",，
文件：需要（'../images/four.jpeg'），
},
};
{SECTIONS.map（（section，i）=>(
))}

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

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

我也有同样的问题，但我的情况有点不同。我有一系列需要动态图像的不同对象。我已经在映射数组，但是我需要根据名称将图像与该数组匹配。这是一个有点黑客，但这是我如何去做

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

在我的例子中，我知道我的数据是什么，我需要将对应的图像与从外部api中提取的对象相匹配，我从外部api中获取数据

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

注***我已经要求将我的所有图像放入我整个应用程序的单独文件中，并在顶部导入它们

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

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

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

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



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

这可能不是做事情的最佳方式，我对这一点还是有点陌生，但我喜欢任何批评
我认为你可能走错了路。是的，这是我能想出的唯一其他解决办法。这似乎不是最理想的，但它现在会起作用。谢谢当使用它时，我得到：
PNG
<代码>意外字符

。它包括图像并尝试将图像作为文件读取。

是无法识别的字符，而不是实际的三个字符。这在react native中有效吗？这个例子是在一个网络浏览器中，这是一个非常不同的动物。

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]} />

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

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 }
];

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

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