mirror of
https://github.com/zoriya/react-native-svg.git
synced 2026-06-06 00:12:21 +00:00
Support setting dimensions of Svg using stylesheet.
[android] Support borders on Svg root
This commit is contained in:
@@ -14,7 +14,6 @@ import android.graphics.Bitmap;
|
|||||||
import android.graphics.Canvas;
|
import android.graphics.Canvas;
|
||||||
import android.graphics.Point;
|
import android.graphics.Point;
|
||||||
import android.view.View;
|
import android.view.View;
|
||||||
import android.view.ViewGroup;
|
|
||||||
|
|
||||||
import com.facebook.react.bridge.ReactContext;
|
import com.facebook.react.bridge.ReactContext;
|
||||||
import com.facebook.react.uimanager.ReactCompoundView;
|
import com.facebook.react.uimanager.ReactCompoundView;
|
||||||
@@ -27,7 +26,7 @@ import javax.annotation.Nullable;
|
|||||||
* Custom {@link View} implementation that draws an RNSVGSvg React view and its children.
|
* Custom {@link View} implementation that draws an RNSVGSvg React view and its children.
|
||||||
*/
|
*/
|
||||||
@SuppressLint("ViewConstructor")
|
@SuppressLint("ViewConstructor")
|
||||||
public class SvgView extends ViewGroup implements ReactCompoundView {
|
public class SvgView extends ReactViewGroup implements ReactCompoundView {
|
||||||
|
|
||||||
@SuppressWarnings("unused")
|
@SuppressWarnings("unused")
|
||||||
public enum Events {
|
public enum Events {
|
||||||
@@ -53,6 +52,7 @@ public class SvgView extends ViewGroup implements ReactCompoundView {
|
|||||||
super(reactContext);
|
super(reactContext);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
public void addView(View child, int index, LayoutParams params) {
|
public void addView(View child, int index, LayoutParams params) {
|
||||||
if (!(child instanceof RenderableView)) {
|
if (!(child instanceof RenderableView)) {
|
||||||
super.addView(child, index, params);
|
super.addView(child, index, params);
|
||||||
|
|||||||
@@ -12,9 +12,11 @@ package com.horcrux.svg;
|
|||||||
import android.util.SparseArray;
|
import android.util.SparseArray;
|
||||||
|
|
||||||
import com.facebook.react.uimanager.ThemedReactContext;
|
import com.facebook.react.uimanager.ThemedReactContext;
|
||||||
import com.facebook.react.uimanager.ViewGroupManager;
|
import com.facebook.react.views.view.ReactViewGroup;
|
||||||
|
import com.facebook.react.views.view.ReactViewManager;
|
||||||
import com.facebook.yoga.YogaMeasureFunction;
|
import com.facebook.yoga.YogaMeasureFunction;
|
||||||
import com.facebook.yoga.YogaMeasureMode;
|
import com.facebook.yoga.YogaMeasureMode;
|
||||||
|
import com.facebook.yoga.YogaMeasureOutput;
|
||||||
import com.facebook.yoga.YogaNode;
|
import com.facebook.yoga.YogaNode;
|
||||||
|
|
||||||
import javax.annotation.Nullable;
|
import javax.annotation.Nullable;
|
||||||
@@ -23,7 +25,7 @@ import javax.annotation.Nullable;
|
|||||||
* ViewManager for RNSVGSvgView React views. Renders as a {@link SvgView} and handles
|
* ViewManager for RNSVGSvgView React views. Renders as a {@link SvgView} and handles
|
||||||
* invalidating the native view on shadow view updates happening in the underlying tree.
|
* invalidating the native view on shadow view updates happening in the underlying tree.
|
||||||
*/
|
*/
|
||||||
class SvgViewManager extends ViewGroupManager<SvgView> {
|
class SvgViewManager extends ReactViewManager {
|
||||||
|
|
||||||
private static final String REACT_CLASS = "RNSVGSvgView";
|
private static final String REACT_CLASS = "RNSVGSvgView";
|
||||||
|
|
||||||
@@ -35,7 +37,7 @@ class SvgViewManager extends ViewGroupManager<SvgView> {
|
|||||||
YogaMeasureMode widthMode,
|
YogaMeasureMode widthMode,
|
||||||
float height,
|
float height,
|
||||||
YogaMeasureMode heightMode) {
|
YogaMeasureMode heightMode) {
|
||||||
throw new IllegalStateException("SurfaceView should have explicit width and height set");
|
return YogaMeasureOutput.make(width, height);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -77,17 +79,18 @@ class SvgViewManager extends ViewGroupManager<SvgView> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
protected SvgView createViewInstance(ThemedReactContext reactContext) {
|
public SvgView createViewInstance(ThemedReactContext reactContext) {
|
||||||
return new SvgView(reactContext);
|
return new SvgView(reactContext);
|
||||||
}
|
}
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
public void updateExtraData(SvgView root, Object extraData) {
|
public void updateExtraData(ReactViewGroup root, Object extraData) {
|
||||||
|
super.updateExtraData(root, extraData);
|
||||||
root.invalidate();
|
root.invalidate();
|
||||||
}
|
}
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
public void onDropViewInstance(SvgView view) {
|
public void onDropViewInstance(ReactViewGroup view) {
|
||||||
super.onDropViewInstance(view);
|
super.onDropViewInstance(view);
|
||||||
|
|
||||||
int tag = view.getId();
|
int tag = view.getId();
|
||||||
|
|||||||
+10
-6
@@ -23,7 +23,8 @@ let id = 0;
|
|||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
svg: {
|
svg: {
|
||||||
backgroundColor: "transparent"
|
backgroundColor: "transparent",
|
||||||
|
borderWidth: 0
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -73,17 +74,20 @@ class Svg extends Shape {
|
|||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
opacity,
|
opacity,
|
||||||
width,
|
|
||||||
height,
|
|
||||||
viewBox,
|
viewBox,
|
||||||
preserveAspectRatio,
|
preserveAspectRatio,
|
||||||
style,
|
style,
|
||||||
color,
|
|
||||||
children,
|
children,
|
||||||
...props
|
...props
|
||||||
} = this.props;
|
} = this.props;
|
||||||
let dimensions;
|
const stylesAndProps = { ...style, ...props };
|
||||||
|
const {
|
||||||
|
color,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
} = stylesAndProps;
|
||||||
|
|
||||||
|
let dimensions;
|
||||||
if (width && height) {
|
if (width && height) {
|
||||||
dimensions = {
|
dimensions = {
|
||||||
width: width[width.length - 1] === "%" ? width : +width,
|
width: width[width.length - 1] === "%" ? width : +width,
|
||||||
@@ -100,7 +104,7 @@ class Svg extends Shape {
|
|||||||
{...props}
|
{...props}
|
||||||
bbWidth={w}
|
bbWidth={w}
|
||||||
bbHeight={h}
|
bbHeight={h}
|
||||||
tintColor={color || style && style.color}
|
tintColor={color}
|
||||||
{...extractResponder(props, this)}
|
{...extractResponder(props, this)}
|
||||||
{...extractViewBox({ viewBox, preserveAspectRatio })}
|
{...extractViewBox({ viewBox, preserveAspectRatio })}
|
||||||
ref={ele => {
|
ref={ele => {
|
||||||
|
|||||||
Reference in New Issue
Block a user