React Native - 动态图像源

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

原文由 AHinson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为这是不可能的，因为 React Native 需要提前知道要捆绑什么（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}
   />
))}

原文由 Davin Tryon 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

原文由 Truca 发布，翻译遵循 CC BY-SA 3.0 许可协议