mirror of
https://github.com/zoriya/react-native-svg.git
synced 2026-06-07 00:42:31 +00:00
Merge branch 'master' into text-refactor
This commit is contained in:
@@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"presets": [
|
||||||
|
"react-native-stage-0/decorator-support"
|
||||||
|
],
|
||||||
|
"env": {
|
||||||
|
"development": {
|
||||||
|
"plugins": [
|
||||||
|
"transform-react-jsx-source"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
# OSX
|
# OSX
|
||||||
#
|
#
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
.exponent/*
|
||||||
|
|
||||||
# Xcode
|
# Xcode
|
||||||
#
|
#
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Vendored
+3
-7
@@ -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`
|
||||||
|
|||||||
@@ -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
@@ -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,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"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,53 +1,51 @@
|
|||||||
## react-native-svg
|
## react-native-svg
|
||||||
|
|
||||||
[](https://www.npmjs.com/package/react-native-svg)
|
[](https://www.npmjs.com/package/react-native-svg)
|
||||||
[](https://travis-ci.org/magicismight/react-native-svg)
|
|
||||||
[](https://www.npmjs.com/package/react-native-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
|

|
||||||
|
|
||||||
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:
|
||||||

|
|
||||||
|
|
||||||
#### 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
|
|||||||
```
|
```
|
||||||

|

|
||||||
|
|
||||||
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
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
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
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
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
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
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:
|
|||||||

|

|
||||||
|
|
||||||
|
|
||||||
##### 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.
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
##### 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 [<Use />](#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 [<Use />](#use) element.
|
||||||
|
|
||||||
@@ -405,11 +399,9 @@ The <G> element is a container used to group other SVG elements. Transformations
|
|||||||
```
|
```
|
||||||

|

|
||||||
|
|
||||||
<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 [<Defs>](#defs) element (which makes the shape invisible until used) or outside.
|
||||||
|
|
||||||
The reused shape can be defined inside the [<Defs>](#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
|
|||||||

|

|
||||||
|
|
||||||
|
|
||||||
##### 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
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
<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 [<Defs>](#defs) tag. The [<Defs>](#defs) tag is short for definitions and contains definition of special elements (such as gradients).
|
The <LinearGradient> element must be nested within a [<Defs>](#defs) tag. The [<Defs>](#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 [<Defs>](#defs) tag. The [<Defs>](#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 [<Defs>](#defs) tag. The [<Defs>](#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:
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
#### 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
@@ -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
|
||||||
|
|||||||
@@ -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
@@ -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": {
|
||||||
|
|||||||
Reference in New Issue
Block a user