图像源uri中的if语句-反应本机

Question

有一个api有时会为图像URL发送一个空字段并做出响应native告诉我source.uri不应该为空，但我更担心，因为它破坏了我的网格布局。我想使用相同大小的占位符来修复该问题。这是我到目前为止尝试过的

<View>
    <Image source={{ !this.item.thumbnail.length ? uri: 
    item.thumbnail : {require('/assets/images/placeholder.jpg')} }} />
</View>

任何人都可以帮忙。

Answer 1

您的尝试非常接近，但是语法不正确。您只需要确保在三元组的一个分支中，您将返回一个带有uri字段的对象，而在另一分支中，您将require直接返回该调用（不要像在示例中那样包装它）。

例如：

<Image
    // Note there is only a single enclosing brace here:
    source={this.item.thumbnail.length
        ? {uri: item.thumbnail}                      // Use object with 'uri'
        : require('/assets/images/placeholder.jpg')} // Or use require call directly
/>

注意：我扭转了您的状况，这对我来说似乎是倒退的。您要在缩略图的长度为非零时使用缩略图，否则要使用占位符，因此我删除了否定项。