mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Christopher Chedeau
66 lines
13 KiB
HTML
66 lines
13 KiB
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | Build Native Apps Using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="React Native | Build Native Apps Using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="Build Native Apps Using React"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><ul class="nav-site"><li><a href="/react-native/docs/getting-started.html#content" class="active">docs</a></li><li><a href="/react-native/support.html" class="">support</a></li><li><a href="http://facebook.github.io/react" class="">react</a></li><li><a href="http://github.com/facebook/react-native" class="">github</a></li></ul></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/reactnavigator.html#content">ReactNavigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switchios.html#content">SwitchIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/alertios.html#content">AlertIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/animation.html#content">Animation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appregistry.html#content">AppRegistry</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appstateios.html#content">AppStateIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/asyncstorage.html#content">AsyncStorage</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/cameraroll.html#content">CameraRoll</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/interactionmanager.html#content">InteractionManager</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/layoutanimation.html#content">LayoutAnimation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/netinfo.html#content">NetInfo</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/panresponder.html#content">PanResponder</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pixelratio.html#content">PixelRatio</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pushnotificationios.html#content">PushNotificationIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/statusbarios.html#content">StatusBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/stylesheet.html#content">StyleSheet</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/vibrationios.html#content">VibrationIOS</a></li></ul></div><div class="nav-docs-section"><h3>Polyfills</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/flexbox.html#content">Flexbox</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/geolocation.html#content">Geolocation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/network.html#content">Network</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/timers.html#content">Timers</a></li></ul></div></div><div class="inner-content"><a id="content"></a><h1>PanResponder</h1><div><div><p>+----------------------------+ +--------------------------------+
|
|
| ResponderTouchHistoryStore | |TouchHistoryMath |
|
|
+----------------------------+ +----------+---------------------+
|
|
|Global store of touchHistory| |Allocation-less math util |
|
|
|including activeness, start | |on touch history (centroids |
|
|
|position, prev/cur position.| |and multitouch movement etc) |
|
|
| | | |
|
|
+----^-----------------------+ +----^---------------------------+
|
|
| |
|
|
| (records relevant history |
|
|
| of touches relevant for |
|
|
| implementing higher level |
|
|
| gestures) |
|
|
| |
|
|
+----+-----------------------+ +----|---------------------------+
|
|
| ResponderEventPlugin | | | Your App/Component |
|
|
+----------------------------+ +----|---------------------------+
|
|
|Negotiates which view gets | Low level | | High level |
|
|
|onResponderMove events. | events w/ | +-+-------+ events w/ |
|
|
|Also records history into | touchHistory| | Pan | multitouch + |
|
|
|ResponderTouchHistoryStore. +---------------->Responder+-----> accumulative|
|
|
+----------------------------+ attached to | | | distance and |
|
|
each event | +---------+ velocity. |
|
|
| |
|
|
| |
|
|
+--------------------------------+</p><p>Gesture that calculates cumulative movement over time in a way that just
|
|
"does the right thing" for multiple touches. The "right thing" is very
|
|
nuanced. When moving two touches in opposite directions, the cumulative
|
|
distance is zero in each dimension. When two touches move in parallel five
|
|
pixels in the same direction, the cumulative distance is five, not ten. If
|
|
two touches start, one moves five in a direction, then stops and the other
|
|
touch moves fives in the same direction, the cumulative distance is ten.</p><p>This logic requires a kind of processing of time "clusters" of touch events
|
|
so that two touch moves that essentially occur in parallel but move every
|
|
other frame respectively, are considered part of the same movement.</p><p>Explanation of some of the non-obvious fields:</p><ul><li>moveX/moveY: If no move event has been observed, then <code>(moveX, moveY)</code> is
|
|
invalid. If a move event has been observed, <code>(moveX, moveY)</code> is the
|
|
centroid of the most recently moved "cluster" of active touches.
|
|
(Currently all move have the same timeStamp, but later we should add some
|
|
threshold for what is considered to be "moving"). If a palm is
|
|
accidentally counted as a touch, but a finger is moving greatly, the palm
|
|
will move slightly, but we only want to count the single moving touch.</li><li>x0/y0: Centroid location (non-cumulative) at the time of becoming
|
|
responder.</li><li>dx/dy: Cumulative touch distance - not the same thing as sum of each touch
|
|
distance. Accounts for touch moves that are clustered together in time,
|
|
moving the same direction. Only valid when currently responder (otherwise,
|
|
it only represents the drag distance below the threshold).</li><li>vx/vy: Velocity.</li></ul></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="create"></a><span class="propType">static </span>create<span class="propType">(config: object)</span> <a class="hash-link" href="#create">#</a></h4><div><p>@param {object} config Enhanced versions of all of the responder callbacks
|
|
that accept not only the typical <code>ResponderSyntheticEvent</code>, but also the
|
|
<code>PanResponder</code> gesture state. Simply replace the word <code>Responder</code> with
|
|
<code>PanResponder</code> in each of the typical <code>onResponder*</code> callbacks. For
|
|
example, the <code>config</code> object would look like:</p><ul><li>onMoveShouldSetPanResponder: (e, gestureState) => {...}</li><li>onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}</li><li>onStartShouldSetPanResponder: (e, gestureState) => {...}</li><li>onStartShouldSetPanResponderCapture: (e, gestureState) => {...}</li><li>onPanResponderReject: (e, gestureState) => {...}</li><li>onPanResponderGrant: (e, gestureState) => {...}</li><li>onPanResponderStart: (e, gestureState) => {...}</li><li>onPanResponderEnd: (e, gestureState) => {...}</li><li>onPanResponderRelease: (e, gestureState) => {...}</li><li>onPanResponderMove: (e, gestureState) => {...}</li><li>onPanResponderTerminate: (e, gestureState) => {...}</li><li><p>onPanResponderTerminationRequest: (e, gestureState) => {...}</p></li><li><p>In general, for events that have capture equivalents, we update the
|
|
gestureState once in the capture phase and can use it in the bubble phase
|
|
as well.</p></li><li><p>Be careful with onStartShould* callbacks. They only reflect updated
|
|
<code>gestureState</code> for start/end events that bubble/capture to the Node.
|
|
Once the node is the responder, you can rely on every start/end event
|
|
being processed by the gesture and <code>gestureState</code> being updated
|
|
accordingly. (numberActiveTouches) may not be totally accurate unless you
|
|
are the responder.</p></li></ul></div></div></div></span></div><noscript></noscript><div class="docs-prevnext"><a class="docs-next" href="pixelratio.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-41298772-2', 'facebook.github.io');
|
|
ga('send', 'pageview');
|
|
|
|
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
|
|
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
|
|
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
|
</script></body></html> |