Implement multi-source Images on iOS

Summary: Mirrors Android's support for multiple sources for Image, allowing us to fetch new images as the size of the view changes.

Reviewed By: mmmulani

Differential Revision: D3615134

fbshipit-source-id: 3d0bf2b75f63a4379e0e49f2dab9aea351b31d5f
This commit is contained in:
David Goldman
2016-07-28 13:58:50 -07:00
committed by Facebook Github Bot 2
parent 7e2e0deeb0
commit fd48bc3cff
8 changed files with 120 additions and 54 deletions

View File

@@ -103,6 +103,11 @@ const Image = React.createClass({
style: StyleSheetPropType(ImageStylePropTypes),
/**
* The image source (either a remote URL or a local file resource).
*
* This prop can also contain several remote URLs, specified together with
* their width and height and potentially with scale/other URI arguments.
* The native side will then choose the best `uri` to display based on the
* measured size of the image container.
*/
source: ImageSourcePropType,
/**
@@ -268,15 +273,25 @@ const Image = React.createClass({
render: function() {
const source = resolveAssetSource(this.props.source) || { uri: undefined, width: undefined, height: undefined };
const {width, height, uri} = source;
const style = flattenStyle([{width, height}, styles.base, this.props.style]) || {};
let sources;
let style;
if (Array.isArray(source)) {
style = flattenStyle([styles.base, this.props.style]) || {};
sources = source;
} else {
const {width, height, uri} = source;
style = flattenStyle([{width, height}, styles.base, this.props.style]) || {};
sources = [source];
if (uri === '') {
console.warn('source.uri should not be an empty string');
}
}
const resizeMode = this.props.resizeMode || (style || {}).resizeMode || 'cover'; // Workaround for flow bug t7737108
const tintColor = (style || {}).tintColor; // Workaround for flow bug t7737108
if (uri === '') {
console.warn('source.uri should not be an empty string');
}
if (this.props.src) {
console.warn('The <Image> component requires a `source` property rather than `src`.');
}
@@ -287,7 +302,7 @@ const Image = React.createClass({
style={style}
resizeMode={resizeMode}
tintColor={tintColor}
source={source}
source={sources}
/>
);
},