Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Deploy website

Browse Source 
Deploy website version based on 2e44131c1f
This commit is contained in:
Website Deployment Script
2018-05-30 00:46:07 +00:00
parent 2e44131c1f
commit bd80e57213
1 changed files with 41 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/next/panresponder.html
+41 -38
View File
@@ -46,48 +46,51 @@
<li><code>numberActiveTouches</code> - Number of touches currently on screen</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="basic-usage"></a><a href="#basic-usage" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Basic Usage</h3>
<pre><code class="hljs"> componentWillMount: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">this</span>._panResponder = PanResponder.create({
<span class="hljs-comment">// Ask to be the responder:</span>
onStartShouldSetPanResponder: <span class="hljs-function">(<span class="hljs-params">evt, gestureState</span>) =&gt;</span> <span class="hljs-literal">true</span>,
<span class="hljs-attr">onStartShouldSetPanResponderCapture</span>: <span class="hljs-function">(<span class="hljs-params">evt, gestureState</span>) =&gt;</span> <span class="hljs-literal">true</span>,
<span class="hljs-attr">onMoveShouldSetPanResponder</span>: <span class="hljs-function">(<span class="hljs-params">evt, gestureState</span>) =&gt;</span> <span class="hljs-literal">true</span>,
<span class="hljs-attr">onMoveShouldSetPanResponderCapture</span>: <span class="hljs-function">(<span class="hljs-params">evt, gestureState</span>) =&gt;</span> <span class="hljs-literal">true</span>,
<pre><code class="hljs"> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ExampleComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
<span class="hljs-keyword">constructor</span>(props) {
<span class="hljs-keyword">super</span>(props)
<span class="hljs-keyword">this</span>._panResponder = PanResponder.create({
<span class="hljs-comment">// Ask to be the responder:</span>
onStartShouldSetPanResponder: <span class="hljs-function">(<span class="hljs-params">evt, gestureState</span>) =&gt;</span> <span class="hljs-literal">true</span>,
<span class="hljs-attr">onStartShouldSetPanResponderCapture</span>: <span class="hljs-function">(<span class="hljs-params">evt, gestureState</span>) =&gt;</span> <span class="hljs-literal">true</span>,
<span class="hljs-attr">onMoveShouldSetPanResponder</span>: <span class="hljs-function">(<span class="hljs-params">evt, gestureState</span>) =&gt;</span> <span class="hljs-literal">true</span>,
<span class="hljs-attr">onMoveShouldSetPanResponderCapture</span>: <span class="hljs-function">(<span class="hljs-params">evt, gestureState</span>) =&gt;</span> <span class="hljs-literal">true</span>,
<span class="hljs-attr">onPanResponderGrant</span>: <span class="hljs-function">(<span class="hljs-params">evt, gestureState</span>) =&gt;</span> {
<span class="hljs-comment">// The gesture has started. Show visual feedback so the user knows</span>
<span class="hljs-comment">// what is happening!</span>
<span class="hljs-attr">onPanResponderGrant</span>: <span class="hljs-function">(<span class="hljs-params">evt, gestureState</span>) =&gt;</span> {
<span class="hljs-comment">// The gesture has started. Show visual feedback so the user knows</span>
<span class="hljs-comment">// what is happening!</span>
<span class="hljs-comment">// gestureState.d{x,y} will be set to zero now</span>
},
<span class="hljs-attr">onPanResponderMove</span>: <span class="hljs-function">(<span class="hljs-params">evt, gestureState</span>) =&gt;</span> {
<span class="hljs-comment">// The most recent move distance is gestureState.move{X,Y}</span>
<span class="hljs-comment">// gestureState.d{x,y} will be set to zero now</span>
},
<span class="hljs-attr">onPanResponderMove</span>: <span class="hljs-function">(<span class="hljs-params">evt, gestureState</span>) =&gt;</span> {
<span class="hljs-comment">// The most recent move distance is gestureState.move{X,Y}</span>
<span class="hljs-comment">// The accumulated gesture distance since becoming responder is</span>
<span class="hljs-comment">// gestureState.d{x,y}</span>
},
<span class="hljs-attr">onPanResponderTerminationRequest</span>: <span class="hljs-function">(<span class="hljs-params">evt, gestureState</span>) =&gt;</span> <span class="hljs-literal">true</span>,
<span class="hljs-attr">onPanResponderRelease</span>: <span class="hljs-function">(<span class="hljs-params">evt, gestureState</span>) =&gt;</span> {
<span class="hljs-comment">// The user has released all touches while this view is the</span>
<span class="hljs-comment">// responder. This typically means a gesture has succeeded</span>
},
<span class="hljs-attr">onPanResponderTerminate</span>: <span class="hljs-function">(<span class="hljs-params">evt, gestureState</span>) =&gt;</span> {
<span class="hljs-comment">// Another component has become the responder, so this gesture</span>
<span class="hljs-comment">// should be cancelled</span>
},
<span class="hljs-attr">onShouldBlockNativeResponder</span>: <span class="hljs-function">(<span class="hljs-params">evt, gestureState</span>) =&gt;</span> {
<span class="hljs-comment">// Returns whether this component should block native components from becoming the JS</span>
<span class="hljs-comment">// responder. Returns true by default. Is currently only supported on android.</span>
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
},
});
},
<span class="hljs-comment">// The accumulated gesture distance since becoming responder is</span>
<span class="hljs-comment">// gestureState.d{x,y}</span>
},
<span class="hljs-attr">onPanResponderTerminationRequest</span>: <span class="hljs-function">(<span class="hljs-params">evt, gestureState</span>) =&gt;</span> <span class="hljs-literal">true</span>,
<span class="hljs-attr">onPanResponderRelease</span>: <span class="hljs-function">(<span class="hljs-params">evt, gestureState</span>) =&gt;</span> {
<span class="hljs-comment">// The user has released all touches while this view is the</span>
<span class="hljs-comment">// responder. This typically means a gesture has succeeded</span>
},
<span class="hljs-attr">onPanResponderTerminate</span>: <span class="hljs-function">(<span class="hljs-params">evt, gestureState</span>) =&gt;</span> {
<span class="hljs-comment">// Another component has become the responder, so this gesture</span>
<span class="hljs-comment">// should be cancelled</span>
},
<span class="hljs-attr">onShouldBlockNativeResponder</span>: <span class="hljs-function">(<span class="hljs-params">evt, gestureState</span>) =&gt;</span> {
<span class="hljs-comment">// Returns whether this component should block native components from becoming the JS</span>
<span class="hljs-comment">// responder. Returns true by default. Is currently only supported on android.</span>
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
},
});
}
<span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">View</span> {<span class="hljs-attr">...this._panResponder.panHandlers</span>} /&gt;</span>
);
},
render() {
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">View</span> {<span class="hljs-attr">...this._panResponder.panHandlers</span>} /&gt;</span>
);
}
}
</span></code></pre>
<h3><a class="anchor" aria-hidden="true" id="working-example"></a><a href="#working-example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Working Example</h3>
<p>To see it in action, try the <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/PanResponderExample.js">PanResponder example in RNTester</a></p>