mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Cache policy control for image source
Summary: In the context of an app an image exists in three resolutions on the server: `thumb` (30px) `feed` (300px) `full` (900px). When looking at an individual item a user can come either from the feed, via a permalink or from other parts of the app. This allows a situation where the `feed` image might or might not already be loaded somewhere in the app. In the detail view I want to render `thumb` with a blur (to quickly display something), then the `feed` image if it exists to have something decent to display until `full` loads. However it is quite a waste to load the `feed` image if it isn't already in cache, and will slow down the time until `full` is loaded. It is possible to track the navigation from feed->detail and that the `feed` image has actually completed loading by the feed component however as component hierarchies grow this turns into quite a lot of prop passing and bad separation of concerns. NSURLRequests accepts a [Cache Policy](https://developer.apple.com/reference/fo Closes https://github.com/facebook/react-native/pull/10844 Differential Revision: D4425959 Pulled By: lacker fbshipit-source-id: 679835439c761a2fc894f56eb6d744c036cf0b49
This commit is contained in:
committed by
Facebook Github Bot
parent
a6844bdf75
commit
52d8851fc8
@@ -304,6 +304,35 @@ exports.examples = [
|
||||
},
|
||||
platform: 'ios',
|
||||
},
|
||||
{
|
||||
title: 'Cache Policy',
|
||||
description: 'First image has never been loaded before and is instructed not to load unless in cache.' +
|
||||
'Placeholder image from above will stay. Second image is the same but forced to load regardless of' +
|
||||
' local cache state.',
|
||||
render: function () {
|
||||
return (
|
||||
<View style={styles.horizontal}>
|
||||
<Image
|
||||
defaultSource={require('./bunny.png')}
|
||||
source={{
|
||||
uri: smallImage.uri + '?cacheBust=notinCache' + Date.now(),
|
||||
cache: 'only-if-cached'
|
||||
}}
|
||||
style={styles.base}
|
||||
/>
|
||||
<Image
|
||||
defaultSource={require('./bunny.png')}
|
||||
source={{
|
||||
uri: smallImage.uri + '?cacheBust=notinCache' + Date.now(),
|
||||
cache: 'reload'
|
||||
}}
|
||||
style={styles.base}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
platform: 'ios',
|
||||
},
|
||||
{
|
||||
title: 'Border Color',
|
||||
render: function() {
|
||||
|
||||
Reference in New Issue
Block a user