react-native - 在没有状态操作的情况下在本机反应中使用占位符图像

Question

所以下面的部分是一个代码片段。这些图像在平面列表中呈现。

<Image
 resizeMode='cover'
 style={styles.itemImage}
 source={(product && !_.isEmpty(imageSource) && imageSource.url) ? { uri: imageSource.url } : noProductImage}
/>

现在提供的一些 URL 将出现，但它可能是一个损坏的链接，所以它会通过条件。现在我通过为每个图像源添加状态来解决这个问题，但是如果列表有 100 个项目，那么我们需要维护 100 个可能相同的不同状态。因此，如果有一些方法可以在没有状态的情况下解决这个问题。就像检查条件语句中的 URL 一样。

标签： react-nativereact-native-image

Answer 1

您可以对所有图像使用一个状态数组。

 this.state = {
   images : [ 
     {id: 0, url: '...'},
     {id: 1, url: '...'},
     ...
   ]
 }

也许这不是最好的解决方案，但在这种情况下，您只能使用一种状态。