javascript - 图像源 uri 内的 if 语句 - React Native

Question

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

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

有谁可以帮忙吗？

Answer 1

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

EG:

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

注意:我逆转了你的情况，这对我来说似乎是倒退的。您希望在长度非零时使用缩略图，否则使用占位符，因此我删除了否定。