reactjs - React Native：使用通过状态变量提供的 uri 渲染图像组件

Question

这里是 React Native 学习者。我正在尝试呈现如下所示的功能组件。我正在通过 Firebase 获取 URI，该 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 可以正常工作。

标签： reactjsreact-nativepromisereact-native-firebase

Answer 1

该uri属性接受字符串 url，并且您将 url 作为对象传递。请按以下方式传递字符串uri：

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