如何在React Native中使用Image.prefetch的結果？

Question

我試圖在入門級組件中使用Image.prefetch()預取圖像，以便當用戶導航到顯示上述圖像的子組件時，它將準備好以較少的延遲顯示。

Image.prefetch()在React Native文檔中的Image主題下提到，但我發現那裏的例子相當複雜。

有人可以使用這個功能解釋它如何爲我上面提到的簡單用例工作嗎？

我是這樣想實現它：

// main.js 

class Main extends Component { 
    render() { 
     let prefetch = Image.prefetch(this.props.url); 
     return (
      <Content imgUrl={this.props.url}/> 
     ); 
    } 
} 



// content.js 
class Content extends Component { 
    render() { 
     const { imgUrl } = this.props; 
     return (
      <Image source={imgUrl} /> 
     ); 
    } 
} 

這個實現的結果是一個空圖像，因爲它只是返回無圖像的承諾。

我在這裏錯過了什麼？

Answer 1

您需要後呈現內容預取解決：

render() { 
 
    Image.prefetch(this.props.url) 
 
     .then(() => { 
 
      return (
 
       <Content imgUrl={this.props.url} /> 
 
      ); 
 
     }) 
 
     .catch(error => console.log(error)) 
 
}

您也可以顯示ActivityIndi​​cator而主要的內部預取渲染，對變化的狀態變量條件它的標誌（真/假），當預取被解決時，指示器在該事件中消失。