zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2026-05-27 04:32:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor Use and Defs element with native code support(iOS)

Browse Source
This commit is contained in:
Horcrux
2016-07-19 23:09:51 +08:00
parent 4eddfc6885
commit dd6cb80e84
37 changed files with 535 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Example/examples.js
+2 -17
View File
@@ -14,24 +14,9 @@ import * as Symbol from './examples/Symbol';
import * as Gradients from './examples/Gradients';
import * as Clipping from './examples/Clipping';
import * as Image from './examples/Image';
import * as Definations from './examples/Definations';
import * as TouchEvents from './examples/TouchEvents';
export {
Svg,
Rect,
Circle,
Ellipse,
Line,
Polygon,
Polyline,
Path,
Text,
Stroking,
G,
Use,
Symbol,
Gradients,
Clipping,
Image,
TouchEvents
Definations
};
Example/examples/Definations.js
+51
View File
@@ -0,0 +1,51 @@
import React, {
Component
} from 'react';
import Svg, {
Defs,
G,
Path,
Use,
Rect
} from 'react-native-svg';
class DefsExample extends Component{
static title = 'basic Defs usage';
render() {
return <Svg
height="100"
width="100"
>
<Defs>
<G id="path" x="5" y="2">
<Path id="test" fill='red' d="M38.459,1.66A0.884,0.884,0,0,1,39,2.5a0.7,0.7,0,0,1-.3.575L23.235,16.092,27.58,26.1a1.4,1.4,0,0,1,.148.3,1.3,1.3,0,0,1,0,.377,1.266,1.266,0,0,1-2.078.991L15.526,20.6l-7.58,4.35a1.255,1.255,0,0,1-.485,0,1.267,1.267,0,0,1-1.277-1.258q0-.01,0-0.02a1.429,1.429,0,0,1,0-.446C7.243,20.253,8.6,16.369,8.6,16.29L3.433,13.545A0.743,0.743,0,0,1,2.9,12.822a0.822,0.822,0,0,1,.623-0.773l8.164-2.972,3.018-8.5A0.822,0.822,0,0,1,15.427,0a0.752,0.752,0,0,1,.752.555l2.563,6.936S37.65,1.727,37.792,1.685A1.15,1.15,0,0,1,38.459,1.66Z"/>
</G>
</Defs>
<Use href="url(#path)" x="0" fill="blue" />
<Use href="url(#path)" x="10" fill="#3a8" />
</Svg>;
}
}
const icon = <Svg
height="20"
width="20"
>
<Defs>
<G id="path">
<Path fill='red' d="M38.459,1.66A0.884,0.884,0,0,1,39,2.5a0.7,0.7,0,0,1-.3.575L23.235,16.092,27.58,26.1a1.4,1.4,0,0,1,.148.3,1.3,1.3,0,0,1,0,.377,1.266,1.266,0,0,1-2.078.991L15.526,20.6l-7.58,4.35a1.255,1.255,0,0,1-.485,0,1.267,1.267,0,0,1-1.277-1.258q0-.01,0-0.02a1.429,1.429,0,0,1,0-.446C7.243,20.253,8.6,16.369,8.6,16.29L3.433,13.545A0.743,0.743,0,0,1,2.9,12.822a0.822,0.822,0,0,1,.623-0.773l8.164-2.972,3.018-8.5A0.822,0.822,0,0,1,15.427,0a0.752,0.752,0,0,1,.752.555l2.563,6.936S37.65,1.727,37.792,1.685A1.15,1.15,0,0,1,38.459,1.66Z"/>
</G>
</Defs>
<Use href="url(#path)" x="10" fill="#3a8" />
</Svg>;
const samples = [DefsExample];
export {
icon,
samples
};
Example/main.js
+2 -1
View File
@@ -111,7 +111,8 @@ const styles = StyleSheet.create({
}
});
const names = ['Svg', 'Stroking', 'Path', 'Line', 'Rect', 'Polygon', 'Polyline', 'Circle', 'Ellipse', 'G', 'Text', 'Use', 'Symbol', 'Gradients', 'Clipping', 'Image', 'TouchEvents'];
//const names = ['Svg', 'Stroking', 'Path', 'Line', 'Rect', 'Polygon', 'Polyline', 'Circle', 'Ellipse', 'G', 'Text', 'Use', 'Symbol', 'Gradients', 'Clipping', 'Image', 'TouchEvents'];
const names = ['Definations'];
class SvgExample extends Component {
constructor() {