react-native - react native : Issue in declaring the image source as a function?

Question

这是我尝试用 React Native 做的事情:

1. 从数据库中获取图片 URL 数据。
2. 检查图像是否存在于存储中。
3. 如果图像存在，渲染它。如果不是，请渲染占位符图像。

基本上，我声明了一个函数来执行步骤 2 和 3，并将其作为源放在图像组件中。但是，Image 组件不会呈现任何图像，即使目标图像存在于具有 URL 的存储中也是如此。

这里可能发生了什么？这是我正在使用的代码。不明白为什么这段代码不起作用……也许是语法错误？执行此操作的修复/更好方法是什么？

//The function to check if the image actually exists and return placeholder if not
const checkImageURL = (url) => {
    const placeholder_url='url_of_placeholder_image';
    fetch(url)
       .then(res => {
       if(res.status == 404){
         return placeholder_url;
       }
       else{
         return url;
      }
    })
   .catch(err=>{return placeholder_url})
}

//The way I declared the source for the image
<Image source={uri:checkImageURL(url)} style={style.mainImage}/>

Answer 1

remote URL 的source prop 必须是对象，所以需要多加一个花括号

<Image source={{uri:checkImageURL(url)}} style={style.mainImage}/>

有关 Prop 中花括号的更多信息 here