Merged RCTNetworkImageView functionality into RCTStaticImage

Summary:
RCTNetworkImageView and RCTStaticImage had significant overlap in functionality, but each had a different subset of features and bugs.

This diff merges most of the functionality of RCTNetworkImageView into RCTStaticImage, eliminating some bugs in the former, such as constant redrawing when properties were changed.

I've also removed the onLoadAbort event for now (as it wasn't implemented), and renamed the other events to match the web specs for `<img>` and XHMLHttpRequest. The API is essentially what Adobe proposed here: http://blogs.adobe.com/webplatform/2012/01/13/html5-image-progress-events/

The following features have not yet been ported from RCTNetworkImageView:

- Background color compositing. It's not clear that this adds much value and it increases memory consumption, etc.
- Image request cancelling when images are removed from view. Again, it's not clear if this is a huge benefit, but if it is it should be combined with other optimisations, such as unloading offscreen images.

(Note that this only affects the open source fork. For now, internal apps will still use FBNetworkImageView for remote images.)
This commit is contained in:
Nick Lockwood
2015-07-15 19:17:13 -01:00
parent 82a774e92b
commit 61c648d564
17 changed files with 253 additions and 542 deletions

View File

@@ -32,7 +32,7 @@ var NetworkImageExample = React.createClass({
getInitialState: function() {
return {
error: false,
loading: true,
loading: false,
progress: 0
};
},
@@ -47,10 +47,10 @@ var NetworkImageExample = React.createClass({
<Image
source={this.props.source}
style={[styles.base, {overflow: 'visible'}]}
onLoadError={(e) => this.setState({error: e.nativeEvent.error})}
onLoadProgress={(e) => this.setState({progress: Math.max(0, Math.round(100 * e.nativeEvent.written / e.nativeEvent.total))}) }
onLoadEnd={() => this.setState({loading: false, error: false})}
onLoadAbort={() => this.setState({error: 'Loading has aborted'})} >
onLoadStart={(e) => this.setState({loading: true})}
onError={(e) => this.setState({error: e.nativeEvent.error, loading: false})}
onProgress={(e) => this.setState({progress: Math.round(100 * e.nativeEvent.loaded / e.nativeEvent.total)})}
onLoad={() => this.setState({loading: false, error: false})}>
{loader}
</Image>;
}