mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Andrei Coman
65f4988ddf
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
83 lines
2.3 KiB
Java
83 lines
2.3 KiB
Java
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*/
|
|
|
|
package com.facebook.react.flat;
|
|
|
|
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;
|
|
|
|
/**
|
|
* RCTTextInlineImage
|
|
*/
|
|
/* package */ class RCTTextInlineImage extends FlatTextShadowNode {
|
|
|
|
private InlineImageSpanWithPipeline mInlineImageSpan = new InlineImageSpanWithPipeline();
|
|
|
|
@Override
|
|
public void setStyleWidth(float width) {
|
|
super.setStyleWidth(width);
|
|
|
|
if (mInlineImageSpan.getWidth() != width) {
|
|
getMutableSpan().setWidth(width);
|
|
notifyChanged(true);
|
|
}
|
|
}
|
|
|
|
@Override
|
|
public void setStyleHeight(float height) {
|
|
super.setStyleHeight(height);
|
|
|
|
if (mInlineImageSpan.getHeight() != height) {
|
|
getMutableSpan().setHeight(height);
|
|
notifyChanged(true);
|
|
}
|
|
}
|
|
|
|
@Override
|
|
protected void performCollectText(SpannableStringBuilder builder) {
|
|
builder.append("I");
|
|
}
|
|
|
|
@Override
|
|
protected void performApplySpans(SpannableStringBuilder builder, int begin, int end) {
|
|
mInlineImageSpan.freeze();
|
|
builder.setSpan(
|
|
mInlineImageSpan,
|
|
begin,
|
|
end,
|
|
Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
|
|
}
|
|
|
|
@Override
|
|
protected void performCollectAttachDetachListeners(StateBuilder stateBuilder) {
|
|
// mInlineImageSpan should already be frozen so no need to freeze it again
|
|
stateBuilder.addAttachDetachListener(mInlineImageSpan);
|
|
}
|
|
|
|
@ReactProp(name = "src")
|
|
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));
|
|
}
|
|
|
|
private InlineImageSpanWithPipeline getMutableSpan() {
|
|
if (mInlineImageSpan.isFrozen()) {
|
|
mInlineImageSpan = mInlineImageSpan.mutableCopy();
|
|
}
|
|
return mInlineImageSpan;
|
|
}
|
|
}
|