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

Question

这里是 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 工作正常。

Answer 1

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

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

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

React Native: Rendering an Image component with uri provided through state variable

reactjs

react-native

promise

react-native-firebase