React Native：使用状态变量提供的uri渲染Image组件

如何解决React Native：使用状态变量提供的uri渲染Image组件

这里是React Native学习者。 我正在尝试呈现如下所示的功能组件。 我正在通过Firebase来获取URI，而1-2秒的时滞后会获取它。 提取后，我将更新状态变量。

import storage from '@react-native-firebase/storage';

const SearchResultCard = ()=>{
  const [imageURL,setImageURL] = useState('https://www.publicdomainpictures.net/pictures/200000/nahled/plain-red-background.jpg');  // Some placeholder image.
  var storageRef = storage().ref();
  storageRef.child("photos/flower.jpg").getDownloadURL().then((url)=>{console.log(url); setImageURL(url);});  // setting the valid image URL 

  setTimeout(()=> console.log("++++URL fetched: ",imageURL),2000);  // prints a correct URL after 2 seconds.

  return (
  <View>
    <Image style={styles.SearchResultImage}
          source={{
            uri:
            {imageURL},}}
    />
  </View>
  );
}

....
....rendering the SearchResultCard Component
....

但是在设备中，它显示错误：

我确认，明显的时间延迟后成功获取URL。 我的困惑是，如何通过状态变量提供Image source.uri？ 提供一个硬编码的URL可以正常工作。

解决方法

uri属性接受字符串url，并且您将url作为对象传递。请在uri中传递字符串，如下所示：

<Image 
  style={styles.SearchResultImage}
  source={{
    uri: imageURL,// remove braces
  }}
/>