Support multi sources for images

Summary:
@public
This adds support for specifying multiple sources for an image component, so that native can choose the best one based on the flexbox-computed size of the image.
The API is as follows: the image component receives in the `source` prop an array of objects of the type `{uri, width, height}`. On the native side, the native component will wait for the layout pass to receive the width and height of the image, and then parse the array to find the best fitting one. For now, this does not support local resources, but it will be added soon.
To see how this works and play with it, there's an example called `MultipleSourcesExample` under `ImageExample` In UIExplorer.

Reviewed By: foghina

Differential Revision: D3364550
This commit is contained in:
Andrei Coman 2016-06-13 14:04:19 -07:00 committed by Ahmed El-Helw
parent e1ece03593
commit 65f4988ddf
2 changed files with 8 additions and 2 deletions

View File

@ -13,6 +13,7 @@ import javax.annotation.Nullable;
import com.facebook.csslayout.Spacing;
import com.facebook.drawee.drawable.ScalingUtils.ScaleType;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.uimanager.PixelUtil;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.uimanager.ViewProps;
@ -86,7 +87,9 @@ import com.facebook.react.views.image.ImageResizeMode;
}
@ReactProp(name = "src")
public void setSource(@Nullable String source) {
public void setSource(@Nullable ReadableArray sources) {
final String source =
(sources == null || sources.size() == 0) ? null : sources.getMap(0).getString("uri");
getMutableDrawImage().setImageRequest(
ImageRequestHelper.createImageRequest(getThemedContext(), source));
}

View File

@ -14,6 +14,7 @@ import javax.annotation.Nullable;
import android.text.SpannableStringBuilder;
import android.text.Spanned;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.uimanager.annotations.ReactProp;
/**
@ -65,7 +66,9 @@ import com.facebook.react.uimanager.annotations.ReactProp;
}
@ReactProp(name = "src")
public void setSource(@Nullable String source) {
public void setSource(@Nullable ReadableArray sources) {
final String source =
(sources == null || sources.size() == 0) ? null : sources.getMap(0).getString("uri");
getMutableSpan().setImageRequest(
ImageRequestHelper.createImageRequest(getThemedContext(), source));
}