From 4a0f5139f0b58b21de07688b0c34eec205924005 Mon Sep 17 00:00:00 2001
From: hillyoung <389181073@qq.com>
Date: Mon, 15 May 2017 15:34:53 +0800
Subject: [PATCH 1/3] Added a clickable event to Line, Bar, Pie
---
.gitignore | 1 +
example/.flowconfig | 8 +-
example/.gitignore | 1 -
example/android/app/build.gradle | 8 +-
.../android/app/src/main/AndroidManifest.xml | 53 ++--
.../java/com/example/ExampleReactPackage.java | 39 +++
.../main/java/com/example/HomeActivity.java | 52 ++++
.../java/com/example/MainApplication.java | 33 +-
.../src/main/java/com/example/RNActivity.java | 113 +++++++
.../src/main/java/com/example/RNBridge.java | 40 +++
.../app/src/main/java/com/example/RNHost.java | 40 +++
.../app/src/main/res/layout/activity_home.xml | 41 +++
.../app/src/main/res/layout/content_home.xml | 16 +
.../app/src/main/res/values-v21/styles.xml | 1 +
.../app/src/main/res/values-w820dp/dimens.xml | 6 +
.../app/src/main/res/values/dimens.xml | 6 +
.../app/src/main/res/values/strings.xml | 1 +
.../app/src/main/res/values/styles.xml | 4 +
example/android/build.gradle | 2 +-
.../gradle/wrapper/gradle-wrapper.properties | 2 +-
example/examples.js | 37 +++
example/examples/Circle.js | 118 +++++++
example/examples/Clipping.js | 208 +++++++++++++
example/examples/Ellipse.js | 76 +++++
example/examples/G.js | 172 +++++++++++
example/examples/Gradients.js | 290 ++++++++++++++++++
example/examples/Image.js | 116 +++++++
example/examples/Line.js | 88 ++++++
example/examples/PanResponder.js | 121 ++++++++
example/examples/Path.js | 123 ++++++++
example/examples/Polygon.js | 104 +++++++
example/examples/Polyline.js | 96 ++++++
example/examples/Rect.js | 139 +++++++++
example/examples/Reusable.js | 151 +++++++++
example/examples/Stroking.js | 150 +++++++++
example/examples/Svg.js | 221 +++++++++++++
example/examples/Text.js | 223 ++++++++++++++
example/examples/TouchEvents.js | 132 ++++++++
example/image.jpg | Bin 0 -> 13303 bytes
example/index.android.js | 260 ++++++++++++++++
example/ios/example/Info.plist | 2 -
example/main.js | 265 ++++++++++++++++
example/package.json | 5 +-
example/src/App.js | 7 +-
example/src/bar/BarChartColumnBasic.js | 4 +-
example/src/pie/PieChartBasic.js | 5 +-
example/src/stockline/StockLineChartBasic.js | 1 +
47 files changed, 3531 insertions(+), 50 deletions(-)
create mode 100644 example/android/app/src/main/java/com/example/ExampleReactPackage.java
create mode 100644 example/android/app/src/main/java/com/example/HomeActivity.java
create mode 100644 example/android/app/src/main/java/com/example/RNActivity.java
create mode 100644 example/android/app/src/main/java/com/example/RNBridge.java
create mode 100644 example/android/app/src/main/java/com/example/RNHost.java
create mode 100644 example/android/app/src/main/res/layout/activity_home.xml
create mode 100644 example/android/app/src/main/res/layout/content_home.xml
create mode 100644 example/android/app/src/main/res/values-v21/styles.xml
create mode 100644 example/android/app/src/main/res/values-w820dp/dimens.xml
create mode 100644 example/android/app/src/main/res/values/dimens.xml
create mode 100644 example/examples.js
create mode 100644 example/examples/Circle.js
create mode 100644 example/examples/Clipping.js
create mode 100644 example/examples/Ellipse.js
create mode 100644 example/examples/G.js
create mode 100644 example/examples/Gradients.js
create mode 100644 example/examples/Image.js
create mode 100644 example/examples/Line.js
create mode 100644 example/examples/PanResponder.js
create mode 100644 example/examples/Path.js
create mode 100644 example/examples/Polygon.js
create mode 100644 example/examples/Polyline.js
create mode 100644 example/examples/Rect.js
create mode 100644 example/examples/Reusable.js
create mode 100644 example/examples/Stroking.js
create mode 100644 example/examples/Svg.js
create mode 100644 example/examples/Text.js
create mode 100644 example/examples/TouchEvents.js
create mode 100644 example/image.jpg
create mode 100644 example/main.js
diff --git a/.gitignore b/.gitignore
index bda3a4e..2af2cd6 100755
--- a/.gitignore
+++ b/.gitignore
@@ -15,6 +15,7 @@ coverage.html
# Dependency directory
node_modules
+example/node_modules/
# Example build directory
example/dist
diff --git a/example/.flowconfig b/example/.flowconfig
index b38ea97..c693a48 100644
--- a/example/.flowconfig
+++ b/example/.flowconfig
@@ -22,6 +22,8 @@ node_modules/react-native/flow
flow/
[options]
+emoji=true
+
module.system=haste
experimental.strict_type_args=true
@@ -34,11 +36,11 @@ suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FixMe
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-7]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-7]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-8]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-8]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
unsafe.enable_getters_and_setters=true
[version]
-^0.37.0
+^0.38.0
diff --git a/example/.gitignore b/example/.gitignore
index 8fce639..10be197 100644
--- a/example/.gitignore
+++ b/example/.gitignore
@@ -39,7 +39,6 @@ yarn-error.log
# BUCK
buck-out/
\.buckd/
-android/app/libs
*.keystore
# fastlane
diff --git a/example/android/app/build.gradle b/example/android/app/build.gradle
index 63faa5a..54ecf56 100644
--- a/example/android/app/build.gradle
+++ b/example/android/app/build.gradle
@@ -115,7 +115,7 @@ android {
variant.outputs.each { output ->
// For each separate APK per architecture, set a unique version code as described here:
// http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
- def versionCodes = ["armeabi-v7a":1, "x86":2]
+ def versionCodes = ["armeabi-v7a": 1, "x86": 2]
def abi = output.getFilter(OutputFile.ABI)
if (abi != null) { // null for the universal-debug, universal-release variants
output.versionCodeOverride =
@@ -128,8 +128,10 @@ android {
dependencies {
compile project(':react-native-svg')
compile fileTree(dir: "libs", include: ["*.jar"])
- compile "com.android.support:appcompat-v7:23.0.1"
- compile "com.facebook.react:react-native:+" // From node_modules
+ // From node_modules
+ compile 'com.android.support:appcompat-v7:23.4.0'
+ compile 'com.facebook.react:react-native:+'
+ compile 'com.android.support:design:23.4.0'
}
// Run this once to be able to run the application with BUCK
diff --git a/example/android/app/src/main/AndroidManifest.xml b/example/android/app/src/main/AndroidManifest.xml
index 677f075..4a45c4f 100644
--- a/example/android/app/src/main/AndroidManifest.xml
+++ b/example/android/app/src/main/AndroidManifest.xml
@@ -1,31 +1,48 @@
+
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
-
+ android:theme="@style/AppTheme">
+
+
+
+
+
+
+
+
+
+
+
+
-
+
\ No newline at end of file
diff --git a/example/android/app/src/main/java/com/example/ExampleReactPackage.java b/example/android/app/src/main/java/com/example/ExampleReactPackage.java
new file mode 100644
index 0000000..a3d0931
--- /dev/null
+++ b/example/android/app/src/main/java/com/example/ExampleReactPackage.java
@@ -0,0 +1,39 @@
+package com.example;
+
+/**
+ * Created by young on 2017/5/10.
+ */
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.JavaScriptModule;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class ExampleReactPackage implements ReactPackage {
+
+ @Override
+ public List> createJSModules() {
+ return Collections.emptyList();
+ }
+
+ @Override
+ public List createViewManagers(ReactApplicationContext reactContext) {
+ return Collections.emptyList();
+ }
+
+ @Override
+ public List createNativeModules(
+ ReactApplicationContext reactContext) {
+ List modules = new ArrayList<>();
+
+ modules.add(new RNBridge(reactContext));
+
+ return modules;
+ }
+
+}
diff --git a/example/android/app/src/main/java/com/example/HomeActivity.java b/example/android/app/src/main/java/com/example/HomeActivity.java
new file mode 100644
index 0000000..43d566d
--- /dev/null
+++ b/example/android/app/src/main/java/com/example/HomeActivity.java
@@ -0,0 +1,52 @@
+package com.example;
+
+import android.content.Intent;
+import android.os.Bundle;
+import android.support.design.widget.FloatingActionButton;
+import android.support.design.widget.Snackbar;
+import android.support.v7.app.AppCompatActivity;
+import android.support.v7.widget.Toolbar;
+import android.util.Log;
+import android.view.View;
+import android.widget.Button;
+
+import java.io.IOError;
+
+public class HomeActivity extends AppCompatActivity {
+
+ @Override
+ protected void onCreate(Bundle savedInstanceState) {
+ super.onCreate(savedInstanceState);
+ setContentView(R.layout.activity_home);
+ Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
+ setSupportActionBar(toolbar);
+
+ FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
+ fab.setOnClickListener(new View.OnClickListener() {
+ @Override
+ public void onClick(View view) {
+ Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
+ .setAction("Action", null).show();
+ }
+ });
+
+ Button bt = (Button) findViewById(R.id.button);
+ bt.setOnClickListener(new View.OnClickListener() {
+ @Override
+ public void onClick(View v) {
+ Log.i("匿名内部类", "点击事件");
+
+
+ try {
+ Intent intent = new Intent();
+ intent.setClass(HomeActivity.this, MainActivity.class);
+ startActivity(intent);
+ } catch (IOError error) {
+ error.printStackTrace();
+ }
+
+ }
+ });
+ }
+
+}
diff --git a/example/android/app/src/main/java/com/example/MainApplication.java b/example/android/app/src/main/java/com/example/MainApplication.java
index 22e0eab..bf40d84 100644
--- a/example/android/app/src/main/java/com/example/MainApplication.java
+++ b/example/android/app/src/main/java/com/example/MainApplication.java
@@ -1,7 +1,6 @@
package com.example;
import android.app.Application;
-import android.util.Log;
import com.facebook.react.ReactApplication;
import com.horcrux.svg.RNSvgPackage;
@@ -16,22 +15,26 @@
public class MainApplication extends Application implements ReactApplication {
- private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
- @Override
- public boolean getUseDeveloperSupport() {
- return BuildConfig.DEBUG;
- }
+// private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
+// @Override
+// public boolean getUseDeveloperSupport() {
+// return BuildConfig.DEBUG;
+// }
+//
+// @Override
+// protected List getPackages() {
+// return Arrays.asList(
+// new MainReactPackage(),
+// new RNSvgPackage(),
+// new ExampleReactPackage()
+// );
+// }
+// };
+
+ private final ReactNativeHost mReactNativeHost = new RNHost(this);
- @Override
- protected List getPackages() {
- return Arrays.asList(
- new MainReactPackage(),
- new RNSvgPackage()
- );
- }
- };
- @Override
+ @Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
diff --git a/example/android/app/src/main/java/com/example/RNActivity.java b/example/android/app/src/main/java/com/example/RNActivity.java
new file mode 100644
index 0000000..89d88d2
--- /dev/null
+++ b/example/android/app/src/main/java/com/example/RNActivity.java
@@ -0,0 +1,113 @@
+package com.example;
+
+import android.app.Activity;
+import android.content.Intent;
+import android.net.Uri;
+import android.os.Build;
+import android.os.Bundle;
+import android.provider.Settings;
+import android.util.Log;
+import android.view.KeyEvent;
+
+import com.facebook.react.*;
+import com.facebook.react.BuildConfig;
+import com.facebook.react.common.LifecycleState;
+import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
+import com.facebook.react.shell.MainReactPackage;
+
+/**
+ * Created by young on 2017/5/10.
+ */
+
+public class RNActivity extends Activity implements DefaultHardwareBackBtnHandler {
+
+ private ReactRootView rnRootView;
+ private ReactInstanceManager rnInstanceManager;
+
+ @Override
+ protected void onCreate(Bundle savedInstanceState) {
+ super.onCreate(savedInstanceState);
+
+// if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+// if (!Settings.canDrawOverlays(this)) {
+// Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
+// Uri.parse("package:" + getPackageName()));
+// startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
+// }
+// }
+
+ rnRootView = new ReactRootView(this);
+ Log.i("加载RN模块", "测试");
+ ReactInstanceManagerBuilder builder = ReactInstanceManager.builder().setApplication(getApplication())
+ .setBundleAssetName("index.android.bundle")
+ .setJSMainModuleName("index.android")
+ .addPackage(new MainReactPackage())
+ .setUseDeveloperSupport(true)
+ .setInitialLifecycleState(LifecycleState.RESUMED);
+
+ RNHost host = (RNHost) ((ReactApplication) getApplication()).getReactNativeHost();
+
+ for (ReactPackage reactPackage : host.packages()) {
+ builder.addPackage(reactPackage);
+ }
+
+ rnInstanceManager = builder.build();
+ rnRootView.startReactApplication(rnInstanceManager, "example", null);
+
+ setContentView(rnRootView);
+ }
+
+ @Override
+ public void invokeDefaultOnBackPressed() {
+ super.onBackPressed();
+ }
+
+
+ @Override
+ protected void onPause() {
+ super.onPause();
+
+ if (rnInstanceManager != null) {
+ rnInstanceManager.onHostPause(this);
+ }
+ }
+
+ @Override
+ protected void onResume() {
+ super.onResume();
+
+ if (rnInstanceManager != null) {
+ rnInstanceManager.onHostResume(this, this);
+ }
+ }
+
+ @Override
+ protected void onDestroy() {
+ super.onDestroy();
+
+ if (rnInstanceManager != null) {
+ rnInstanceManager.onHostDestroy(this);
+ }
+ }
+
+ @Override
+ public void onBackPressed() {
+
+ if (rnInstanceManager != null) {
+ rnInstanceManager.onBackPressed();
+ } else {
+ super.onBackPressed();
+ }
+ }
+
+
+ @Override
+ public boolean onKeyUp(int keyCode, KeyEvent event) {
+
+ if (keyCode == KeyEvent.KEYCODE_MENU && rnInstanceManager != null) {
+ rnInstanceManager.showDevOptionsDialog();
+ return true;
+ }
+ return super.onKeyUp(keyCode, event);
+ }
+}
diff --git a/example/android/app/src/main/java/com/example/RNBridge.java b/example/android/app/src/main/java/com/example/RNBridge.java
new file mode 100644
index 0000000..16c47a9
--- /dev/null
+++ b/example/android/app/src/main/java/com/example/RNBridge.java
@@ -0,0 +1,40 @@
+package com.example;
+
+/**
+ * Created by young on 2017/5/10.
+ */
+
+
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+
+import java.util.HashMap;
+import java.util.Map;
+
+import javax.annotation.Nullable;
+
+public class RNBridge extends ReactContextBaseJavaModule {
+
+ public RNBridge(ReactApplicationContext reactContext) {
+ super(reactContext);
+ }
+
+ @Override
+ public String getName() {
+ return "RNBridge";
+ }
+
+ @Nullable
+ @Override
+ public Map getConstants() {
+
+ final Map constants = new HashMap<>();
+ constants.put("abc", "ABC");
+ constants.put("bcd", "BCD");
+
+ return constants;
+ }
+}
diff --git a/example/android/app/src/main/java/com/example/RNHost.java b/example/android/app/src/main/java/com/example/RNHost.java
new file mode 100644
index 0000000..80160b9
--- /dev/null
+++ b/example/android/app/src/main/java/com/example/RNHost.java
@@ -0,0 +1,40 @@
+package com.example;
+
+import android.app.Application;
+
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.shell.MainReactPackage;
+import com.horcrux.svg.RNSvgPackage;
+
+import java.util.Arrays;
+import java.util.List;
+
+/**
+ * Created by young on 2017/5/10.
+ */
+
+public class RNHost extends ReactNativeHost {
+
+ public RNHost(Application application) {
+ super(application);
+ }
+
+ @Override
+ public boolean getUseDeveloperSupport() {
+ return BuildConfig.DEBUG;
+ }
+
+ @Override
+ protected List getPackages() {
+ return Arrays.asList(
+ new MainReactPackage(),
+ new RNSvgPackage(),
+ new ExampleReactPackage()
+ );
+ }
+
+ public List packages() {
+ return this.getPackages();
+ }
+}
diff --git a/example/android/app/src/main/res/layout/activity_home.xml b/example/android/app/src/main/res/layout/activity_home.xml
new file mode 100644
index 0000000..365fef0
--- /dev/null
+++ b/example/android/app/src/main/res/layout/activity_home.xml
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example/android/app/src/main/res/layout/content_home.xml b/example/android/app/src/main/res/layout/content_home.xml
new file mode 100644
index 0000000..652744f
--- /dev/null
+++ b/example/android/app/src/main/res/layout/content_home.xml
@@ -0,0 +1,16 @@
+
+
+
+
diff --git a/example/android/app/src/main/res/values-v21/styles.xml b/example/android/app/src/main/res/values-v21/styles.xml
new file mode 100644
index 0000000..7abc06d
--- /dev/null
+++ b/example/android/app/src/main/res/values-v21/styles.xml
@@ -0,0 +1 @@
+
diff --git a/example/android/app/src/main/res/values-w820dp/dimens.xml b/example/android/app/src/main/res/values-w820dp/dimens.xml
new file mode 100644
index 0000000..63fc816
--- /dev/null
+++ b/example/android/app/src/main/res/values-w820dp/dimens.xml
@@ -0,0 +1,6 @@
+
+
+ 64dp
+
diff --git a/example/android/app/src/main/res/values/dimens.xml b/example/android/app/src/main/res/values/dimens.xml
new file mode 100644
index 0000000..812cb7b
--- /dev/null
+++ b/example/android/app/src/main/res/values/dimens.xml
@@ -0,0 +1,6 @@
+
+
+ 16dp
+ 16dp
+ 16dp
+
diff --git a/example/android/app/src/main/res/values/strings.xml b/example/android/app/src/main/res/values/strings.xml
index d75426c..52a18e1 100644
--- a/example/android/app/src/main/res/values/strings.xml
+++ b/example/android/app/src/main/res/values/strings.xml
@@ -1,3 +1,4 @@
example
+ HomeActivity
diff --git a/example/android/app/src/main/res/values/styles.xml b/example/android/app/src/main/res/values/styles.xml
index 319eb0c..ecd885a 100644
--- a/example/android/app/src/main/res/values/styles.xml
+++ b/example/android/app/src/main/res/values/styles.xml
@@ -5,4 +5,8 @@
+
+
+
+
diff --git a/example/android/build.gradle b/example/android/build.gradle
index fcba4c5..eed9972 100644
--- a/example/android/build.gradle
+++ b/example/android/build.gradle
@@ -5,7 +5,7 @@ buildscript {
jcenter()
}
dependencies {
- classpath 'com.android.tools.build:gradle:1.3.1'
+ classpath 'com.android.tools.build:gradle:2.2.3'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
diff --git a/example/android/gradle/wrapper/gradle-wrapper.properties b/example/android/gradle/wrapper/gradle-wrapper.properties
index b9fbfab..dbdc05d 100644
--- a/example/android/gradle/wrapper/gradle-wrapper.properties
+++ b/example/android/gradle/wrapper/gradle-wrapper.properties
@@ -2,4 +2,4 @@ distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
diff --git a/example/examples.js b/example/examples.js
new file mode 100644
index 0000000..8d2131e
--- /dev/null
+++ b/example/examples.js
@@ -0,0 +1,37 @@
+import * as Svg from './examples/Svg';
+import * as Rect from './examples/Rect';
+import * as Circle from './examples/Circle';
+import * as Ellipse from './examples/Ellipse';
+import * as Line from './examples/Line';
+import * as Polygon from './examples/Polygon';
+import * as Polyline from './examples/Polyline';
+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 Gradients from './examples/Gradients';
+import * as Clipping from './examples/Clipping';
+import * as Image from './examples/Image';
+import * as Reusable from './examples/Reusable';
+import * as TouchEvents from './examples/TouchEvents';
+import * as PanResponder from './examples/PanResponder';
+
+export {
+ Svg,
+ Rect,
+ Circle,
+ Ellipse,
+ Line,
+ Polygon,
+ Polyline,
+ Path,
+ Text,
+ Stroking,
+ G,
+ Gradients,
+ Clipping,
+ Image,
+ TouchEvents,
+ Reusable,
+ PanResponder
+};
diff --git a/example/examples/Circle.js b/example/examples/Circle.js
new file mode 100644
index 0000000..c5019e4
--- /dev/null
+++ b/example/examples/Circle.js
@@ -0,0 +1,118 @@
+import React, {
+ Component
+} from 'react';
+
+import Svg, {
+ Circle
+} from 'react-native-svg';
+
+class CircleExample extends Component{
+ static title = 'Circle';
+ render() {
+
+ return ;
+ }
+}
+
+class StrokeCircle extends Component{
+ static title = 'Stroke Circle';
+ render() {
+ return ;
+ }
+}
+
+class StrokeOpacityCircle extends Component{
+ static title = 'Circle with strokeOpacity';
+ render() {
+ return ;
+ }
+}
+
+class PieCircle extends Component{
+ static title = 'Draw a Pie shape with circle';
+ render() {
+ return ;
+ }
+}
+
+const icon = ;
+
+const samples = [
+ CircleExample,
+ StrokeCircle,
+ StrokeOpacityCircle,
+ PieCircle
+];
+export {
+ icon,
+ samples
+};
diff --git a/example/examples/Clipping.js b/example/examples/Clipping.js
new file mode 100644
index 0000000..253b3e1
--- /dev/null
+++ b/example/examples/Clipping.js
@@ -0,0 +1,208 @@
+import React, {
+ Component
+} from 'react';
+
+import Svg, {
+ ClipPath,
+ Defs,
+ RadialGradient,
+ Stop,
+ Rect,
+ Text,
+ Ellipse,
+ G,
+ Polygon,
+ Path,
+ Circle
+} from 'react-native-svg';
+
+class ClipPathElement extends Component{
+ static title = 'Clip by set clip-path with a path data';
+ render() {
+ return ;
+ }
+}
+
+class ClipRule extends Component{
+ static title = 'Clip a group with clipRule="evenodd"';
+ render() {
+ return ;
+ }
+}
+
+
+class TextClipping extends Component{
+ static title = 'Transform the text';
+ render() {
+ return ;
+ }
+}
+
+const icon = ;
+
+const samples = [ClipPathElement, ClipRule, TextClipping];
+
+export {
+ icon,
+ samples
+};
diff --git a/example/examples/Ellipse.js b/example/examples/Ellipse.js
new file mode 100644
index 0000000..ee746f3
--- /dev/null
+++ b/example/examples/Ellipse.js
@@ -0,0 +1,76 @@
+import React, {
+ Component
+} from 'react';
+
+import Svg, {
+ Ellipse
+} from 'react-native-svg';
+
+class EllipseExample extends Component{
+ static title = 'Ellipse';
+ render() {
+ return ;
+ }
+}
+
+class PileEllipses extends Component{
+ static title = 'The following example creates three ellipses on top of each other';
+ render() {
+ return ;
+ }
+}
+
+class CombinedEllipses extends Component{
+ static title = 'The following example combines two ellipses (one yellow and one white)';
+ render() {
+ return ;
+ }
+}
+
+const icon = ;
+
+const samples = [EllipseExample, PileEllipses, CombinedEllipses];
+
+export {
+ icon,
+ samples
+};
diff --git a/example/examples/G.js b/example/examples/G.js
new file mode 100644
index 0000000..946386e
--- /dev/null
+++ b/example/examples/G.js
@@ -0,0 +1,172 @@
+import React, {
+ Component
+} from 'react';
+
+import Svg, {
+ G,
+ Circle,
+ Line,
+ Rect,
+ Text,
+ Use
+} from 'react-native-svg';
+
+class GExample extends Component{
+ static title = 'G children props inherit';
+
+ constructor() {
+ super(...arguments);
+ this.state = {
+ fill: 'purple'
+ };
+ }
+
+ componentDidMount = () => {
+ setTimeout(() => {
+ if (!this._unmounted) {
+ this.setState({
+ fill: '#856'
+ });
+ }
+ }, 2000);
+ };
+
+ componentWillUnmount = () => {
+ this._unmounted = true;
+ };
+
+ render() {
+ return ;
+ }
+}
+
+class GTransform extends Component{
+ static title = 'G transform';
+ render() {
+ return ;
+ }
+}
+
+const icon = ;
+
+const samples = [GExample, GTransform];
+
+export {
+ icon,
+ samples
+};
diff --git a/example/examples/Gradients.js b/example/examples/Gradients.js
new file mode 100644
index 0000000..1177776
--- /dev/null
+++ b/example/examples/Gradients.js
@@ -0,0 +1,290 @@
+import React, {
+ Component
+} from 'react';
+import {
+ View
+} from 'react-native';
+import Svg, {
+ Defs,
+ LinearGradient,
+ RadialGradient,
+ Stop,
+ Ellipse,
+ Circle,
+ Text,
+ Rect,
+ G
+} from 'react-native-svg';
+
+class LinearGradientHorizontal extends Component{
+ static title = 'Define an ellipse with a horizontal linear gradient from yellow to red';
+ render() {
+ return ;
+ }
+}
+
+class LinearGradientRotated extends Component{
+ static title = 'Define an ellipse with a rotated linear gradient from yellow to red';
+ render() {
+ return ;
+ }
+}
+
+class GradientUnits extends Component{
+ static title = 'Compare gradientUnits="userSpaceOnUse" width default';
+ render() {
+ return
+
+
+ ;
+ }
+}
+
+class LinearGradientPercent extends Component{
+ static title = 'Define a linear gradient in percent unit';
+ render() {
+ return ;
+ }
+}
+
+class RadialGradientExample extends Component{
+ static title = 'Define an ellipse with a radial gradient from yellow to purple';
+ render() {
+ return ;
+ }
+}
+
+class RadialGradientPercent extends Component{
+ static title = 'Define a radial gradient in percent unit';
+ render() {
+ return ;
+ }
+}
+
+class RadialGradientPart extends Component{
+ static title = 'Define another ellipse with a radial gradient from white to blue';
+ render() {
+ return ;
+ }
+}
+
+
+class FillGradientWithOpacity extends Component{
+ static title = 'Fill a radial gradient with fillOpacity prop';
+ render() {
+ return ;
+ }
+}
+
+class FillGradientInRect extends Component{
+ static title = 'Fill a radial gradient inside a rect and stroke it';
+ render() {
+ return ;
+ }
+}
+
+const icon = ;
+
+
+const samples = [
+ LinearGradientHorizontal,
+ LinearGradientRotated,
+ GradientUnits,
+ LinearGradientPercent,
+ RadialGradientExample,
+ RadialGradientPercent,
+ RadialGradientPart,
+ FillGradientWithOpacity,
+ FillGradientInRect
+];
+
+export {
+ icon,
+ samples
+};
diff --git a/example/examples/Image.js b/example/examples/Image.js
new file mode 100644
index 0000000..b3e66fc
--- /dev/null
+++ b/example/examples/Image.js
@@ -0,0 +1,116 @@
+import React, {
+ Component
+} from 'react';
+
+import Svg, {
+ Image,
+ Defs,
+ Circle,
+ ClipPath,
+ Rect,
+ Text
+} from 'react-native-svg';
+
+class ImageExample extends Component{
+ static title = 'Draw Image with preserveAspectRatio prop';
+
+ render() {
+ return ;
+ }
+}
+
+class ClipImage extends Component{
+ static title = 'Clip Image';
+
+ render() {
+ return ;
+ }
+}
+
+const icon = ;
+
+const samples = [ImageExample, ClipImage];
+
+export {
+ icon,
+ samples
+};
diff --git a/example/examples/Line.js b/example/examples/Line.js
new file mode 100644
index 0000000..ed54b2b
--- /dev/null
+++ b/example/examples/Line.js
@@ -0,0 +1,88 @@
+import React, {
+ Component
+} from 'react';
+
+import Svg, {
+ Line
+} from 'react-native-svg';
+
+class LineExample extends Component{
+ static title = 'Line';
+
+ render() {
+ return ;
+ }
+}
+
+class LineWithStrokeLinecap extends Component{
+ static title = 'Line';
+
+ render() {
+ return ;
+ }
+}
+
+const icon = ;
+
+const samples = [LineExample, LineWithStrokeLinecap];
+
+export {
+ icon,
+ samples
+};
diff --git a/example/examples/PanResponder.js b/example/examples/PanResponder.js
new file mode 100644
index 0000000..bb1444d
--- /dev/null
+++ b/example/examples/PanResponder.js
@@ -0,0 +1,121 @@
+import React, {
+ Component
+} from 'react';
+
+import {
+ PanResponder
+} from 'react-native';
+
+import Svg, {
+ Path,
+ Text,
+ G,
+ Line,
+ Polyline
+} from 'react-native-svg';
+
+class PanExample extends Component {
+ static title = 'Bind PanResponder on the SVG Shape';
+
+ constructor() {
+ super(...arguments);
+ this.state = {
+ x: 0,
+ y: 0,
+ hover: false
+ };
+ }
+
+ componentWillMount = () => {
+ this._panResponder = PanResponder.create({
+ onStartShouldSetPanResponder: this._alwaysTrue,
+ onMoveShouldSetPanResponder: this._alwaysTrue,
+ onPanResponderGrant: this._handlePanResponderGrant,
+ onPanResponderMove: this._handlePanResponderMove,
+ onPanResponderRelease: this._handlePanResponderEnd,
+ onPanResponderTerminate: this._handlePanResponderEnd
+ });
+ };
+
+ _previousLeft = 0;
+
+ _previousTop = 0;
+
+ _alwaysTrue = () => true;
+
+ _handlePanResponderMove = (e, gestureState) => {
+ this.setState({
+ x: this._previousLeft + gestureState.dx,
+ y: this._previousTop + gestureState.dy
+ });
+ };
+
+ _handlePanResponderGrant = () => {
+ this.root.setNativeProps({
+ opacity: 0.5
+ });
+ };
+
+ _handlePanResponderEnd = (e, gestureState) => {
+ this.root.setNativeProps({
+ opacity: 1
+ });
+ this._previousLeft += gestureState.dx;
+ this._previousTop += gestureState.dy;
+ };
+
+
+ render () {
+ return ;
+ }
+}
+
+const icon = ;
+
+const samples = [
+ PanExample
+];
+
+const scroll = false;
+
+export {
+ icon,
+ samples,
+ scroll
+};
diff --git a/example/examples/Path.js b/example/examples/Path.js
new file mode 100644
index 0000000..1898563
--- /dev/null
+++ b/example/examples/Path.js
@@ -0,0 +1,123 @@
+import React, {
+ Component
+} from 'react';
+
+import Svg, {
+ Path,
+ G,
+ Circle,
+ Text
+} from 'react-native-svg';
+
+class PathExample extends Component{
+ static title = 'Path';
+
+ render() {
+ return ;
+ }
+}
+
+class UnclosedPath extends Component{
+ static title = 'Unclosed paths';
+ render() {
+ return ;
+ }
+}
+
+class BezierCurve extends Component{
+ static title = 'The following example creates a quadratic Bézier curve, where A and C are the start and end points, B is the control point';
+ render() {
+ return ;
+ }
+}
+const icon = ;
+
+const samples = [PathExample, UnclosedPath, BezierCurve];
+
+export {
+ icon,
+ samples
+};
diff --git a/example/examples/Polygon.js b/example/examples/Polygon.js
new file mode 100644
index 0000000..bd85d5b
--- /dev/null
+++ b/example/examples/Polygon.js
@@ -0,0 +1,104 @@
+import React, {
+ Component
+} from 'react';
+
+import Svg, {
+ Polygon,
+ G
+} from 'react-native-svg';
+
+class PolygonExample extends Component{
+ static title = 'The following example creates a polygon with three sides';
+
+ render() {
+ return ;
+ }
+}
+
+
+class FourSidePolygon extends Component{
+ static title = 'The following example creates a polygon with four sides';
+ render() {
+ return ;
+ }
+}
+
+class StarPolygon extends Component{
+ static title = 'Use the element to create a star';
+ render() {
+ return ;
+ }
+}
+
+class EvenOddPolygon extends Component{
+ static title = 'Change the fill-rule property to "evenodd"';
+ render() {
+ return ;
+ }
+}
+
+const icon = ;
+
+const samples = [PolygonExample, FourSidePolygon, StarPolygon, EvenOddPolygon];
+
+export {
+ icon,
+ samples
+};
diff --git a/example/examples/Polyline.js b/example/examples/Polyline.js
new file mode 100644
index 0000000..2b92d25
--- /dev/null
+++ b/example/examples/Polyline.js
@@ -0,0 +1,96 @@
+import React, {
+ Component
+} from 'react';
+
+import Svg, {
+ Polyline
+} from 'react-native-svg';
+
+class PolylineExample extends Component{
+ static title = 'The element is used to create any shape that consists of only straight lines';
+ render() {
+ return ;
+ }
+}
+
+class StraightLines extends Component{
+ static title = 'Another example with only straight lines';
+ render() {
+ return ;
+ }
+}
+
+class PolylineFill extends Component{
+ static title = 'Fill Polyline';
+ render() {
+ return ;
+ }
+}
+
+class PolylineFillStroke extends Component{
+ static title = 'Stroke Polyline with strokeLinecap and strokeLinejoin';
+ render() {
+ return ;
+ }
+}
+
+const icon = ;
+
+const samples = [PolylineExample, StraightLines, PolylineFill, PolylineFillStroke];
+
+export {
+ icon,
+ samples
+};
diff --git a/example/examples/Rect.js b/example/examples/Rect.js
new file mode 100644
index 0000000..30999a3
--- /dev/null
+++ b/example/examples/Rect.js
@@ -0,0 +1,139 @@
+import React, {
+ Component
+} from 'react';
+
+import Svg, {
+ Rect
+} from 'react-native-svg';
+
+class RectExample extends Component{
+ static title = 'Rect';
+ render() {
+ return ;
+ }
+}
+
+class RectStrokeFill extends Component{
+ static title = '`stroke` and `fill` Rect';
+ render() {
+ return ;
+ }
+}
+
+class RoundedRect extends Component{
+ static title = 'A rectangle with rounded corners';
+ render() {
+ return ;
+ }
+}
+
+class EllipseRect extends Component{
+ static title = 'Rect with different `rx` and `ry`';
+ render() {
+ return ;
+ }
+}
+
+class RoundOverflowRect extends Component{
+ static title = 'Rect with `rx` or `ry` overflowed';
+ render() {
+ return ;
+ }
+}
+
+const icon = ;
+
+const samples = [RectExample, RectStrokeFill, RoundedRect, EllipseRect, RoundOverflowRect];
+
+export {
+ icon,
+ samples
+};
+
+
diff --git a/example/examples/Reusable.js b/example/examples/Reusable.js
new file mode 100644
index 0000000..affde97
--- /dev/null
+++ b/example/examples/Reusable.js
@@ -0,0 +1,151 @@
+import React, {
+ Component
+} from 'react';
+
+import Svg, {
+ Defs,
+ G,
+ Path,
+ Use,
+ Symbol,
+ Circle,
+ ClipPath,
+ LinearGradient,
+ RadialGradient,
+ 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';
+
+ render() {
+ return ;
+ }
+}
+
+class SymbolExample extends Component{
+ static title = 'Symbol example, reuse elements with viewBox prop';
+ render() {
+ return ;
+ }
+}
+
+const icon = ;
+
+const samples = [UseExample, UseShapes, DefsExample, SymbolExample];
+
+export {
+ icon,
+ samples
+};
diff --git a/example/examples/Stroking.js b/example/examples/Stroking.js
new file mode 100644
index 0000000..fe7bd3b
--- /dev/null
+++ b/example/examples/Stroking.js
@@ -0,0 +1,150 @@
+import React, {
+ Component
+} from 'react';
+
+import Svg, {
+ Path,
+ Rect,
+ G,
+ Defs,
+ Stop,
+ RadialGradient,
+ Polyline,
+ ClipPath,
+ Circle,
+ Text
+} from 'react-native-svg';
+
+class StrokeExample extends Component{
+ static title = 'The stroke property defines the color of a line, text or outline of an element';
+ render() {
+ return ;
+ }
+}
+
+class StrokeLinecap extends Component{
+ static title = 'The strokeLinecap property defines different types of endings to an open path';
+ render() {
+ return ;
+ }
+}
+
+class StrokeDasharray extends Component{
+ static title = 'strokeDasharray';
+ render() {
+ return ;
+ }
+}
+
+class StrokeDashoffset extends Component{
+ static title = 'the strokeDashoffset attribute specifies the distance into the dash pattern to start the dash.';
+ render() {
+ return ;
+ }
+}
+
+class StrokePattern extends Component{
+ static title = 'Advanced stroke example.';
+ render() {
+ return ;
+ }
+}
+
+
+const icon = ;
+
+const samples = [StrokeExample, StrokeLinecap, StrokeDasharray, StrokeDashoffset, StrokePattern];
+export {
+ icon,
+ samples
+};
diff --git a/example/examples/Svg.js b/example/examples/Svg.js
new file mode 100644
index 0000000..2447657
--- /dev/null
+++ b/example/examples/Svg.js
@@ -0,0 +1,221 @@
+import {
+ StyleSheet,
+ View,
+ Image
+} from 'react-native';
+
+import React, {
+ Component
+} from 'react';
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ height: 100,
+ width: 200
+ },
+ svg: {
+ flex: 1,
+ alignSelf: 'stretch'
+ }
+});
+
+import Svg, {
+ Circle,
+ Rect,
+ Path,
+ Line,
+ G
+} from 'react-native-svg';
+
+class SvgExample extends Component{
+ static title = 'SVG';
+ render() {
+ return ;
+ }
+}
+
+class SvgOpacity extends Component{
+ static title = 'SVG with `opacity` prop';
+ render() {
+ return ;
+ }
+}
+
+class SvgViewbox extends Component{
+ static title = 'SVG with `viewBox="40 20 100 40" and preserveAspectRatio="none"`';
+ render() {
+ return ;
+ }
+}
+
+class NullComponent extends Component {
+ render() {
+ return null;
+ }
+}
+
+class SvgLayout extends Component{
+ static title = 'SVG with flex layout';
+ render() {
+ return
+
+ ;
+ }
+}
+
+class SvgNativeMethods extends Component {
+ static title = 'Tap the shapes to render the Image below based on the base64-data of the Svg';
+ constructor() {
+ super(...arguments);
+ this.state = {
+ base64: null
+ };
+ }
+
+ alert = function () {
+ this.root.toDataURL(base64 => {
+ this.setState({
+ base64
+ });
+ });
+ };
+ render() {
+ return
+
+
+ {this.state.base64 && }
+
+ ;
+ }
+}
+
+const icon = ;
+
+const samples = [
+ SvgExample,
+ SvgOpacity,
+ SvgViewbox,
+ SvgLayout,
+ SvgNativeMethods
+];
+
+export {
+ icon,
+ samples
+};
diff --git a/example/examples/Text.js b/example/examples/Text.js
new file mode 100644
index 0000000..8919992
--- /dev/null
+++ b/example/examples/Text.js
@@ -0,0 +1,223 @@
+import React, {
+ Component
+} from 'react';
+
+import Svg, {
+ Text,
+ LinearGradient,
+ Stop,
+ Defs,
+ Path,
+ G,
+ TSpan,
+ TextPath
+} from 'react-native-svg';
+
+class TextExample extends Component{
+ static title = 'Text';
+
+ render() {
+ return ;
+ }
+}
+
+class TextRotate extends Component{
+ static title = 'Transform the text';
+
+ render() {
+ return ;
+ }
+}
+
+class TextStroke extends Component{
+ static title = 'Stroke the text';
+ render() {
+ return ;
+ }
+}
+
+class TextFill extends Component{
+ static title = 'Fill the text with LinearGradient';
+ render() {
+ return ;
+ }
+}
+
+
+class TextPathExample extends Component{
+ static title = 'Draw text along path';
+
+ render() {
+ const path = `
+ M 10 20
+ C 40 10 60 0 80 10
+ C 100 20 120 30 140 20
+ C 160 10 180 10 180 10
+ `;
+
+ return ;
+ }
+}
+
+class TSpanExample extends Component{
+ static title = 'TSpan nest';
+
+ render() {
+
+
+ return ;
+ }
+}
+
+
+const icon = ;
+
+const samples = [
+ TextExample,
+ TextRotate,
+ TextStroke,
+ TextFill,
+ TextPathExample,
+ TSpanExample
+];
+
+export {
+ icon,
+ samples
+};
diff --git a/example/examples/TouchEvents.js b/example/examples/TouchEvents.js
new file mode 100644
index 0000000..d616050
--- /dev/null
+++ b/example/examples/TouchEvents.js
@@ -0,0 +1,132 @@
+import React, {
+ Component
+} from 'react';
+
+import Svg, {
+ Circle,
+ Path,
+ Rect,
+ G,
+ Text,
+ ClipPath,
+ Defs
+} from 'react-native-svg';
+
+class PressExample extends Component {
+ static title = 'Press on the red circle or long press on the blue rectangle to trigger the events';
+
+ render () {
+ return ;
+ }
+}
+
+class HoverExample extends Component {
+ static title = 'Hover the svg path';
+ constructor () {
+ super(...arguments);
+ this.state = {
+ hover: false
+ };
+ }
+
+ toggle = () => {
+ this.setState({hover: !this.state.hover});
+ };
+
+ render () {
+ return ;
+ }
+}
+
+class GroupExample extends Component {
+ static title = 'Bind touch events callback on Group element with viewBox';
+
+ render () {
+ return ;
+ }
+
+}
+
+const icon = ;
+
+const samples = [
+ PressExample,
+ HoverExample,
+ GroupExample
+];
+
+export {
+ icon,
+ samples
+};
diff --git a/example/image.jpg b/example/image.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8fddd5c17f4898a99fa0f4d295f11b7c225d4988
GIT binary patch
literal 13303
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 App);
+
+// import React, {Component} from 'react';
+// import {Dimensions} from 'react-native';
+
+// import {
+// AppRegistry,
+// StyleSheet,
+// Text,
+// View,
+// ScrollView,
+// TouchableHighlight,
+// TouchableOpacity,
+// Animated,
+// Easing
+// } from 'react-native';
+
+// import {
+// Svg,
+// Circle,
+// Line
+// } from 'react-native-svg';
+
+// import * as examples from './examples';
+// import 'react-native-root-modal';
+
+// const hairline = StyleSheet.hairlineWidth;
+
+// const styles = StyleSheet.create({
+// container: {
+// flex: 1,
+// paddingTop: 20,
+// alignItems: 'center',
+// overflow: 'hidden'
+// },
+// content: {
+// flex: 1,
+// alignSelf: 'stretch'
+// },
+// contentContainer: {
+// alignSelf: 'stretch',
+// borderTopWidth: hairline,
+// borderTopColor: '#ccc',
+// borderBottomWidth: hairline,
+// borderBottomColor: '#ccc',
+// flexWrap: 'wrap',
+// flexDirection: 'row',
+// marginHorizontal: 10
+// },
+// welcome: {
+// padding: 10,
+// color: '#f60',
+// fontSize: 18,
+// fontWeight: 'bold'
+// },
+// link: {
+// height: 40,
+// alignSelf: 'stretch',
+// width: Dimensions.get('window').width / 2 - 10
+// },
+// title: {
+// marginLeft: 10
+// },
+// cell: {
+// height: 40,
+// paddingHorizontal: 10,
+// alignSelf: 'stretch',
+// alignItems: 'center',
+// flexDirection: 'row',
+// borderTopWidth: hairline,
+// borderTopColor: '#ccc',
+// marginTop: -hairline,
+// backgroundColor: 'transparent'
+// },
+// modal: {
+// top: 0,
+// right: 0,
+// bottom: 0,
+// left: 0,
+// backgroundColor: 'rgba(0, 0, 0, 0.2)'
+// },
+// close: {
+// position: 'absolute',
+// right: 20,
+// top: 40
+// },
+// scroll: {
+// position: 'absolute',
+// top: 30,
+// right: 10,
+// bottom: 20,
+// left: 10,
+// backgroundColor: '#fff'
+// },
+// scrollContent: {
+// borderTopWidth: hairline,
+// borderTopColor: '#ccc'
+// },
+// example: {
+// paddingVertical: 25,
+// alignSelf: 'stretch',
+// alignItems: 'center',
+// borderBottomWidth: hairline,
+// borderBottomColor: '#ccc'
+// },
+// sampleTitle: {
+// marginHorizontal: 15,
+// fontSize: 16,
+// color: '#666'
+// }
+// });
+
+// const names = ['Svg', 'Stroking', 'Path', 'Line', 'Rect', 'Polygon', 'Polyline', 'Circle', 'Ellipse', 'G', 'Text', 'Gradients', 'Clipping', 'Image', 'TouchEvents', 'PanResponder', 'Reusable'];
+
+// class SvgExample extends Component {
+// constructor() {
+// super(...arguments);
+// this.state = {
+// modal: false,
+// scale: new Animated.Value(0)
+// };
+// }
+
+// getSamples = (samples) => {
+// return samples.map((Sample, i) =>
+//
+// {Sample.title}
+//
+//
+// );
+// };
+
+// show = (name) => {
+// if (this.state.modal) {
+// return;
+// }
+
+// let example = examples[name];
+// if (example) {
+// let samples = example.samples;
+// this.state.scale.setValue(0);
+// Animated.spring(this.state.scale, {
+// toValue: 1,
+// useNativeDriver: false
+// }).start();
+
+// this.setState({
+// modal: true,
+// content:
+// {this.getSamples(samples)}
+// ,
+// scroll: example.scroll !== false
+// });
+// }
+// };
+
+// hide = () => {
+// this.state.scale.setValue(1);
+// Animated.timing(this.state.scale, {
+// toValue: 0,
+// useNativeDriver: false,
+// easing: Easing.in(Easing.back(2))
+// }).start(({finished}) => finished && this.setState({
+// modal: false,
+// content: null
+// }));
+// };
+
+// getExamples = () => {
+// return names.map(name => {
+// var icon;
+// let example = examples[name];
+// if (example) {
+// icon = example.icon;
+// }
+// return this.show(name)}
+// >
+//
+// {icon}
+// {name}
+//
+// ;
+// });
+// };
+
+// render() {
+// return
+//
+//
+// {this.state.content}
+//
+//
+//
+//
+//
+//
+//
+//
+// SVG library for React Native
+//
+//
+// {this.getExamples()}
+//
+// ;
+// }
+// }
+
+// AppRegistry.registerComponent('example', () => SvgExample);
\ No newline at end of file
diff --git a/example/ios/example/Info.plist b/example/ios/example/Info.plist
index 44e178a..2fb6a11 100644
--- a/example/ios/example/Info.plist
+++ b/example/ios/example/Info.plist
@@ -4,8 +4,6 @@
CFBundleDevelopmentRegion
en
- CFBundleDisplayName
- example
CFBundleExecutable
$(EXECUTABLE_NAME)
CFBundleIdentifier
diff --git a/example/main.js b/example/main.js
new file mode 100644
index 0000000..1a69ac9
--- /dev/null
+++ b/example/main.js
@@ -0,0 +1,265 @@
+/**
+ * Sample React Native App for react-native-svg library
+ * https://github.com/magicismight/react-native-svg/tree/master/Example
+ */
+'use strict';
+
+import React, {Component} from 'react';
+import {Dimensions} from 'react-native';
+
+import {
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View,
+ ScrollView,
+ TouchableHighlight,
+ TouchableOpacity,
+ Animated,
+ Easing
+} from 'react-native';
+
+import {
+ Svg,
+ Circle,
+ Line
+} from 'react-native-svg';
+
+import * as examples from './examples';
+import 'react-native-root-modal';
+
+const hairline = StyleSheet.hairlineWidth;
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ paddingTop: 20,
+ alignItems: 'center',
+ overflow: 'hidden'
+ },
+ content: {
+ flex: 1,
+ alignSelf: 'stretch'
+ },
+ contentContainer: {
+ alignSelf: 'stretch',
+ borderTopWidth: hairline,
+ borderTopColor: '#ccc',
+ borderBottomWidth: hairline,
+ borderBottomColor: '#ccc',
+ flexWrap: 'wrap',
+ flexDirection: 'row',
+ marginHorizontal: 10
+ },
+ welcome: {
+ padding: 10,
+ color: '#f60',
+ fontSize: 18,
+ fontWeight: 'bold'
+ },
+ link: {
+ height: 40,
+ alignSelf: 'stretch',
+ width: Dimensions.get('window').width / 2 - 10
+ },
+ title: {
+ marginLeft: 10
+ },
+ cell: {
+ height: 40,
+ paddingHorizontal: 10,
+ alignSelf: 'stretch',
+ alignItems: 'center',
+ flexDirection: 'row',
+ borderTopWidth: hairline,
+ borderTopColor: '#ccc',
+ marginTop: -hairline,
+ backgroundColor: 'transparent'
+ },
+ modal: {
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
+ backgroundColor: 'rgba(0, 0, 0, 0.2)'
+ },
+ close: {
+ position: 'absolute',
+ right: 20,
+ top: 40
+ },
+ scroll: {
+ position: 'absolute',
+ top: 30,
+ right: 10,
+ bottom: 20,
+ left: 10,
+ backgroundColor: '#fff'
+ },
+ scrollContent: {
+ borderTopWidth: hairline,
+ borderTopColor: '#ccc'
+ },
+ example: {
+ paddingVertical: 25,
+ alignSelf: 'stretch',
+ alignItems: 'center',
+ borderBottomWidth: hairline,
+ borderBottomColor: '#ccc'
+ },
+ sampleTitle: {
+ marginHorizontal: 15,
+ fontSize: 16,
+ color: '#666'
+ }
+});
+
+const names = ['Svg', 'Stroking', 'Path', 'Line', 'Rect', 'Polygon', 'Polyline', 'Circle', 'Ellipse', 'G', 'Text', 'Gradients', 'Clipping', 'Image', 'TouchEvents', 'PanResponder', 'Reusable'];
+
+class SvgExample extends Component {
+ constructor() {
+ super(...arguments);
+ this.state = {
+ modal: false,
+ scale: new Animated.Value(0)
+ };
+ }
+
+ getSamples = (samples) => {
+ return samples.map((Sample, i) =>
+
+ {Sample.title}
+
+
+ );
+ };
+
+ show = (name) => {
+ if (this.state.modal) {
+ return;
+ }
+
+ let example = examples[name];
+ if (example) {
+ let samples = example.samples;
+ this.state.scale.setValue(0);
+ Animated.spring(this.state.scale, {
+ toValue: 1,
+ useNativeDriver: false
+ }).start();
+
+ this.setState({
+ modal: true,
+ content:
+ {this.getSamples(samples)}
+ ,
+ scroll: example.scroll !== false
+ });
+ }
+ };
+
+ hide = () => {
+ this.state.scale.setValue(1);
+ Animated.timing(this.state.scale, {
+ toValue: 0,
+ useNativeDriver: false,
+ easing: Easing.in(Easing.back(2))
+ }).start(({finished}) => finished && this.setState({
+ modal: false,
+ content: null
+ }));
+ };
+
+ getExamples = () => {
+ return names.map(name => {
+ var icon;
+ let example = examples[name];
+ if (example) {
+ icon = example.icon;
+ }
+ return this.show(name)}
+ >
+
+ {icon}
+ {name}
+
+ ;
+ });
+ };
+
+ render() {
+ return
+
+
+ {this.state.content}
+
+
+
+
+
+
+
+
+ SVG library for React Native
+
+
+ {this.getExamples()}
+
+ ;
+ }
+}
+
+AppRegistry.registerComponent('SvgExample', () => SvgExample);
diff --git a/example/package.json b/example/package.json
index e7b7cb6..2780c26 100644
--- a/example/package.json
+++ b/example/package.json
@@ -9,8 +9,9 @@
"dependencies": {
"moment": "^2.17.1",
"react": "^15.4.1",
- "react-native": "~0.41.0",
- "react-native-pathjs-charts": "file:../",
+ "react-native": "^0.42.0",
+ "react-native-pathjs-charts": "file:///Users/luculent/Documents/Git/react-native-pathjs-charts",
+ "react-native-root-modal": "^1.1.1",
"react-native-side-menu": "^0.20.1"
},
"devDependencies": {
diff --git a/example/src/App.js b/example/src/App.js
index 5dcc5be..026ca61 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -19,7 +19,7 @@ SPDX-License-Identifier: Apache-2.0
'use strict'
import React, { Component } from 'react';
-import { Text, StyleSheet, View, Navigator } from 'react-native'
+import { NativeModules, Text, StyleSheet, View, Navigator } from 'react-native'
import SideMenu from 'react-native-side-menu'
import Menu from './Menu'
@@ -110,6 +110,11 @@ class App extends Component {
};
render() {
+
+
+ console.log('测试' + NativeModules.RNBridge.abc);
+
+
const menu =