zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2025-12-20 14:05:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve examples and document

Browse Source
This commit is contained in:
Horcrux
2016-07-27 11:34:42 +08:00
parent aee3038996
commit f2ee72bb76
7 changed files with 97 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
Example/examples.js
View File

@@ -9,12 +9,10 @@ import * as Path from './examples/Path';
import * as Text from './examples/Text'; import * as Text from './examples/Text';
import * as G from './examples/G'; import * as G from './examples/G';
import * as Stroking from './examples/Stroking'; import * as Stroking from './examples/Stroking';
import * as Use from './examples/Use';
import * as Symbol from './examples/Symbol';
import * as Gradients from './examples/Gradients'; import * as Gradients from './examples/Gradients';
import * as Clipping from './examples/Clipping'; import * as Clipping from './examples/Clipping';
import * as Image from './examples/Image'; import * as Image from './examples/Image';
import * as Definations from './examples/Definations'; import * as Reusable from './examples/Reusable';
import * as TouchEvents from './examples/TouchEvents'; import * as TouchEvents from './examples/TouchEvents';
export { export {
@@ -29,11 +27,9 @@ export {
Text, Text,
Stroking, Stroking,
G, G,
Use,
Symbol,
Gradients, Gradients,
Clipping, Clipping,
Image, Image,
TouchEvents, TouchEvents,
Definations Reusable
}; };

5
Example/examples/G.js
View File

@@ -67,8 +67,7 @@ class GTransform extends Component{
> >
<G <G
rotate="50" rotate="50"
origin="100, 50" origin="40, 30"
scale="0.75"
id="group" id="group"
> >
<Line <Line
@@ -97,7 +96,7 @@ class GTransform extends Component{
> >
Text grouped with shapes</Text> Text grouped with shapes</Text>
</G> </G>
<Use href="#group" x="5" y="20" rotate="-50" stroke="red" opacity="0.5" /> <Use href="#group" x="5" y="40" rotate="-50" scale="0.75" stroke="red" opacity="0.5" />
</Svg>; </Svg>;
} }
} }

88
Example/examples/Definations.js → Example/examples/Reusable.js
View File

