Add pan responder example

2025-12-20 05:55:10 +00:00 · 2016-08-07 00:32:07 +08:00
parent 6ebd928ab4
commit 7c01f07fca
4 changed files with 137 additions and 4 deletions
--- a/Example/examples/PanResponder.js
+++ 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 <Svg
+            height="200"
+            width="200"
+        >
+            <G
+                ref={ele => {this.root = ele;}}
+                x={this.state.x}
+                y={this.state.y}
+            >
+                <Path
+                    d="M50,5L20,99L95,39L5,39L80,99z"
+                    stroke={'black'}
+                    fill={'red'}
+                    strokeWidth="6"
+                    scale="0.8"
+                    {...this._panResponder.panHandlers}
+                />
+                <Text fontSize="20" fontWeight="bold" fill="blue" textAnchor="middle" x="40" y="80">STAR</Text>
+            </G>
+        </Svg>;
+    }
+}
+
+const icon = <Svg
+    height="20"
+    width="20"
+>
+    <G strokeWidth="1" stroke="#ccc" fill="#ccc">
+        <Line x1="4" y1="5" x2="16" y2="5" />
+        <Polyline points="6,2 4,5 6,8" />
+        <Line x1="10" y1="1" x2="10" y2="5" />
+        <Polyline points="14,2 16,5 14,8" />
+        <Polyline points="7,3 10,1 13,3" />
+    </G>
+    <Path fill="#fff" stroke="#000" strokeLinecap="round" strokeLinejoin="round" d={`M6.2,9.4
+          c0,0,0-0.1,0-0.2c0-0.2,0.1-0.3,0.1-0.4c0.2-0.4,0.5-0.7,1-0.7c0.3,0,0.5,0,0.6,0h0.1v0.7V10 M8.1,8.8c0,0,0-0.1,0-0.2
+	c0-0.2,0.1-0.3,0.1-0.4c0.2-0.4,0.5-0.7,1-0.7c0.3,0,0.5,0,0.6,0h0.1v1.9 M10.1,7.5v-2c0,0,0-0.1,0-0.2c0-0.2,0.1-0.3,0.1-0.4
+	c0.2-0.4,0.5-0.6,0.9-0.7c0.4,0,0.7,0.2,0.9,0.7C12,5,12,5.2,12,5.4c0,0.1,0,0.1,0,0.2v6c1.4-1.8,2.4-1.8,2.8,0.1
+	c-1.7,1.5-2.9,3.7-3.4,6.4l-5.8,0c-0.2-0.6-0.5-1.4-0.7-2.5c-0.3-1-0.5-2.5-0.6-4.5l0-0.8c0-0.1,0-0.1,0-0.2c0-0.2,0.1-0.3,0.1-0.4
+	c0.2-0.4,0.5-0.7,1-0.7c0.3,0,0.5,0,0.6,0l0.1,0v0.5c0,0,0,0,0,0l0,1.1l0,0.2 M6.2,10.9l0-0.4`}/>
+</Svg>;
+
+const samples = [
+    PanExample
+];
+
+const scroll = false;
+
+export {
+    icon,
+    samples,
+    scroll
+};