kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-05 22:38:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Support multi sources for images

Browse Source 
Summary:
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

fbshipit-source-id: 66c5aeb2794f2ffeff8da39a9c0b95155fb2d41f
This commit is contained in:
Andrei Coman
2016-06-13 14:04:19 -07:00
committed by Facebook Github Bot 0
parent 9443bc5c3f
commit 617a38d984
6 changed files with 203 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
ReactAndroid/src/test/java/com/facebook/react/views/image/ReactImagePropertyTest.java
View File

@@ -14,6 +14,7 @@ import android.util.DisplayMetrics;
import com.facebook.drawee.backends.pipeline.Fresco;
import com.facebook.react.bridge.CatalystInstance;
import com.facebook.react.bridge.JavaOnlyArray;
import com.facebook.react.bridge.ReactTestHelper;
import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
import com.facebook.react.bridge.ReactApplicationContext;
@@ -82,7 +83,9 @@ public class ReactImagePropertyTest {
public void testBorderColor() {
ReactImageManager viewManager = new ReactImageManager();
ReactImageView view = viewManager.createViewInstance(mThemeContext);
viewManager.updateProperties(view, buildStyles("src", "http://mysite.com/mypic.jpg"));
viewManager.updateProperties(
view,
buildStyles("src", JavaOnlyArray.of(JavaOnlyMap.of("uri", "http://mysite.com/mypic.jpg"))));
viewManager.updateProperties(view, buildStyles("borderColor", Color.argb(0, 0, 255, 255)));
int borderColor = view.getHierarchy().getRoundingParams().getBorderColor();
@@ -110,7 +113,9 @@ public class ReactImagePropertyTest {
public void testRoundedCorners() {
ReactImageManager viewManager = new ReactImageManager();
ReactImageView view = viewManager.createViewInstance(mThemeContext);
viewManager.updateProperties(view, buildStyles("src", "http://mysite.com/mypic.jpg"));
viewManager.updateProperties(
view,
buildStyles("src", JavaOnlyArray.of(JavaOnlyMap.of("uri", "http://mysite.com/mypic.jpg"))));
// We can't easily verify if rounded corner was honored or not, this tests simply verifies
// we're not crashing..