【问题标题】:Using a placeholder image in react native without state manipulation在没有状态操作的情况下使用占位符图像进行本机反应
【发布时间】:2020-08-25 11:12:08
【问题描述】:

所以下面的部分是代码sn-p。这些图像在平面列表中呈现。

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

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

【问题讨论】:

    标签: react-native react-native-image


    【解决方案1】:

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

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

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

    【讨论】:

    • 是的,但是图片标签在一个单独的组件中。
    • 在 FlatList 你有类似的东西: data={this.state.imageArray} renderItem={({ item, index }) => { return ( ) }} / >?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-01-08
    • 2019-12-15
    • 2019-09-28
    • 1970-01-01
    • 2017-04-22
    相关资源
    最近更新 更多