Merge branch 'master' into text-refactor

This commit is contained in:
Horcrux
2016-09-17 21:06:33 +08:00
11 changed files with 145 additions and 161 deletions
+12
View File
@@ -0,0 +1,12 @@
{
"presets": [
"react-native-stage-0/decorator-support"
],
"env": {
"development": {
"plugins": [
"transform-react-jsx-source"
]
}
}
}
+1
View File
@@ -1,6 +1,7 @@
# OSX # OSX
# #
.DS_Store .DS_Store
.exponent/*
# Xcode # Xcode
# #
+1 -1
View File
@@ -5,7 +5,7 @@ buildscript {
jcenter() jcenter()
} }
dependencies { dependencies {
classpath 'com.android.tools.build:gradle:1.3.1' classpath 'com.android.tools.build:gradle:2.1.3'
// NOTE: Do not place your application dependencies here; they belong // NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files // in the individual module build.gradle files
+3 -7
View File
@@ -42,11 +42,6 @@ case "`uname`" in
;; ;;
esac esac
# For Cygwin, ensure paths are in UNIX format before anything is touched.
if $cygwin ; then
[ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"`
fi
# Attempt to set APP_HOME # Attempt to set APP_HOME
# Resolve links: $0 may be a link # Resolve links: $0 may be a link
PRG="$0" PRG="$0"
@@ -61,9 +56,9 @@ while [ -h "$PRG" ] ; do
fi fi
done done
SAVED="`pwd`" SAVED="`pwd`"
cd "`dirname \"$PRG\"`/" >&- cd "`dirname \"$PRG\"`/" >/dev/null
APP_HOME="`pwd -P`" APP_HOME="`pwd -P`"
cd "$SAVED" >&- cd "$SAVED" >/dev/null
CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
@@ -114,6 +109,7 @@ fi
if $cygwin ; then if $cygwin ; then
APP_HOME=`cygpath --path --mixed "$APP_HOME"` APP_HOME=`cygpath --path --mixed "$APP_HOME"`
CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
JAVACMD=`cygpath --unix "$JAVACMD"`
# We build the pattern for arguments to be converted via cygpath # We build the pattern for arguments to be converted via cygpath
ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+23
View File
@@ -0,0 +1,23 @@
{
"name": "React Native SVG Examples",
"description": "react-native-svg is built to provide a SVG interface to react native on both iOS and Android. https://github.com/react-native-community/react-native-svg",
"slug": "react-native-svg-examples",
"sdkVersion": "10.0.0",
"version": "1.0.0",
"orientation": "portrait",
"primaryColor": "#cccccc",
"iconUrl": "https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png",
"notification": {
"iconUrl": "https://s3.amazonaws.com/exp-us-standard/placeholder-push-icon-blue-circle.png",
"color": "#000000"
},
"loading": {
"iconUrl": "https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png",
"hideExponentText": false
},
"packagerOpts": {
"assetExts": [
"ttf"
]
}
}
+7 -1
View File
@@ -3,6 +3,9 @@
* https://github.com/magicismight/react-native-svg/tree/master/Example * https://github.com/magicismight/react-native-svg/tree/master/Example
*/ */
'use strict'; 'use strict';
// eslint-disable-next-line no-unused-vars
import Exponent from 'exponent';
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Dimensions} from 'react-native'; import {Dimensions} from 'react-native';
@@ -23,8 +26,10 @@ import {
Circle, Circle,
Line Line
} from 'react-native-svg'; } from 'react-native-svg';
import * as examples from './examples'; import * as examples from './examples';
import Modal from 'react-native-root-modal'; import 'react-native-root-modal';
const hairline = StyleSheet.hairlineWidth; const hairline = StyleSheet.hairlineWidth;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@@ -258,4 +263,5 @@ class SvgExample extends Component {
} }
} }
AppRegistry.registerComponent('main', () => SvgExample);
AppRegistry.registerComponent('SvgExample', () => SvgExample); AppRegistry.registerComponent('SvgExample', () => SvgExample);
+6 -4
View File
@@ -6,9 +6,11 @@
"start": "react-native start" "start": "react-native start"
}, },
"dependencies": { "dependencies": {
"react": "^15.1.0", "react": "15.3.1",
"react-native": "^0.32.0", "react-native": "github:exponentjs/react-native#sdk-10.0.0",
"react-native-root-modal": "^1.0.4", "react-native-root-modal": "^1.0.4",
"react-native-svg": "../" "@exponent/vector-icons": "^1.0.1",
} "exponent": "^10.0.0"
},
"main": "main.js"
} }
+85 -91
View File
@@ -1,53 +1,51 @@
## react-native-svg ## react-native-svg
[![Version](https://img.shields.io/npm/v/react-native-svg.svg)](https://www.npmjs.com/package/react-native-svg) [![Version](https://img.shields.io/npm/v/react-native-svg.svg)](https://www.npmjs.com/package/react-native-svg)
[![Build Status](https://travis-ci.org/magicismight/react-native-svg.svg?branch=master)](https://travis-ci.org/magicismight/react-native-svg)
[![NPM](https://img.shields.io/npm/dm/react-native-svg.svg)](https://www.npmjs.com/package/react-native-svg) [![NPM](https://img.shields.io/npm/dm/react-native-svg.svg)](https://www.npmjs.com/package/react-native-svg)
`react-native-svg` is built to provide a SVG interface to react native on both iOS and Android `react-native-svg` is built to provide a SVG interface to react native on both iOS and Android.
# IMPORTANT [Check out the demo](https://getexponent.com/@rncommunity/react-native-svg-examples).
`react-native-art-svg` has changed name to **`react-native-svg`**(*thanks for [@Brent Vatne](https://github.com/brentvatne) handing over me this npm package.*). ## Features
And furthermore: 1. Supports most SVG elements and properties (Rect, Circle, Line, Polyline, Polygon, G ...).
`react-native-svg` **NO LONGER rely on ReactNativeART**, it has its own native code dependency now (which is based on ReactNativeART code but support more SVG features)
### Features
1. Supports most of SVG elements and properties(Rect, Circle, Line, Polyline, Polygon, G ...).
2. Easy to convert SVG code into ReactNative code. 2. Easy to convert SVG code into ReactNative code.
### Installation
#### Install *With Exponent, this is pre-installed. Jump ahead to [Usage](#Usage)*
### note: react-native-svg >= 3.0 only support react-native >= 0.29.0 1. Install library from `npm`
1. Install library from npm. ```bash
npm install react-native-svg --save
```
```bash - react-native-svg >= 3.2.0 only supports react-native >= 0.29.0
npm install react-native-svg --save - react-native-svg >= 4.2.0 only supports react-native >= 0.32.0
``` - react-native-svg >= 4.3.0 only supports react-native >= 0.33.0
2 . Link native code 2. Link native code
```bash ```bash
react-native link react-native-svg 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) 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:
Or use rnpm instead ```bash
rnpm link react-native-svg
```
```bash ### <a name="Usage">Usage</a>
rnpm link react-native-svg
```
Here's a simple example. To render output like this:
#### Usage ![SVG example](./screenShoots/svg.png)
There is an easy example Use the following code:
```javascript ```javascript
import Svg,{ import Svg,{
@@ -96,13 +94,9 @@ class SvgExample extends Component {
); );
} }
} }
``` ```
This will draw a graphics like this ### Common props:
![SVG example](./screenShoots/svg.png)
#### Common props:
Name | Default | Description Name | Default | Description
----------------|------------|-------------- ----------------|------------|--------------
@@ -124,9 +118,9 @@ originX | 0 | Transform originX coordinates for the current obj
originY | 0 | Transform originY coordinates for the current object. originY | 0 | Transform originY coordinates for the current object.
#### Supported elements: ### Supported elements:
##### Svg #### Svg
```html ```html
<Svg <Svg
@@ -141,10 +135,11 @@ originY | 0 | Transform originY coordinates for the current obj
</Svg> </Svg>
``` ```
##### Rect ### Rect
The <Rect> element is used to create a rectangle and variations of a rectangle shape: The <Rect> element is used to create a rectangle and variations of a rectangle shape:
```html ```html
<Svg <Svg
width="200" width="200"
@@ -166,9 +161,9 @@ The <Rect> element is used to create a rectangle and variations of a rectangle s
Code explanation: Code explanation:
* The width and height props of the <Rect> element define the height and the width of the rectangle * The width and height props of the <Rect> element define the height and the width of the rectangle.
* The x prop defines the left position of the rectangle (e.g. x="25" places the rectangle 25 px from the left margin) * The x prop defines the left position of the rectangle (e.g. x="25" places the rectangle 25 px from the left margin).
* The y prop defines the top position of the rectangle (e.g. y="5" places the rectangle 5 px from the top margin) * The y prop defines the top position of the rectangle (e.g. y="5" places the rectangle 5 px from the top margin).
##### Circle ##### Circle
@@ -195,11 +190,11 @@ The <Circle> element is used to create a circle:
* The cx and cy props define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0,0) * The cx and cy props define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0,0)
* The r prop defines the radius of the circle * The r prop defines the radius of the circle
##### Ellipse #### Ellipse
The <Ellipse> element is used to create an ellipse. The <Ellipse> element is used to create an ellipse.
An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.
```html ```html
<Svg <Svg
@@ -219,14 +214,14 @@ An ellipse is closely related to a circle. The difference is that an ellipse has
``` ```
![Rect](./screenShoots/ellipse.png) ![Rect](./screenShoots/ellipse.png)
Code explanation: Code explanation:
* The cx prop defines the x coordinate of the center of the ellipse * The cx prop defines the x coordinate of the center of the ellipse
* The cy prop defines the y coordinate of the center of the ellipse * The cy prop defines the y coordinate of the center of the ellipse
* The rx prop defines the horizontal radius * The rx prop defines the horizontal radius
* The ry prop defines the vertical radius * The ry prop defines the vertical radius
##### Line #### Line
The <Line> element is an SVG basic shape, used to create a line connecting two points. The <Line> element is an SVG basic shape, used to create a line connecting two points.
@@ -248,18 +243,16 @@ The <Line> element is an SVG basic shape, used to create a line connecting two p
![Rect](./screenShoots/line.png) ![Rect](./screenShoots/line.png)
Code explanation: Code explanation:
* The x1 prop defines the start of the line on the x-axis * The x1 prop defines the start of the line on the x-axis.
* The y1 prop defines the start of the line on the y-axis * The y1 prop defines the start of the line on the y-axis.
* The x2 prop defines the end of the line on the x-axis * The x2 prop defines the end of the line on the x-axis.
* The y2 prop defines the end of the line on the y-axis * The y2 prop defines the end of the line on the y-axis.
##### Polygon #### Polygon
The <Polygon> element is used to create a graphic that contains at least three sides. The <Polygon> element is used to create a graphic that contains at least three sides. Polygons are made of straight lines, and the shape is "closed" (all the lines connect up).
Polygons are made of straight lines, and the shape is "closed" (all the lines connect up).
```html ```html
<Svg <Svg
@@ -277,11 +270,11 @@ Polygons are made of straight lines, and the shape is "closed" (all the lines co
![Rect](./screenShoots/polygon.png) ![Rect](./screenShoots/polygon.png)
Code explanation: Code explanation:
* The points prop defines the x and y coordinates for each corner of the polygon * The points prop defines the x and y coordinates for each corner of the polygon
##### Polyline #### Polyline
The <Polyline> element is used to create any shape that consists of only straight lines: The <Polyline> element is used to create any shape that consists of only straight lines:
@@ -301,11 +294,11 @@ The <Polyline> element is used to create any shape that consists of only straigh
![Rect](./screenShoots/polyline.png) ![Rect](./screenShoots/polyline.png)
Code explanation: Code explanation:
* The points prop defines the x and y coordinates for each point of the polyline * The points prop defines the x and y coordinates for each point of the polyline
##### Path #### Path
The <Path> element is used to define a path. The <Path> element is used to define a path.
@@ -321,6 +314,7 @@ The following commands are available for path data:
* T = smooth quadratic Bézier curveto * T = smooth quadratic Bézier curveto
* A = elliptical Arc * A = elliptical Arc
* Z = closepath * Z = closepath
`Note:` All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned. `Note:` All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.
```html ```html
@@ -339,9 +333,9 @@ The following commands are available for path data:
![Rect](./screenShoots/path.png) ![Rect](./screenShoots/path.png)
##### Text #### Text
The <Text> element is used to define a text. The <Text> element is used to define text.
```html ```html
<Svg <Svg
@@ -362,7 +356,7 @@ The <Text> element is used to define a text.
![Rect](./screenShoots/text.png) ![Rect](./screenShoots/text.png)
##### G #### G
The <G> element is a container used to group other SVG elements. Transformations applied to the g element are performed on all of its child elements, and any of its props are inherited by its child elements. It can also group multiple elements to be referenced later with the [&lt;Use /&gt;](#use) element. The <G> element is a container used to group other SVG elements. Transformations applied to the g element are performed on all of its child elements, and any of its props are inherited by its child elements. It can also group multiple elements to be referenced later with the [&lt;Use /&gt;](#use) element.
@@ -405,11 +399,9 @@ The <G> element is a container used to group other SVG elements. Transformations
``` ```
![G](./screenShoots/g.png) ![G](./screenShoots/g.png)
<h5 id="use">Use</h5> #### Use
The <Use> element can reuse an SVG shape from elsewhere in the SVG document, including <G> elements and <Symbol> elements. The <Use> element can reuse an SVG shape from elsewhere in the SVG document, including <G> elements and <Symbol> elements. The reused shape can be defined inside the [&lt;Defs&gt;](#defs) element (which makes the shape invisible until used) or outside.
The reused shape can be defined inside the [&lt;Defs&gt;](#defs) element (which makes the shape invisible until used) or outside.
```html ```html
<Svg <Svg
@@ -439,7 +431,7 @@ The <Use> element specifies where to show the reused shapes via its x and y prop
![use](./screenShoots/use.png) ![use](./screenShoots/use.png)
##### Symbol #### Symbol
The SVG <Symbol> element is used to define reusable symbols. The shapes nested inside a <Symbol> are not displayed unless referenced by a <Use> element. The SVG <Symbol> element is used to define reusable symbols. The shapes nested inside a <Symbol> are not displayed unless referenced by a <Use> element.
@@ -477,11 +469,11 @@ The SVG <Symbol> element is used to define reusable symbols. The shapes nested i
![symbol](./screenShoots/symbol.png) ![symbol](./screenShoots/symbol.png)
<h5 id="defs">Defs</h5> #### Defs
The <Defs> element is used to embed definitions that can be reused inside an SVG image. For instance, you can group SVG shapes together and reuse them as a single shape. The <Defs> element is used to embed definitions that can be reused inside an SVG image. For instance, you can group SVG shapes together and reuse them as a single shape.
##### LinearGradient #### LinearGradient
The <LinearGradient> element is used to define a linear gradient. The <LinearGradient> element is used to define a linear gradient.
The <LinearGradient> element must be nested within a [&lt;Defs&gt;](#defs) tag. The [&lt;Defs&gt;](#defs) tag is short for definitions and contains definition of special elements (such as gradients). The <LinearGradient> element must be nested within a [&lt;Defs&gt;](#defs) tag. The [&lt;Defs&gt;](#defs) tag is short for definitions and contains definition of special elements (such as gradients).
@@ -524,14 +516,11 @@ LinearGradient also supports percentage as prop:
<Stop offset="100%" stopColor="red" stopOpacity="1" /> <Stop offset="100%" stopColor="red" stopOpacity="1" />
</LinearGradient> </LinearGradient>
``` ```
This result is same as the example before. This result is same as the example before. But it's recommend to use exact number instead; it has performance advantages over using percentages.
But I recommend you to use exact number instead, it has more performance advantages while using number instead of percentage. #### RadialGradient
##### RadialGradient The <RadialGradient> element is used to define a radial gradient. The <RadialGradient> element must be nested within a [&lt;Defs&gt;](#defs) tag. The [&lt;Defs&gt;](#defs) tag is short for definitions and contains definition of special elements (such as gradients).
The <RadialGradient> element is used to define a radial gradient.
The <RadialGradient> element must be nested within a [&lt;Defs&gt;](#defs) tag. The [&lt;Defs&gt;](#defs) tag is short for definitions and contains definition of special elements (such as gradients).
```html ```html
<Svg <Svg
@@ -565,29 +554,34 @@ Code explanation:
![RadialGradient](./screenShoots/radialgradient.png) ![RadialGradient](./screenShoots/radialgradient.png)
#### Run example: ### Run example:
```bash ```bash
cd ./Example git clone https://github.com/magicismight/react-native-svg-example.git
npm install cd react-native-svg-example
npm i
# run Android: react-native run-android
# run iOS: react-native run-ios
``` ```
#### TODO:
1. add native method for elements ### TODO:
2. more Text features support (textPath, tspan) 1. Add Native method for elements.
3. Pattern element 2. More Text features support (TextPath, TSpan).
4. implement Animated elements 3. Pattern element.
5. load Image from url 4. Implement Animated elements.
6. Mask element 6. Mask element.
5. Load Image from URL.
7. Fix rotate prop ON Text 7. Fix rotate prop ON Text
### Known issues: ### Known issues:
1. cannot set alpha channel for Gradient on iOS. 1. Unable to set alpha channel for Gradient on iOS.
2. cannot apply focus point of RadialGradient on Android. 2. Unable to apply focus point of RadialGradient on Android.
#### Thanks: ### Thanks:
* [w3schools.com SVG Tutorial](http://www.w3schools.com/svg/) * [w3schools.com SVG Tutorial](http://www.w3schools.com/svg/)
* [SVG Tutorial](http://tutorials.jenkov.com/svg/index.html) * [SVG Tutorial](http://tutorials.jenkov.com/svg/index.html)
+2 -1
View File
@@ -11,6 +11,7 @@ Pod::Spec.new do |s|
s.authors = 'Horcrux Chen' s.authors = 'Horcrux Chen'
s.source = { :git => 'https://github.com/magicismight/react-native-svg.git', :tag => "v#{s.version}" } s.source = { :git => 'https://github.com/magicismight/react-native-svg.git', :tag => "v#{s.version}" }
s.source_files = 'ios/**/*.{h,m}' s.source_files = 'ios/**/*.{h,m}'
s.framework = 'React'
s.requires_arc = true s.requires_arc = true
s.platform = :ios, "7.0"
s.dependency 'React'
end end
-51
View File
@@ -97,57 +97,6 @@ RCT_ENUM_CONVERTER(RNSVGVBMOS, (@{
return (__bridge CTFontRef)[RCTFont updateFont:nil withFamily:fontFamily size:dict[@"fontSize"] weight:dict[@"fontWeight"] style:dict[@"fontStyle"] variant:nil scaleMultiplier:1.0]; return (__bridge CTFontRef)[RCTFont updateFont:nil withFamily:fontFamily size:dict[@"fontSize"] weight:dict[@"fontWeight"] style:dict[@"fontStyle"] variant:nil scaleMultiplier:1.0];
} }
// This takes a tuple of text lines and a font to generate a CTLine for each text line.
// This prepares everything for rendering a frame of text in RNSVGText.
//+ (RNSVGTextFrame)RNSVGTextFrame:(id)json
//{
// NSDictionary *dict = [self NSDictionary:json];
// RNSVGTextFrame frame;
// frame.count = 0;
//
// NSArray *lines = [self NSArray:dict[@"lines"]];
// NSUInteger lineCount = [lines count];
// if (lineCount == 0) {
// return frame;
// }
//
// NSDictionary *fontDict = dict[@"font"];
// NSString *fontFamily = fontDict[@"fontFamily"];
//
// if (![[UIFont familyNames] containsObject:fontFamily]) {
// fontFamily = nil;
// }
//
// CTFontRef font = (__bridge CTFontRef)[RCTFont updateFont:nil withFamily:fontFamily size:fontDict[@"fontSize"] weight:fontDict[@"fontWeight"] style:fontDict[@"fontStyle"] variant:nil scaleMultiplier:1.0];
//
// // Create a dictionary for this font
// CFDictionaryRef attributes = (__bridge CFDictionaryRef)@{
// (NSString *)kCTFontAttributeName: (__bridge id)font,
// (NSString *)kCTForegroundColorFromContextAttributeName: @YES
// };
//
// // Set up text frame with font metrics
// CGFloat size = CTFontGetSize(font);
// frame.count = lineCount;
// frame.baseLine = size; // estimate base line
// frame.lineHeight = size * 1.1; // Base on RNSVG canvas line height estimate
// frame.lines = malloc(sizeof(CTLineRef) * lineCount);
// frame.widths = malloc(sizeof(CGFloat) * lineCount);
//
// [lines enumerateObjectsUsingBlock:^(NSString *text, NSUInteger i, BOOL *stop) {
//
// CFStringRef string = (__bridge CFStringRef)text;
// CFAttributedStringRef attrString = CFAttributedStringCreate(kCFAllocatorDefault, string, attributes);
// CTLineRef line = CTLineCreateWithAttributedString(attrString);
// CFRelease(attrString);
//
// frame.lines[i] = line;
// frame.widths[i] = CTLineGetTypographicBounds(line, nil, nil, nil);
// }];
//
// return frame;
//}
+ (RNSVGCGFloatArray)RNSVGCGFloatArray:(id)json + (RNSVGCGFloatArray)RNSVGCGFloatArray:(id)json
{ {
NSArray *arr = [self NSNumberArray:json]; NSArray *arr = [self NSNumberArray:json];
+5 -5
View File
@@ -1,5 +1,5 @@
{ {
"version": "4.2.0", "version": "4.3.1",
"name": "react-native-svg", "name": "react-native-svg",
"description": "SVG library for react-native", "description": "SVG library for react-native",
"repository": { "repository": {
@@ -22,16 +22,16 @@
"lint": "eslint ./" "lint": "eslint ./"
}, },
"peerDependencies": { "peerDependencies": {
"react-native": ">=0.32.0" "react-native": ">=0.33.0"
}, },
"dependencies": { "dependencies": {
"color": "^0.11.1", "color": "^0.11.1",
"lodash": "^4.0.0" "lodash": "^4.0.0"
}, },
"devDependencies": { "devDependencies": {
"babel-eslint": "^6.0.0", "babel-eslint": "^6.1.2",
"eslint": "^2.5.3", "eslint": "^2.13.1",
"eslint-plugin-react": "^4.2.1" "eslint-plugin-react": "^4.3.0"
}, },
"nativePackage": true, "nativePackage": true,
"rnpm": { "rnpm": {