mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Deploy website
Deploy website version based on 82a9218ea398f24d0bdb3a167ddc23eede70c19a
This commit is contained in:
Website Deployment Script
+1
-1
File diff suppressed because one or more lines are too long
+13
-13
@@ -89,12 +89,12 @@
|
||||
<p>Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="2-reading-the-trace"></a><a href="#2-reading-the-trace" 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>2. Reading the trace</h3>
|
||||
<p>After opening the trace in your browser (preferably Chrome), you should see something like this:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceExample.png" alt="Example"></p>
|
||||
<p><img src="/docs/assets/SystraceExample.png" alt="Example"></p>
|
||||
<blockquote>
|
||||
<p><strong>HINT</strong>: Use the WASD keys to strafe and zoom</p>
|
||||
</blockquote>
|
||||
<p>If your trace .html file isn't opening correctly, check your browser console for the following:</p>
|
||||
<p><img src="/react-native/docs/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p><img src="/docs/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p>Since <code>Object.observe</code> was deprecated in recent browsers, you may have to open the file from the Google Chrome Tracing tool. You can do so by:</p>
|
||||
<ul>
|
||||
<li>Opening tab in chrome <a href="chrome://tracing">chrome://tracing</a></li>
|
||||
@@ -104,7 +104,7 @@
|
||||
<blockquote>
|
||||
<p><strong>Enable VSync highlighting</strong></p>
|
||||
<p>Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p><img src="/docs/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p>You should see zebra stripes as in the screenshot above. If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="3-find-your-process"></a><a href="#3-find-your-process" 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>3. Find your process</h3>
|
||||
@@ -112,28 +112,28 @@
|
||||
<p>On the left side, you'll see a set of threads which correspond to the timeline rows on the right. There are a few threads we care about for our purposes: the UI thread (which has your package name or the name UI Thread), <code>mqt_js</code>, and <code>mqt_native_modules</code>. If you're running on Android 5+, we also care about the Render Thread.</p>
|
||||
<ul>
|
||||
<li><p><strong>UI Thread.</strong> This is where standard android measure/layout/draw happens. The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread. The events that you see on this thread should look something like this and have to do with <code>Choreographer</code>, <code>traversals</code>, and <code>DispatchUI</code>:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<p><img src="/docs/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<li><p><strong>JS Thread.</strong> This is where JavaScript is executed. The thread name will be either <code>mqt_js</code> or <code><...></code> depending on how cooperative the kernel on your device is being. To identify it if it doesn't have a name, look for things like <code>JSCall</code>, <code>Bridge.executeJSCall</code>, etc:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<p><img src="/docs/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<li><p><strong>Native Modules Thread.</strong> This is where native module calls (e.g. the <code>UIManager</code>) are executed. The thread name will be either <code>mqt_native_modules</code> or <code><...></code>. To identify it in the latter case, look for things like <code>NativeCall</code>, <code>callJavaModuleMethod</code>, and <code>onBatchComplete</code>:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<p><img src="/docs/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<li><p><strong>Bonus: Render Thread.</strong> If you're using Android L (5.0) and up, you will also have a render thread in your application. This thread generates the actual OpenGL commands used to draw your UI. The thread name will be either <code>RenderThread</code> or <code><...></code>. To identify it in the latter case, look for things like <code>DrawFrame</code> and <code>queueBuffer</code>:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
<p><img src="/docs/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="identifying-a-culprit"></a><a href="#identifying-a-culprit" 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>Identifying a culprit</h2>
|
||||
<p>A smooth animation should look something like the following:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p><img src="/docs/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p>Each change in color is a frame -- remember that in order to display a frame, all our UI work needs to be done by the end of that 16ms period. Notice that no thread is working close to the frame boundary. An application rendering like this is rendering at 60 FPS.</p>
|
||||
<p>If you noticed chop, however, you might see something like this:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p><img src="/docs/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p>Notice that the JS thread is executing almost all the time, and across frame boundaries! This app is not rendering at 60 FPS. In this case, <strong>the problem lies in JS</strong>.</p>
|
||||
<p>You might also see something like this:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p><img src="/docs/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p>In this case, the UI and render threads are the ones that have work crossing frame boundaries. The UI that we're trying to render on each frame is requiring too much work to be done. In this case, <strong>the problem lies in the native views being rendered</strong>.</p>
|
||||
<p>At this point, you'll have some very helpful information to inform your next steps.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="resolving-javascript-issues"></a><a href="#resolving-javascript-issues" 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>Resolving JavaScript issues</h2>
|
||||
<p>If you identified a JS problem, look for clues in the specific JS that you're executing. In the scenario above, we see <code>RCTEventEmitter</code> being called multiple times per frame. Here's a zoom-in of the JS thread from the trace above:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadJS2.png" alt="Too much JS"></p>
|
||||
<p><img src="/docs/assets/SystraceBadJS2.png" alt="Too much JS"></p>
|
||||
<p>This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into <a href="https://reactjs.org/docs/react-component.html#shouldcomponentupdate">shouldComponentUpdate</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="resolving-native-ui-issues"></a><a href="#resolving-native-ui-issues" 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>Resolving native UI Issues</h2>
|
||||
<p>If you identified a native UI problem, there are usually two scenarios:</p>
|
||||
@@ -143,7 +143,7 @@
|
||||
</ol>
|
||||
<h3><a class="anchor" aria-hidden="true" id="too-much-gpu-work"></a><a href="#too-much-gpu-work" 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>Too much GPU work</h3>
|
||||
<p>In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p><img src="/docs/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p>Notice the long amount of time spent in <code>DrawFrame</code> that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.</p>
|
||||
<p>To mitigate this, you should:</p>
|
||||
<ul>
|
||||
@@ -153,7 +153,7 @@
|
||||
<p>If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out <a href="http://www.androiddocs.com/tools/help/gltracer.html">Tracer for OpenGL ES</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="creating-new-views-on-the-ui-thread"></a><a href="#creating-new-views-on-the-ui-thread" 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>Creating new views on the UI thread</h3>
|
||||
<p>In the second scenario, you'll see something more like this:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p><img src="/docs/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p>Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.</p>
|
||||
<p>There isn't a quick way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on an infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/ram-bundles-inline-requires"><span class="arrow-prev">← </span><span>RAM Bundles and Inline Requires</span></a><a class="docs-next button" href="/docs/next/javascript-environment"><span class="function-name-prevnext">JavaScript Environment</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#profiling-android-ui-performance-with-systrace">Profiling Android UI Performance with <code>systrace</code></a><ul class="toc-headings"><li><a href="#1-collecting-a-trace">1. Collecting a trace</a></li><li><a href="#2-reading-the-trace">2. Reading the trace</a></li><li><a href="#3-find-your-process">3. Find your process</a></li></ul></li><li><a href="#identifying-a-culprit">Identifying a culprit</a></li><li><a href="#resolving-javascript-issues">Resolving JavaScript issues</a></li><li><a href="#resolving-native-ui-issues">Resolving native UI Issues</a><ul class="toc-headings"><li><a href="#too-much-gpu-work">Too much GPU work</a></li><li><a href="#creating-new-views-on-the-ui-thread">Creating new views on the UI thread</a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
|
||||
@@ -89,12 +89,12 @@
|
||||
<p>Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="2-reading-the-trace"></a><a href="#2-reading-the-trace" 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>2. Reading the trace</h3>
|
||||
<p>After opening the trace in your browser (preferably Chrome), you should see something like this:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceExample.png" alt="Example"></p>
|
||||
<p><img src="/docs/assets/SystraceExample.png" alt="Example"></p>
|
||||
<blockquote>
|
||||
<p><strong>HINT</strong>: Use the WASD keys to strafe and zoom</p>
|
||||
</blockquote>
|
||||
<p>If your trace .html file isn't opening correctly, check your browser console for the following:</p>
|
||||
<p><img src="/react-native/docs/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p><img src="/docs/assets/ObjectObserveError.png" alt="ObjectObserveError"></p>
|
||||
<p>Since <code>Object.observe</code> was deprecated in recent browsers, you may have to open the file from the Google Chrome Tracing tool. You can do so by:</p>
|
||||
<ul>
|
||||
<li>Opening tab in chrome <a href="chrome://tracing">chrome://tracing</a></li>
|
||||
@@ -104,7 +104,7 @@
|
||||
<blockquote>
|
||||
<p><strong>Enable VSync highlighting</strong></p>
|
||||
<p>Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p><img src="/docs/assets/SystraceHighlightVSync.png" alt="Enable VSync Highlighting"></p>
|
||||
<p>You should see zebra stripes as in the screenshot above. If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="3-find-your-process"></a><a href="#3-find-your-process" 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>3. Find your process</h3>
|
||||
@@ -112,28 +112,28 @@
|
||||
<p>On the left side, you'll see a set of threads which correspond to the timeline rows on the right. There are a few threads we care about for our purposes: the UI thread (which has your package name or the name UI Thread), <code>mqt_js</code>, and <code>mqt_native_modules</code>. If you're running on Android 5+, we also care about the Render Thread.</p>
|
||||
<ul>
|
||||
<li><p><strong>UI Thread.</strong> This is where standard android measure/layout/draw happens. The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread. The events that you see on this thread should look something like this and have to do with <code>Choreographer</code>, <code>traversals</code>, and <code>DispatchUI</code>:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<p><img src="/docs/assets/SystraceUIThreadExample.png" alt="UI Thread Example"></p></li>
|
||||
<li><p><strong>JS Thread.</strong> This is where JavaScript is executed. The thread name will be either <code>mqt_js</code> or <code><...></code> depending on how cooperative the kernel on your device is being. To identify it if it doesn't have a name, look for things like <code>JSCall</code>, <code>Bridge.executeJSCall</code>, etc:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<p><img src="/docs/assets/SystraceJSThreadExample.png" alt="JS Thread Example"></p></li>
|
||||
<li><p><strong>Native Modules Thread.</strong> This is where native module calls (e.g. the <code>UIManager</code>) are executed. The thread name will be either <code>mqt_native_modules</code> or <code><...></code>. To identify it in the latter case, look for things like <code>NativeCall</code>, <code>callJavaModuleMethod</code>, and <code>onBatchComplete</code>:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<p><img src="/docs/assets/SystraceNativeModulesThreadExample.png" alt="Native Modules Thread Example"></p></li>
|
||||
<li><p><strong>Bonus: Render Thread.</strong> If you're using Android L (5.0) and up, you will also have a render thread in your application. This thread generates the actual OpenGL commands used to draw your UI. The thread name will be either <code>RenderThread</code> or <code><...></code>. To identify it in the latter case, look for things like <code>DrawFrame</code> and <code>queueBuffer</code>:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
<p><img src="/docs/assets/SystraceRenderThreadExample.png" alt="Render Thread Example"></p></li>
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="identifying-a-culprit"></a><a href="#identifying-a-culprit" 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>Identifying a culprit</h2>
|
||||
<p>A smooth animation should look something like the following:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p><img src="/docs/assets/SystraceWellBehaved.png" alt="Smooth Animation"></p>
|
||||
<p>Each change in color is a frame -- remember that in order to display a frame, all our UI work needs to be done by the end of that 16ms period. Notice that no thread is working close to the frame boundary. An application rendering like this is rendering at 60 FPS.</p>
|
||||
<p>If you noticed chop, however, you might see something like this:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p><img src="/docs/assets/SystraceBadJS.png" alt="Choppy Animation from JS"></p>
|
||||
<p>Notice that the JS thread is executing almost all the time, and across frame boundaries! This app is not rendering at 60 FPS. In this case, <strong>the problem lies in JS</strong>.</p>
|
||||
<p>You might also see something like this:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p><img src="/docs/assets/SystraceBadUI.png" alt="Choppy Animation from UI"></p>
|
||||
<p>In this case, the UI and render threads are the ones that have work crossing frame boundaries. The UI that we're trying to render on each frame is requiring too much work to be done. In this case, <strong>the problem lies in the native views being rendered</strong>.</p>
|
||||
<p>At this point, you'll have some very helpful information to inform your next steps.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="resolving-javascript-issues"></a><a href="#resolving-javascript-issues" 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>Resolving JavaScript issues</h2>
|
||||
<p>If you identified a JS problem, look for clues in the specific JS that you're executing. In the scenario above, we see <code>RCTEventEmitter</code> being called multiple times per frame. Here's a zoom-in of the JS thread from the trace above:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadJS2.png" alt="Too much JS"></p>
|
||||
<p><img src="/docs/assets/SystraceBadJS2.png" alt="Too much JS"></p>
|
||||
<p>This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into <a href="https://reactjs.org/docs/react-component.html#shouldcomponentupdate">shouldComponentUpdate</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="resolving-native-ui-issues"></a><a href="#resolving-native-ui-issues" 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>Resolving native UI Issues</h2>
|
||||
<p>If you identified a native UI problem, there are usually two scenarios:</p>
|
||||
@@ -143,7 +143,7 @@
|
||||
</ol>
|
||||
<h3><a class="anchor" aria-hidden="true" id="too-much-gpu-work"></a><a href="#too-much-gpu-work" 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>Too much GPU work</h3>
|
||||
<p>In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p><img src="/docs/assets/SystraceBadUI.png" alt="Overloaded GPU"></p>
|
||||
<p>Notice the long amount of time spent in <code>DrawFrame</code> that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.</p>
|
||||
<p>To mitigate this, you should:</p>
|
||||
<ul>
|
||||
@@ -153,7 +153,7 @@
|
||||
<p>If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out <a href="http://www.androiddocs.com/tools/help/gltracer.html">Tracer for OpenGL ES</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="creating-new-views-on-the-ui-thread"></a><a href="#creating-new-views-on-the-ui-thread" 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>Creating new views on the UI thread</h3>
|
||||
<p>In the second scenario, you'll see something more like this:</p>
|
||||
<p><img src="/react-native/docs/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p><img src="/docs/assets/SystraceBadCreateUI.png" alt="Creating Views"></p>
|
||||
<p>Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.</p>
|
||||
<p>There isn't a quick way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on an infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/ram-bundles-inline-requires"><span class="arrow-prev">← </span><span>RAM Bundles and Inline Requires</span></a><a class="docs-next button" href="/docs/next/javascript-environment"><span class="function-name-prevnext">JavaScript Environment</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#profiling-android-ui-performance-with-systrace">Profiling Android UI Performance with <code>systrace</code></a><ul class="toc-headings"><li><a href="#1-collecting-a-trace">1. Collecting a trace</a></li><li><a href="#2-reading-the-trace">2. Reading the trace</a></li><li><a href="#3-find-your-process">3. Find your process</a></li></ul></li><li><a href="#identifying-a-culprit">Identifying a culprit</a></li><li><a href="#resolving-javascript-issues">Resolving JavaScript issues</a></li><li><a href="#resolving-native-ui-issues">Resolving native UI Issues</a><ul class="toc-headings"><li><a href="#too-much-gpu-work">Too much GPU work</a></li><li><a href="#creating-new-views-on-the-ui-thread">Creating new views on the UI thread</a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
|
||||
@@ -69,20 +69,8 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/touchableopacity.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">TouchableOpacity</h1></header><article><div><span><p>A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.</p>
|
||||
<p>Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hierarchy. Be aware that this can affect layout.</p>
|
||||
<p>Example:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function-variable function">renderButton</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TouchableOpacity</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPressButton<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Image</span></span>
|
||||
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./myButton.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">TouchableOpacity</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="example"></a><a href="#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>Example</h3>
|
||||
<p>Opacity is controlled by wrapping the children in an <code>Animated.View</code>, which is added to the view hierarchy. Be aware that this can affect layout.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#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>Example</h2>
|
||||
<div class="toggler">
|
||||
<ul role="tablist" class="toggle-syntax">
|
||||
<li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
|
||||
@@ -94,45 +82,48 @@
|
||||
</ul>
|
||||
</div>
|
||||
<p><block class="functional syntax" /></p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { StyleSheet, TouchableOpacity, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> { StyleSheet, Text, TouchableOpacity, View } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> App = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">const</span> [count, setCount] = useState(<span class="hljs-number">0</span>);
|
||||
<span class="hljs-keyword">const</span> handleIncrementCount = <span class="hljs-function"><span class="hljs-params">()</span> =></span> setCount(<span class="hljs-function"><span class="hljs-params">prevState</span> =></span> prevState + <span class="hljs-number">1</span>);
|
||||
<span class="hljs-keyword">const</span> onPress = <span class="hljs-function"><span class="hljs-params">()</span> =></span> setCount(<span class="hljs-function"><span class="hljs-params">prevCount</span> =></span> prevCount + <span class="hljs-number">1</span>);
|
||||
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.countContainer}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Count: {count}<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">TouchableOpacity</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.button}</span> <span class="hljs-attr">onPress</span>=<span class="hljs-string">{handleIncrementCount}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Touch Here<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">TouchableOpacity</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{styles.button}</span>
|
||||
<span class="hljs-attr">onPress</span>=<span class="hljs-string">{onPress}</span>
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Press Here<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">TouchableOpacity</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span></span>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
|
||||
<span class="hljs-attr">container</span>: {
|
||||
<span class="hljs-attr">flex</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-attr">justifyContent</span>: <span class="hljs-string">'center'</span>,
|
||||
<span class="hljs-attr">paddingHorizontal</span>: <span class="hljs-number">10</span>,
|
||||
<span class="hljs-attr">justifyContent</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">paddingHorizontal</span>: <span class="hljs-number">10</span>
|
||||
},
|
||||
<span class="hljs-attr">button</span>: {
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">'center'</span>,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'#DDDDDD'</span>,
|
||||
<span class="hljs-attr">padding</span>: <span class="hljs-number">10</span>,
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">"#DDDDDD"</span>,
|
||||
<span class="hljs-attr">padding</span>: <span class="hljs-number">10</span>
|
||||
},
|
||||
<span class="hljs-attr">countContainer</span>: {
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">'center'</span>,
|
||||
<span class="hljs-attr">padding</span>: <span class="hljs-number">10</span>,
|
||||
},
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">padding</span>: <span class="hljs-number">10</span>
|
||||
}
|
||||
});
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Function Component Example TouchableOpacity"
|
||||
data-snack-name="TouchableOpacity Function Component Example"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20'react'%3B%0Aimport%20%7B%20StyleSheet%2C%20TouchableOpacity%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20%5Bcount%2C%20setCount%5D%20%3D%20useState(0)%3B%0A%20%20const%20handleIncrementCount%20%3D%20()%20%3D%3E%20setCount(prevState%20%3D%3E%20prevState%20%2B%201)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.countContainer%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3ECount%3A%20%7Bcount%7D%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CTouchableOpacity%20style%3D%7Bstyles.button%7D%20onPress%3D%7BhandleIncrementCount%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3ETouch%20Here%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20'center'%2C%0A%20%20%20%20paddingHorizontal%3A%2010%2C%0A%20%20%7D%2C%0A%20%20button%3A%20%7B%0A%20%20%20%20alignItems%3A%20'center'%2C%0A%20%20%20%20backgroundColor%3A%20'%23DDDDDD'%2C%0A%20%20%20%20padding%3A%2010%2C%0A%20%20%7D%2C%0A%20%20countContainer%3A%20%7B%0A%20%20%20%20alignItems%3A%20'center'%2C%0A%20%20%20%20padding%3A%2010%2C%0A%20%20%7D%2C%0A%7D)%3B%0A"
|
||||
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20StyleSheet%2C%20Text%2C%20TouchableOpacity%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aexport%20default%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20%5Bcount%2C%20setCount%5D%20%3D%20useState(0)%3B%0A%20%20const%20onPress%20%3D%20()%20%3D%3E%20setCount(prevCount%20%3D%3E%20prevCount%20%2B%201)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.countContainer%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3ECount%3A%20%7Bcount%7D%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CTouchableOpacity%0A%20%20%20%20%20%20%20%20style%3D%7Bstyles.button%7D%0A%20%20%20%20%20%20%20%20onPress%3D%7BonPress%7D%0A%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%3CText%3EPress%20Here%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%2C%0A%20%20%20%20paddingHorizontal%3A%2010%0A%20%20%7D%2C%0A%20%20button%3A%20%7B%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20backgroundColor%3A%20%22%23DDDDDD%22%2C%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%2C%0A%20%20countContainer%3A%20%7B%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%0A%7D)%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -145,68 +136,59 @@
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p><block class="classical syntax" /></p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>
|
||||
<span class="hljs-keyword">import</span> {
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
Text,
|
||||
View,
|
||||
} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> { StyleSheet, Text, TouchableOpacity, View } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</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>.state = { <span class="hljs-attr">count</span>: <span class="hljs-number">0</span> }
|
||||
<span class="hljs-keyword">super</span>(props);
|
||||
<span class="hljs-keyword">this</span>.state = { <span class="hljs-attr">count</span>: <span class="hljs-number">0</span> };
|
||||
}
|
||||
|
||||
onPress = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
<span class="hljs-attr">count</span>: <span class="hljs-keyword">this</span>.state.count+<span class="hljs-number">1</span>
|
||||
})
|
||||
}
|
||||
<span class="hljs-attr">count</span>: <span class="hljs-keyword">this</span>.state.count + <span class="hljs-number">1</span>
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">TouchableOpacity</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{styles.button}</span>
|
||||
<span class="hljs-attr">onPress</span>=<span class="hljs-string">{this.onPress}</span>
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span> Touch Here <span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">TouchableOpacity</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.countContainer]}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.countText]}</span>></span>
|
||||
{ this.state.count !== 0 ? this.state.count: null}
|
||||
<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
render() {
|
||||
<span class="hljs-keyword">const</span> { count } = <span class="hljs-keyword">this</span>.state;
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.countContainer}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Count: {count}<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">TouchableOpacity</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{styles.button}</span>
|
||||
<span class="hljs-attr">onPress</span>=<span class="hljs-string">{this.onPress}</span>
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Press Here<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">TouchableOpacity</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span></span>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
|
||||
<span class="hljs-attr">container</span>: {
|
||||
<span class="hljs-attr">flex</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-attr">justifyContent</span>: <span class="hljs-string">'center'</span>,
|
||||
<span class="hljs-attr">justifyContent</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">paddingHorizontal</span>: <span class="hljs-number">10</span>
|
||||
},
|
||||
<span class="hljs-attr">button</span>: {
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">'center'</span>,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'#DDDDDD'</span>,
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">"#DDDDDD"</span>,
|
||||
<span class="hljs-attr">padding</span>: <span class="hljs-number">10</span>
|
||||
},
|
||||
<span class="hljs-attr">countContainer</span>: {
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">'center'</span>,
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">padding</span>: <span class="hljs-number">10</span>
|
||||
},
|
||||
<span class="hljs-attr">countText</span>: {
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'#FF00FF'</span>
|
||||
}
|
||||
})
|
||||
});
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Class Component Example"
|
||||
data-snack-name="TouchableOpacity Class Component Example"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%0Aimport%20%7B%0A%20%20StyleSheet%2C%0A%20%20TouchableOpacity%2C%0A%20%20Text%2C%0A%20%20View%2C%0A%7D%20from%20'react-native'%0A%0Aexport%20default%20class%20App%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%0A%20%20%20%20this.state%20%3D%20%7B%20count%3A%200%20%7D%0A%20%20%7D%0A%0A%20%20onPress%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20this.setState(%7B%0A%20%20%20%20%20%20count%3A%20this.state.count%2B1%0A%20%20%20%20%7D)%0A%20%20%7D%0A%0A%20render()%20%7B%0A%20%20%20return%20(%0A%20%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%3CTouchableOpacity%0A%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.button%7D%0A%20%20%20%20%20%20%20%20%20onPress%3D%7Bthis.onPress%7D%0A%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%3CText%3E%20Touch%20Here%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.countContainer%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%5Bstyles.countText%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20this.state.count%20!%3D%3D%200%20%3F%20this.state.count%3A%20null%7D%0A%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20'center'%2C%0A%20%20%20%20paddingHorizontal%3A%2010%0A%20%20%7D%2C%0A%20%20button%3A%20%7B%0A%20%20%20%20alignItems%3A%20'center'%2C%0A%20%20%20%20backgroundColor%3A%20'%23DDDDDD'%2C%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%2C%0A%20%20countContainer%3A%20%7B%0A%20%20%20%20alignItems%3A%20'center'%2C%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%2C%0A%20%20countText%3A%20%7B%0A%20%20%20%20color%3A%20'%23FF00FF'%0A%20%20%7D%0A%7D)%0A"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20StyleSheet%2C%20Text%2C%20TouchableOpacity%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aexport%20default%20class%20App%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7B%20count%3A%200%20%7D%3B%0A%20%20%7D%0A%0A%20%20onPress%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20this.setState(%7B%0A%20%20%20%20%20%20count%3A%20this.state.count%20%2B%201%0A%20%20%20%20%7D)%3B%0A%20%20%7D%3B%0A%0A%20%20render()%20%7B%0A%20%20%20%20const%20%7B%20count%20%7D%20%3D%20this.state%3B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.countContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%3ECount%3A%20%7Bcount%7D%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%3CTouchableOpacity%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.button%7D%0A%20%20%20%20%20%20%20%20%20%20onPress%3D%7Bthis.onPress%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%3EPress%20Here%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%2C%0A%20%20%20%20paddingHorizontal%3A%2010%0A%20%20%7D%2C%0A%20%20button%3A%20%7B%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20backgroundColor%3A%20%22%23DDDDDD%22%2C%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%2C%0A%20%20countContainer%3A%20%7B%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%0A%7D)%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -234,7 +216,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="activeopacity"></a><a href="#activeopacity" 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><code>activeOpacity</code></h3>
|
||||
<p>Determines what the opacity of the wrapped view should be when touch is active. Defaults to 0.2.</p>
|
||||
<p>Determines what the opacity of the wrapped view should be when touch is active. Defaults to <code>0.2</code>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -246,7 +228,16 @@
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="tvparallaxproperties"></a><a href="#tvparallaxproperties" 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><code>tvParallaxProperties</code></h3>
|
||||
<p><em>(Apple TV only)</em> Object with properties to control Apple TV parallax effects.</p>
|
||||
<p>enabled: If true, parallax effects are enabled. Defaults to true. shiftDistanceX: Defaults to 2.0. shiftDistanceY: Defaults to 2.0. tiltAngle: Defaults to 0.05. magnification: Defaults to 1.0. pressMagnification: Defaults to 1.0. pressDuration: Defaults to 0.3. pressDelay: Defaults to 0.0.</p>
|
||||
<ul>
|
||||
<li><code>enabled</code>: If <code>true</code>, parallax effects are enabled. Defaults to <code>true</code>.</li>
|
||||
<li><code>shiftDistanceX</code>: Defaults to <code>2.0</code>.</li>
|
||||
<li><code>shiftDistanceY</code>: Defaults to <code>2.0</code>.</li>
|
||||
<li><code>tiltAngle</code>: Defaults to <code>0.05</code>.</li>
|
||||
<li><code>magnification</code>: Defaults to <code>1.0</code>.</li>
|
||||
<li><code>pressMagnification</code>: Defaults to <code>1.0</code>.</li>
|
||||
<li><code>pressDuration</code>: Defaults to <code>0.3</code>.</li>
|
||||
<li><code>pressDelay</code>: Defaults to <code>0.0</code>.</li>
|
||||
</ul>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
@@ -318,7 +309,7 @@
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td><td>iOS</td></tr>
|
||||
<tr><td>bool</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" 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>Methods</h2>
|
||||
@@ -326,7 +317,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">setOpacityTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span>value<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>duration<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Animate the touchable to a new opacity.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/touchablenativefeedback"><span class="arrow-prev">← </span><span class="function-name-prevnext">TouchableNativeFeedback</span></a><a class="docs-next button" href="/docs/next/touchablewithoutfeedback"><span class="function-name-prevnext">TouchableWithoutFeedback</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#style"><code>style</code></a></li><li><a href="#activeopacity"><code>activeOpacity</code></a></li><li><a href="#tvparallaxproperties"><code>tvParallaxProperties</code></a></li><li><a href="#hastvpreferredfocus"><code>hasTVPreferredFocus</code></a></li><li><a href="#nextfocusdown"><code>nextFocusDown</code></a></li><li><a href="#nextfocusforward"><code>nextFocusForward</code></a></li><li><a href="#nextfocusleft"><code>nextFocusLeft</code></a></li><li><a href="#nextfocusright"><code>nextFocusRight</code></a></li><li><a href="#nextfocusup"><code>nextFocusUp</code></a></li></ul></li><li><a href="#methods">Methods</a><ul class="toc-headings"><li><a href="#setopacityto"><code>setOpacityTo()</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/touchablenativefeedback"><span class="arrow-prev">← </span><span class="function-name-prevnext">TouchableNativeFeedback</span></a><a class="docs-next button" href="/docs/next/touchablewithoutfeedback"><span class="function-name-prevnext">TouchableWithoutFeedback</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#style"><code>style</code></a></li><li><a href="#activeopacity"><code>activeOpacity</code></a></li><li><a href="#tvparallaxproperties"><code>tvParallaxProperties</code></a></li><li><a href="#hastvpreferredfocus"><code>hasTVPreferredFocus</code></a></li><li><a href="#nextfocusdown"><code>nextFocusDown</code></a></li><li><a href="#nextfocusforward"><code>nextFocusForward</code></a></li><li><a href="#nextfocusleft"><code>nextFocusLeft</code></a></li><li><a href="#nextfocusright"><code>nextFocusRight</code></a></li><li><a href="#nextfocusup"><code>nextFocusUp</code></a></li></ul></li><li><a href="#methods">Methods</a><ul class="toc-headings"><li><a href="#setopacityto"><code>setOpacityTo()</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
@@ -69,20 +69,8 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/touchableopacity.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">TouchableOpacity</h1></header><article><div><span><p>A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.</p>
|
||||
<p>Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hierarchy. Be aware that this can affect layout.</p>
|
||||
<p>Example:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function-variable function">renderButton</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TouchableOpacity</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPressButton<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Image</span></span>
|
||||
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./myButton.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">TouchableOpacity</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="example"></a><a href="#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>Example</h3>
|
||||
<p>Opacity is controlled by wrapping the children in an <code>Animated.View</code>, which is added to the view hierarchy. Be aware that this can affect layout.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#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>Example</h2>
|
||||
<div class="toggler">
|
||||
<ul role="tablist" class="toggle-syntax">
|
||||
<li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
|
||||
@@ -94,45 +82,48 @@
|
||||
</ul>
|
||||
</div>
|
||||
<p><block class="functional syntax" /></p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { StyleSheet, TouchableOpacity, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> { StyleSheet, Text, TouchableOpacity, View } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> App = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">const</span> [count, setCount] = useState(<span class="hljs-number">0</span>);
|
||||
<span class="hljs-keyword">const</span> handleIncrementCount = <span class="hljs-function"><span class="hljs-params">()</span> =></span> setCount(<span class="hljs-function"><span class="hljs-params">prevState</span> =></span> prevState + <span class="hljs-number">1</span>);
|
||||
<span class="hljs-keyword">const</span> onPress = <span class="hljs-function"><span class="hljs-params">()</span> =></span> setCount(<span class="hljs-function"><span class="hljs-params">prevCount</span> =></span> prevCount + <span class="hljs-number">1</span>);
|
||||
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.countContainer}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Count: {count}<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">TouchableOpacity</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.button}</span> <span class="hljs-attr">onPress</span>=<span class="hljs-string">{handleIncrementCount}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Touch Here<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">TouchableOpacity</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{styles.button}</span>
|
||||
<span class="hljs-attr">onPress</span>=<span class="hljs-string">{onPress}</span>
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Press Here<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">TouchableOpacity</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span></span>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
|
||||
<span class="hljs-attr">container</span>: {
|
||||
<span class="hljs-attr">flex</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-attr">justifyContent</span>: <span class="hljs-string">'center'</span>,
|
||||
<span class="hljs-attr">paddingHorizontal</span>: <span class="hljs-number">10</span>,
|
||||
<span class="hljs-attr">justifyContent</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">paddingHorizontal</span>: <span class="hljs-number">10</span>
|
||||
},
|
||||
<span class="hljs-attr">button</span>: {
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">'center'</span>,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'#DDDDDD'</span>,
|
||||
<span class="hljs-attr">padding</span>: <span class="hljs-number">10</span>,
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">"#DDDDDD"</span>,
|
||||
<span class="hljs-attr">padding</span>: <span class="hljs-number">10</span>
|
||||
},
|
||||
<span class="hljs-attr">countContainer</span>: {
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">'center'</span>,
|
||||
<span class="hljs-attr">padding</span>: <span class="hljs-number">10</span>,
|
||||
},
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">padding</span>: <span class="hljs-number">10</span>
|
||||
}
|
||||
});
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Function Component Example TouchableOpacity"
|
||||
data-snack-name="TouchableOpacity Function Component Example"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20'react'%3B%0Aimport%20%7B%20StyleSheet%2C%20TouchableOpacity%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20App()%20%7B%0A%20%20const%20%5Bcount%2C%20setCount%5D%20%3D%20useState(0)%3B%0A%20%20const%20handleIncrementCount%20%3D%20()%20%3D%3E%20setCount(prevState%20%3D%3E%20prevState%20%2B%201)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.countContainer%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3ECount%3A%20%7Bcount%7D%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CTouchableOpacity%20style%3D%7Bstyles.button%7D%20onPress%3D%7BhandleIncrementCount%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3ETouch%20Here%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20'center'%2C%0A%20%20%20%20paddingHorizontal%3A%2010%2C%0A%20%20%7D%2C%0A%20%20button%3A%20%7B%0A%20%20%20%20alignItems%3A%20'center'%2C%0A%20%20%20%20backgroundColor%3A%20'%23DDDDDD'%2C%0A%20%20%20%20padding%3A%2010%2C%0A%20%20%7D%2C%0A%20%20countContainer%3A%20%7B%0A%20%20%20%20alignItems%3A%20'center'%2C%0A%20%20%20%20padding%3A%2010%2C%0A%20%20%7D%2C%0A%7D)%3B%0A"
|
||||
data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20StyleSheet%2C%20Text%2C%20TouchableOpacity%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aexport%20default%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20%5Bcount%2C%20setCount%5D%20%3D%20useState(0)%3B%0A%20%20const%20onPress%20%3D%20()%20%3D%3E%20setCount(prevCount%20%3D%3E%20prevCount%20%2B%201)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.countContainer%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3ECount%3A%20%7Bcount%7D%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CTouchableOpacity%0A%20%20%20%20%20%20%20%20style%3D%7Bstyles.button%7D%0A%20%20%20%20%20%20%20%20onPress%3D%7BonPress%7D%0A%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%3CText%3EPress%20Here%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%2C%0A%20%20%20%20paddingHorizontal%3A%2010%0A%20%20%7D%2C%0A%20%20button%3A%20%7B%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20backgroundColor%3A%20%22%23DDDDDD%22%2C%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%2C%0A%20%20countContainer%3A%20%7B%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%0A%7D)%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -145,68 +136,59 @@
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p><block class="classical syntax" /></p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>
|
||||
<span class="hljs-keyword">import</span> {
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
Text,
|
||||
View,
|
||||
} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> { StyleSheet, Text, TouchableOpacity, View } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</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>.state = { <span class="hljs-attr">count</span>: <span class="hljs-number">0</span> }
|
||||
<span class="hljs-keyword">super</span>(props);
|
||||
<span class="hljs-keyword">this</span>.state = { <span class="hljs-attr">count</span>: <span class="hljs-number">0</span> };
|
||||
}
|
||||
|
||||
onPress = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
<span class="hljs-attr">count</span>: <span class="hljs-keyword">this</span>.state.count+<span class="hljs-number">1</span>
|
||||
})
|
||||
}
|
||||
<span class="hljs-attr">count</span>: <span class="hljs-keyword">this</span>.state.count + <span class="hljs-number">1</span>
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">TouchableOpacity</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{styles.button}</span>
|
||||
<span class="hljs-attr">onPress</span>=<span class="hljs-string">{this.onPress}</span>
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span> Touch Here <span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">TouchableOpacity</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.countContainer]}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{[styles.countText]}</span>></span>
|
||||
{ this.state.count !== 0 ? this.state.count: null}
|
||||
<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
render() {
|
||||
<span class="hljs-keyword">const</span> { count } = <span class="hljs-keyword">this</span>.state;
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.countContainer}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Count: {count}<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">TouchableOpacity</span>
|
||||
<span class="hljs-attr">style</span>=<span class="hljs-string">{styles.button}</span>
|
||||
<span class="hljs-attr">onPress</span>=<span class="hljs-string">{this.onPress}</span>
|
||||
></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Press Here<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">TouchableOpacity</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span></span>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
|
||||
<span class="hljs-attr">container</span>: {
|
||||
<span class="hljs-attr">flex</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-attr">justifyContent</span>: <span class="hljs-string">'center'</span>,
|
||||
<span class="hljs-attr">justifyContent</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">paddingHorizontal</span>: <span class="hljs-number">10</span>
|
||||
},
|
||||
<span class="hljs-attr">button</span>: {
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">'center'</span>,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'#DDDDDD'</span>,
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">"#DDDDDD"</span>,
|
||||
<span class="hljs-attr">padding</span>: <span class="hljs-number">10</span>
|
||||
},
|
||||
<span class="hljs-attr">countContainer</span>: {
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">'center'</span>,
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">padding</span>: <span class="hljs-number">10</span>
|
||||
},
|
||||
<span class="hljs-attr">countText</span>: {
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'#FF00FF'</span>
|
||||
}
|
||||
})
|
||||
});
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Class Component Example"
|
||||
data-snack-name="TouchableOpacity Class Component Example"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%0Aimport%20%7B%0A%20%20StyleSheet%2C%0A%20%20TouchableOpacity%2C%0A%20%20Text%2C%0A%20%20View%2C%0A%7D%20from%20'react-native'%0A%0Aexport%20default%20class%20App%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%0A%20%20%20%20this.state%20%3D%20%7B%20count%3A%200%20%7D%0A%20%20%7D%0A%0A%20%20onPress%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20this.setState(%7B%0A%20%20%20%20%20%20count%3A%20this.state.count%2B1%0A%20%20%20%20%7D)%0A%20%20%7D%0A%0A%20render()%20%7B%0A%20%20%20return%20(%0A%20%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%3CTouchableOpacity%0A%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.button%7D%0A%20%20%20%20%20%20%20%20%20onPress%3D%7Bthis.onPress%7D%0A%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%3CText%3E%20Touch%20Here%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20%20%20%20%20%20%3CView%20style%3D%7B%5Bstyles.countContainer%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%5Bstyles.countText%5D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20this.state.count%20!%3D%3D%200%20%3F%20this.state.count%3A%20null%7D%0A%20%20%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20'center'%2C%0A%20%20%20%20paddingHorizontal%3A%2010%0A%20%20%7D%2C%0A%20%20button%3A%20%7B%0A%20%20%20%20alignItems%3A%20'center'%2C%0A%20%20%20%20backgroundColor%3A%20'%23DDDDDD'%2C%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%2C%0A%20%20countContainer%3A%20%7B%0A%20%20%20%20alignItems%3A%20'center'%2C%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%2C%0A%20%20countText%3A%20%7B%0A%20%20%20%20color%3A%20'%23FF00FF'%0A%20%20%7D%0A%7D)%0A"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20StyleSheet%2C%20Text%2C%20TouchableOpacity%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aexport%20default%20class%20App%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7B%20count%3A%200%20%7D%3B%0A%20%20%7D%0A%0A%20%20onPress%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20this.setState(%7B%0A%20%20%20%20%20%20count%3A%20this.state.count%20%2B%201%0A%20%20%20%20%7D)%3B%0A%20%20%7D%3B%0A%0A%20%20render()%20%7B%0A%20%20%20%20const%20%7B%20count%20%7D%20%3D%20this.state%3B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.countContainer%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%3ECount%3A%20%7Bcount%7D%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%3CTouchableOpacity%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.button%7D%0A%20%20%20%20%20%20%20%20%20%20onPress%3D%7Bthis.onPress%7D%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3CText%3EPress%20Here%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3C%2FTouchableOpacity%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%2C%0A%20%20%20%20paddingHorizontal%3A%2010%0A%20%20%7D%2C%0A%20%20button%3A%20%7B%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20backgroundColor%3A%20%22%23DDDDDD%22%2C%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%2C%0A%20%20countContainer%3A%20%7B%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%0A%7D)%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -234,7 +216,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="activeopacity"></a><a href="#activeopacity" 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><code>activeOpacity</code></h3>
|
||||
<p>Determines what the opacity of the wrapped view should be when touch is active. Defaults to 0.2.</p>
|
||||
<p>Determines what the opacity of the wrapped view should be when touch is active. Defaults to <code>0.2</code>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -246,7 +228,16 @@
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="tvparallaxproperties"></a><a href="#tvparallaxproperties" 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><code>tvParallaxProperties</code></h3>
|
||||
<p><em>(Apple TV only)</em> Object with properties to control Apple TV parallax effects.</p>
|
||||
<p>enabled: If true, parallax effects are enabled. Defaults to true. shiftDistanceX: Defaults to 2.0. shiftDistanceY: Defaults to 2.0. tiltAngle: Defaults to 0.05. magnification: Defaults to 1.0. pressMagnification: Defaults to 1.0. pressDuration: Defaults to 0.3. pressDelay: Defaults to 0.0.</p>
|
||||
<ul>
|
||||
<li><code>enabled</code>: If <code>true</code>, parallax effects are enabled. Defaults to <code>true</code>.</li>
|
||||
<li><code>shiftDistanceX</code>: Defaults to <code>2.0</code>.</li>
|
||||
<li><code>shiftDistanceY</code>: Defaults to <code>2.0</code>.</li>
|
||||
<li><code>tiltAngle</code>: Defaults to <code>0.05</code>.</li>
|
||||
<li><code>magnification</code>: Defaults to <code>1.0</code>.</li>
|
||||
<li><code>pressMagnification</code>: Defaults to <code>1.0</code>.</li>
|
||||
<li><code>pressDuration</code>: Defaults to <code>0.3</code>.</li>
|
||||
<li><code>pressDelay</code>: Defaults to <code>0.0</code>.</li>
|
||||
</ul>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
@@ -318,7 +309,7 @@
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td><td>iOS</td></tr>
|
||||
<tr><td>bool</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" 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>Methods</h2>
|
||||
@@ -326,7 +317,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">setOpacityTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span>value<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>duration<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Animate the touchable to a new opacity.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/touchablenativefeedback"><span class="arrow-prev">← </span><span class="function-name-prevnext">TouchableNativeFeedback</span></a><a class="docs-next button" href="/docs/next/touchablewithoutfeedback"><span class="function-name-prevnext">TouchableWithoutFeedback</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#style"><code>style</code></a></li><li><a href="#activeopacity"><code>activeOpacity</code></a></li><li><a href="#tvparallaxproperties"><code>tvParallaxProperties</code></a></li><li><a href="#hastvpreferredfocus"><code>hasTVPreferredFocus</code></a></li><li><a href="#nextfocusdown"><code>nextFocusDown</code></a></li><li><a href="#nextfocusforward"><code>nextFocusForward</code></a></li><li><a href="#nextfocusleft"><code>nextFocusLeft</code></a></li><li><a href="#nextfocusright"><code>nextFocusRight</code></a></li><li><a href="#nextfocusup"><code>nextFocusUp</code></a></li></ul></li><li><a href="#methods">Methods</a><ul class="toc-headings"><li><a href="#setopacityto"><code>setOpacityTo()</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/touchablenativefeedback"><span class="arrow-prev">← </span><span class="function-name-prevnext">TouchableNativeFeedback</span></a><a class="docs-next button" href="/docs/next/touchablewithoutfeedback"><span class="function-name-prevnext">TouchableWithoutFeedback</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#style"><code>style</code></a></li><li><a href="#activeopacity"><code>activeOpacity</code></a></li><li><a href="#tvparallaxproperties"><code>tvParallaxProperties</code></a></li><li><a href="#hastvpreferredfocus"><code>hasTVPreferredFocus</code></a></li><li><a href="#nextfocusdown"><code>nextFocusDown</code></a></li><li><a href="#nextfocusforward"><code>nextFocusForward</code></a></li><li><a href="#nextfocusleft"><code>nextFocusLeft</code></a></li><li><a href="#nextfocusright"><code>nextFocusRight</code></a></li><li><a href="#nextfocusup"><code>nextFocusUp</code></a></li></ul></li><li><a href="#methods">Methods</a><ul class="toc-headings"><li><a href="#setopacityto"><code>setOpacityTo()</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
Reference in New Issue
Block a user