mirror of
https://github.com/zoriya/react-native-svg.git
synced 2026-06-08 17:15:04 +00:00
@@ -23,10 +23,12 @@ class GExample extends Component{
|
|||||||
stroke="pink"
|
stroke="pink"
|
||||||
strokeWidth="3"
|
strokeWidth="3"
|
||||||
>
|
>
|
||||||
<Circle
|
<G>
|
||||||
cx="25"
|
<Circle
|
||||||
cy="25"
|
cx="25"
|
||||||
/>
|
cy="25"
|
||||||
|
/>
|
||||||
|
</G>
|
||||||
<Circle
|
<Circle
|
||||||
cx="25"
|
cx="25"
|
||||||
cy="75"
|
cy="75"
|
||||||
|
|||||||
@@ -10,7 +10,8 @@ import Svg, {
|
|||||||
Ellipse,
|
Ellipse,
|
||||||
Circle,
|
Circle,
|
||||||
Text,
|
Text,
|
||||||
Rect
|
Rect,
|
||||||
|
G
|
||||||
} from 'react-native-svg';
|
} from 'react-native-svg';
|
||||||
|
|
||||||
class LinearGradientHorizontal extends Component{
|
class LinearGradientHorizontal extends Component{
|
||||||
@@ -32,7 +33,7 @@ class LinearGradientHorizontal extends Component{
|
|||||||
}
|
}
|
||||||
|
|
||||||
class LinearGradientVertical extends Component{
|
class LinearGradientVertical extends Component{
|
||||||
static title = 'Define an ellipse with a horizontal linear gradient from yellow to red';
|
static title = 'Define an ellipse with a vertical linear gradient from yellow to red';
|
||||||
render() {
|
render() {
|
||||||
return <Svg
|
return <Svg
|
||||||
height="150"
|
height="150"
|
||||||
@@ -44,7 +45,11 @@ class LinearGradientVertical extends Component{
|
|||||||
<Stop offset="100%" stopColor="red" stopOpacity="1" />
|
<Stop offset="100%" stopColor="red" stopOpacity="1" />
|
||||||
</LinearGradient>
|
</LinearGradient>
|
||||||
</Defs>
|
</Defs>
|
||||||
<Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
|
<G>
|
||||||
|
<G>
|
||||||
|
<Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
|
||||||
|
</G>
|
||||||
|
</G>
|
||||||
</Svg>;
|
</Svg>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+11
-3
@@ -10,6 +10,11 @@ import extractProps from '../lib/extract/extractProps';
|
|||||||
class G extends Component{
|
class G extends Component{
|
||||||
static displayName = 'G';
|
static displayName = 'G';
|
||||||
|
|
||||||
|
static contextTypes = {
|
||||||
|
svgId: numberProp,
|
||||||
|
...contextProps
|
||||||
|
};
|
||||||
|
|
||||||
static childContextTypes = {
|
static childContextTypes = {
|
||||||
svgId: numberProp,
|
svgId: numberProp,
|
||||||
isInGroup: PropTypes.bool,
|
isInGroup: PropTypes.bool,
|
||||||
@@ -17,13 +22,16 @@ class G extends Component{
|
|||||||
};
|
};
|
||||||
|
|
||||||
getChildContext = () => {
|
getChildContext = () => {
|
||||||
return _.reduce(contextProps, (props, value, key) => {
|
let context = _.reduce(contextProps, (props, value, key) => {
|
||||||
props[key] = this.props[key];
|
if (!_.isNil(this.props[key])) {
|
||||||
|
props[key] = this.props[key];
|
||||||
|
}
|
||||||
return props;
|
return props;
|
||||||
}, {
|
}, {
|
||||||
svgId: this.props.svgId,
|
svgId: this.props.svgId || this.context.svgId,
|
||||||
isInGroup: true
|
isInGroup: true
|
||||||
});
|
});
|
||||||
|
return _.defaults({}, this.context, context);
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|||||||
Reference in New Issue
Block a user