From f2ee72bb763f223e5c0007f706337ae0dd78b2a0 Mon Sep 17 00:00:00 2001 From: Horcrux Date: Wed, 27 Jul 2016 11:34:42 +0800 Subject: [PATCH] Improve examples and document --- Example/examples.js | 8 +- Example/examples/G.js | 5 +- .../examples/{Definations.js => Reusable.js} | 88 +++++++++++++++++-- Example/examples/Symbol.js | 79 ----------------- Example/examples/Use.js | 71 --------------- Example/main.js | 3 +- README.md | 11 ++- 7 files changed, 97 insertions(+), 168 deletions(-) rename Example/examples/{Definations.js => Reusable.js} (56%) delete mode 100644 Example/examples/Symbol.js delete mode 100644 Example/examples/Use.js diff --git a/Example/examples.js b/Example/examples.js index 4b519b11..4d4820c1 100644 --- a/Example/examples.js +++ b/Example/examples.js @@ -9,12 +9,10 @@ import * as Path from './examples/Path'; import * as Text from './examples/Text'; import * as G from './examples/G'; 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 Clipping from './examples/Clipping'; import * as Image from './examples/Image'; -import * as Definations from './examples/Definations'; +import * as Reusable from './examples/Reusable'; import * as TouchEvents from './examples/TouchEvents'; export { @@ -29,11 +27,9 @@ export { Text, Stroking, G, - Use, - Symbol, Gradients, Clipping, Image, TouchEvents, - Definations + Reusable }; diff --git a/Example/examples/G.js b/Example/examples/G.js index cd47ddec..38bd193e 100644 --- a/Example/examples/G.js +++ b/Example/examples/G.js @@ -67,8 +67,7 @@ class GTransform extends Component{ > Text grouped with shapes - + ; } } diff --git a/Example/examples/Definations.js b/Example/examples/Reusable.js similarity index 56% rename from Example/examples/Definations.js rename to Example/examples/Reusable.js index 4eb914db..d5e28f82 100644 --- a/Example/examples/Definations.js +++ b/Example/examples/Reusable.js @@ -7,16 +7,57 @@ import Svg, { G, Path, Use, - Rect, + Symbol, Circle, ClipPath, LinearGradient, RadialGradient, - Stop + Stop, + Rect } from 'react-native-svg'; +class UseExample extends Component{ + static title = 'Reuse svg code'; + render() { + return + + + + + + + + + + + + ; + } +} + +class UseShapes extends Component{ + static title = 'Using Shapes Outside of a Defs Element'; + render() { + return + + + + + + + ; + } +} + + class DefsExample extends Component{ - static title = 'basic Defs usage'; + static title = 'Basic Defs usage'; render() { return + + + + + + + + + ; + } +} + const icon = ; - - -const samples = [DefsExample]; +const samples = [UseExample, UseShapes, DefsExample, SymbolExample]; export { icon, diff --git a/Example/examples/Symbol.js b/Example/examples/Symbol.js deleted file mode 100644 index ab0e1326..00000000 --- a/Example/examples/Symbol.js +++ /dev/null @@ -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 - - - - - - - - - ; - } -} - -const icon = - - - - - - - -; - -const samples = [SymbolExample]; - -export { - icon, - samples -}; diff --git a/Example/examples/Use.js b/Example/examples/Use.js deleted file mode 100644 index 3b1208f1..00000000 --- a/Example/examples/Use.js +++ /dev/null @@ -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 - - - - - - - - - - - - ; - } -} - -class UseShapes extends Component{ - static title = 'Using Shapes Outside of a Defs Element'; - render() { - return - - - - - - - ; - } -} - -const icon = - - -; - -const samples = [UseExample, UseShapes]; - -export { - icon, - samples -}; diff --git a/Example/main.js b/Example/main.js index fc00c425..1316c91a 100644 --- a/Example/main.js +++ b/Example/main.js @@ -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 = ['Definations']; +const names = ['Svg', 'Stroking', 'Path', 'Line', 'Rect', 'Polygon', 'Polyline', 'Circle', 'Ellipse', 'G', 'Text', 'Gradients', 'Clipping', 'Image', 'TouchEvents', 'Reusable']; class SvgExample extends Component { constructor() { diff --git a/README.md b/README.md index 758e1cca..0e6e4cc8 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,8 @@ And furthermore: #### Install +### note: react-native-svg >= 3.0 only support react-native >= 0.29.0 + 1. Install library from npm. ``` @@ -28,7 +30,14 @@ npm install react-native-svg --save ``` 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