@@ -7,16 +7,57 @@ import Svg, {
G, G,
Path, Path,
Use, Use,
Rect, Symbol,
Circle, Circle,
ClipPath, ClipPath,
LinearGradient, LinearGradient,
RadialGradient, RadialGradient,
Stop Stop,
Rect
} from 'react-native-svg'; } from 'react-native-svg';
class UseExample extends Component{
static title = 'Reuse svg code';
render() {
return <Svg
height="100"
width="300"
>
<Defs>
<G id="shape">
<G>
<Circle cx="50" cy="50" r="50" />
<Rect x="50" y="50" width="50" height="50" />
<Circle cx="50" cy="50" r="5" fill="blue" />
</G>
</G>
</Defs>
<Use href="#shape" x="20" y="0"/>
<Use href="#shape" x="170"y="0" />
</Svg>;
}
}
class UseShapes extends Component{
static title = 'Using Shapes Outside of a Defs Element';
render() {
return <Svg
height="110"
width="200"
>
<G id="shape">
<Rect x="0" y="0" width="50" height="50" />
</G>
<Use href="#shape" x="75" y="50" fill="#0f0"/>
<Use href="#shape" x="110" y="0" stroke="#0ff" fill="#8a3" rotation="45" origin="25, 25"/>
<Use href="#shape" x="150" y="50" stroke="#0f0" fill="none"/>
</Svg>;
}
}
class DefsExample extends Component{ class DefsExample extends Component{
static title = 'basic Defs usage'; static title = 'Basic Defs usage';
render() { render() {
return <Svg return <Svg
@@ -49,6 +90,43 @@ class DefsExample extends Component{
} }
} }
class SymbolExample extends Component{
static title = 'Symbol example, reuse elements with viewBox prop';
render() {
return <Svg
height="150"
width="110"
>
<Symbol id="symbol" viewBox="0 0 150 110" >
<Circle cx="50" cy="50" r="40" strokeWidth="8" stroke="red" fill="red"/>
<Circle cx="90" cy="60" r="40" strokeWidth="8" stroke="green" fill="white"/>
</Symbol>
<Use
href="#symbol"
x="0"
y="0"
width="100"
height="50"
/>
<Use
href="#symbol"
x="0"
y="50"
width="75"
height="38"
/>
<Use
href="#symbol"
x="0"
y="100"
width="50"
height="25"
/>
</Svg>;
}
}
const icon = <Svg const icon = <Svg
height="20" height="20"
width="20" width="20"
@@ -65,9 +143,7 @@ const icon = <Svg
<Use href="#path" fill="red" clipPath="url(#clip)" fillOpacity="0.6" stroke="#000" /> <Use href="#path" fill="red" clipPath="url(#clip)" fillOpacity="0.6" stroke="#000" />
</Svg>; </Svg>;
const samples = [UseExample, UseShapes, DefsExample, SymbolExample];
const samples = [DefsExample];
export { export {
icon, icon,

79
Example/examples/Symbol.js
View File

@@ -1,79 +0,0 @@
import React, {
Component
} from 'react';
import Svg, {
Symbol,
Circle,
Use,
Rect
} from 'react-native-svg';
class SymbolExample extends Component{
static title = 'Symbol example';
render() {
return <Svg
height="150"
width="110"
>
<Symbol id="symbol" viewBox="0 0 150 110" >
<Circle cx="50" cy="50" r="40" strokeWidth="8" stroke="red" fill="red"/>
<Circle cx="90" cy="60" r="40" strokeWidth="8" stroke="green" fill="white"/>
</Symbol>
<Use
href="#symbol"
x="0"
y="0"
width="100"
height="50"
/>
<Use
href="#symbol"
x="0"
y="50"
width="75"
height="38"
/>
<Use
href="#symbol"
x="0"
y="100"
width="50"
height="25"
/>
</Svg>;
}
}
const icon = <Svg
height="20"
width="20"
>
<Symbol id="symbol" viewBox="0 0 150 110">
<Circle cx="50" cy="50" r="40" strokeWidth="8" stroke="red" fill="red"/>
<Circle cx="90" cy="60" r="40" strokeWidth="8" stroke="green" fill="white"/>
</Symbol>
<Use
href="#symbol"
x="0"
y="0"
width="20"
height="10"
/>
<Use
href="#symbol"
x="0"
y="12"
width="20"
height="8"
/>
</Svg>;
const samples = [SymbolExample];
export {
icon,
samples
};

71
Example/examples/Use.js
View File

@@ -1,71 +0,0 @@
import React, {
Component
} from 'react';
import Svg, {
Defs,
Use,
G,
Rect,
Circle,
Polyline
} from 'react-native-svg';
class UseExample extends Component{
static title = 'Reuse svg code';
render() {
return <Svg
height="100"
width="300"
>
<Defs>
<G id="shape">
<G>
<Circle cx="50" cy="50" r="50" />
<Rect x="50" y="50" width="50" height="50" />
<Circle cx="50" cy="50" r="5" fill="blue" />
</G>
</G>
</Defs>
<Use href="#shape" x="20" y="0"/>
<Use href="#shape" x="170"y="0" />
</Svg>;
}
}
class UseShapes extends Component{
static title = 'Using Shapes Outside of a Defs Element';
render() {
return <Svg
height="110"
width="200"
>
<G id="shape">
<Rect x="0" y="0" width="50" height="50" />
</G>
<Use href="#shape" x="75" y="50" fill="#0f0"/>
<Use href="#shape" x="110" y="0" stroke="#0ff" fill="#8a3" rotation="45" origin="25, 25"/>
<Use href="#shape" x="150" y="50" stroke="#0f0" fill="none"/>
</Svg>;
}
}
const icon = <Svg
height="20"
width="20"
>
<Polyline
points="5,0 2,2 2,4 6,6 3,8 6,10 7,12 5,14 8,16 9,18"
fill="none"
stroke="#8a3"
id="line"
/>
<Use href="#line" x="10" stroke="#3a8" />
</Svg>;
const samples = [UseExample, UseShapes];
export {
icon,
samples
};

3
Example/main.js
View File

@@ -111,8 +111,7 @@ const styles = StyleSheet.create({
} }
}); });
const names = ['Svg', 'Stroking', 'Path', 'Line', 'Rect', 'Polygon', 'Polyline', 'Circle', 'Ellipse', 'G', 'Text', 'Use', 'Symbol', 'Gradients', 'Clipping', 'Image', 'TouchEvents', 'Definations']; const names = ['Svg', 'Stroking', 'Path', 'Line', 'Rect', 'Polygon', 'Polyline', 'Circle', 'Ellipse', 'G', 'Text', 'Gradients', 'Clipping', 'Image', 'TouchEvents', 'Reusable'];
//const names = ['Definations'];
class SvgExample extends Component { class SvgExample extends Component {
constructor() { constructor() {

11
README.md
View File

@@ -21,6 +21,8 @@ And furthermore:
#### Install #### Install
### note: react-native-svg >= 3.0 only support react-native >= 0.29.0
1. Install library from npm. 1. Install library from npm.
``` ```
@@ -28,7 +30,14 @@ npm install react-native-svg --save
``` ```
2 . Link native code 2 . Link native code
If you haven\`t installed `rnpm`, you can run `npm i rnpm -g` first.
```
react-native link react-native-svg
```
react-native@0.29.0 and 0.29.1 cannot work with Android link properly:[here](https://github.com/facebook/react-native/pull/8612)
Or use rnpm instead
``` ```
rnpm link react-native-svg rnpm link react-native-svg