React Native - 在渲染前準備圖像

過去幾天我一直在努力尋找解決問題的方法。我需要每次顯示一個圖像>組件一個（要求，因此ListView不是一個選項）。此組件具有指向Firebase圖像的URI。我想在componentWillMount準備一個包含了所有將被顯示如組件圖片數組：React Native - 在渲染前準備圖像

let mediaArray = this.props.list.map(function(media){ 
    return <Image style={styles.imageStyle} source={{uri: media}} />; 
}); 
this.setState({list: mediaArray});

然而，當我嘗試在渲染功能，我還需要到陣列上顯示特定圖像等待幾秒鐘即可看到圖像。

render(){ 
    {this.state.list[currentIndex]} 
}

如果以前準備好了，爲什麼它會再次嘗試獲取圖像？這表明React只在渲染時查找源代碼？

你可以說我正在嘗試創建一個「Feed」（比如instagram，facebook等），但不是傳統的，因爲我需要一次顯示一個圖像組件。

我也嘗試調查緩存圖像，但這不會幫助我，因爲在現實中我會試圖獲得數百個圖像。

來源

2017-06-23 Joseph

您意識到React Native在呈現之前不會爲您的圖像獲取圖像來源。如果您要預先加載圖像，則必須在圖像源上撥打prefetch。使用代碼一個簡單的例子將modifywhere創建mediaArray看起來像這樣：

let mediaArray = this.props.list.map(function(media){ 
    Image.prefetch(media); // that's it! 
    // you can now remove this following line and just construct a single image tag later. 
    return <Image style={styles.imageStyle} source={{uri: media}} />; 
}); 
this.setState({list: mediaArray});

，如果你想多一點聰明，你可以預取只有幾個即將到來的圖像每次currentIndex更新的。如果您需要更多指導，請分享更多此組件的代碼。

希望這會有所幫助！

來源

2017-06-23 02:53:48

嗯，我實際上嘗試了這種預取方式，並沒有工作，我仍然看到負載延遲。據我所知prefetch將映像存儲到磁盤緩存中。那麼如果你不知道它存儲在哪裏，你究竟如何使用它？ – Joseph

另外，您以後構建單個圖像標籤意味着什麼？「媒體」基本上就是烏里。 – Joseph

React Native - 在渲染前準備圖像

回答

相關問題