在React Native中动态加载图片

Question

我对React Native还不是很熟悉，但我遇到了一个问题...

我想要根据一个变量（存储在JSON文件中的ID）来引用本地图片，如果我将图片存储在在线位置并使用prop：source:{uri: 'https://www.domian.com'+this.props.model.id'.png'}，我可以实现这一点。但显然require只需要一个字符串，所以我无法传递一个变量？

我可以使用冗长的for each/if语句，但会有100多个选项的图像名称，所以我宁愿将图像存储在本地。

我已经尝试了许多不同的方法，但没有找到任何解决办法，是否有其他的方法可以解决这个问题？

- AhoySceneBoy

Answer 1

以下是适用于我的方法:

// our data
// we need to require all images, 
// so that React Native knows about them statically
const items = [
    {
        id: '001',
        image: require('../images/001.jpeg'),
    },
    {
        id: '002',
        image: require('../images/002.jpeg'),
    },
];

// render
items.map( (item) => 
    <Image key={item.id} source={item.image} />
)

NB：这基于@soutot的更新答案，但更简化。我认为没有必要使用布尔值。

- Ben

---

这在我的IOS设备上不起作用。有人遇到过类似的问题吗？ - Arturio

Answer 2

根据您的评论和示例，情况如下： imageId是JSON格式，您正在使用props传递它。您的baseurl是否相同？如果是，则可以实现单个字符串，如下所示：

source:{uri: `https://www.domian.com/${this.props.model.id}.png`}

我希望这对你有用：这是一个示例，其中我从不同资源接收图像的URL的一部分，类似于你的情况：

https://github.com/patilrevansidh/movidb/blob/master/src/modules/movie/detail/screen.js

- Revansiddh

Answer 3

根据官方文档的建议，使用条件渲染来创建包含正确 URI 路径的 Image require。

// GOOD
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');
<Image source={icon} />;

https://facebook.github.io/react-native/docs/images.html

关于条件渲染的更多信息：https://reactjs.org/docs/conditional-rendering.html 使用array的示例（仅为示例，可能有错别字）：

const imgs = [
  {
   id: '001',
   require: require('../images/001.jpeg'),
  },
  {
   id: '002',
   require: require('../images/002.jpeg'),
  },
];

imgs.map((item, i) => 
item.id === '001' &&
<Image
  key={i}
  source={item.require}
/>)

希望能有所帮助

- soutot

---

啊，这就是问题所在了。不是一个布尔值来决定需要哪个图像，而是 JSON 文件中的 ID 会是一个字符串，比如 'badge-001'，需要加载的图片将会有文件名，例如 'badge-001.png'。因此，我需要能够做类似于 './images/'+this.props.model.id'+'.png' 的事情。 - AhoySceneBoy

据我所知，您想要实现的情况是不可能的，因为React Native需要事先知道bundle。但是，您可以使用一个包含所有可能要呈现的图像的array，并在必要时有条件地使用它们。 - soutot

我添加了一个使用数组的示例，希望它有所帮助。 - soutot