mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for 0.20
This commit is contained in:
1 parent
312698bd16
commit
305982cfb5
102 files changed
+875
-371
No files matched your search
@@ -1,6 +1,6 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>TouchableWithoutFeedback – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="TouchableWithoutFeedback – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.19</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="https://github.com/facebook/react-native/releases" class="">Releases</a></li><li><a href="http://reactnative.cc" class="">Newsletter</a></li><li><a href="showcase.html" class="">Showcase</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="docs/android-setup.html#content">Android Setup</a></li><li><a style="margin-left:0;" class="" href="docs/linux-windows-support.html#content">Linux and Windows Support</a></li><li><a style="margin-left:0;" class="" href="docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="docs/images.html#content">Images</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html#content">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html#content">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html#content">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="docs/testing.html#content">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html#content">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.html#content">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html#content">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html#content">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html#content">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html#content">Platform Specific Code</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><a style="margin-left:0;" class="" href="docs/native-modules-ios.html#content">Native Modules</a></li><li><a style="margin-left:0;" class="" href="docs/native-components-ios.html#content">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="docs/linking-libraries-ios.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="docs/running-on-device-ios.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="" href="docs/embedded-app-ios.html#content">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/communication-ios.html#content">Communication between native and React Native</a></li></ul></div><div class="nav-docs-section"><h3>Guides (Android)</h3><ul><li><a style="margin-left:0;" class="" href=Line truncated
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>TouchableWithoutFeedback – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="TouchableWithoutFeedback – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.20</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="https://github.com/facebook/react-native/releases" class="">Releases</a></li><li><a href="http://reactnative.cc" class="">Newsletter</a></li><li><a href="showcase.html" class="">Showcase</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="docs/android-setup.html#content">Android Setup</a></li><li><a style="margin-left:0;" class="" href="docs/linux-windows-support.html#content">Linux and Windows Support</a></li><li><a style="margin-left:0;" class="" href="docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="docs/images.html#content">Images</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html#content">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html#content">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html#content">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="docs/testing.html#content">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html#content">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.html#content">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html#content">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html#content">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html#content">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html#content">Platform Specific Code</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><a style="margin-left:0;" class="" href="docs/native-modules-ios.html#content">Native Modules</a></li><li><a style="margin-left:0;" class="" href="docs/native-components-ios.html#content">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="docs/linking-libraries-ios.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="docs/running-on-device-ios.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="" href="docs/embedded-app-ios.html#content">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/communication-ios.html#content">Communication between native and React Native</a></li></ul></div><div class="nav-docs-section"><h3>Guides (Android)</h3><ul><li><a style="margin-left:0;" class="" href=Line truncated
|
||||
respond to press should have a visual feedback when touched. This is
|
||||
one of the primary reason a "web" app doesn't feel "native".</p><blockquote><p><strong>NOTE</strong>: TouchableWithoutFeedback supports only one child</p><p>If you wish to have several child components, wrap them in a View.</p></blockquote></div><h3><a class="anchor" name="props"></a><a class="edit-github" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableWithoutFeedback.js">Edit on GitHub</a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitycomponenttype"></a>accessibilityComponentType <span class="propType">View.AccessibilityComponentType</span> <a class="hash-link" href="#accessibilitycomponenttype">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitytraits"></a>accessibilityTraits <span class="propType">View.AccessibilityTraits, [View.AccessibilityTraits]</span> <a class="hash-link" href="#accessibilitytraits">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a>accessible <span class="propType">bool</span> <a class="hash-link" href="#accessible">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="delaylongpress"></a>delayLongPress <span class="propType">number</span> <a class="hash-link" href="#delaylongpress">#</a></h4><div><p>Delay in ms, from onPressIn, before onLongPress is called.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="delaypressin"></a>delayPressIn <span class="propType">number</span> <a class="hash-link" href="#delaypressin">#</a></h4><div><p>Delay in ms, from the start of the touch, before onPressIn is called.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="delaypressout"></a>delayPressOut <span class="propType">number</span> <a class="hash-link" href="#delaypressout">#</a></h4><div><p>Delay in ms, from the release of the touch, before onPressOut is called.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout <span class="propType">function</span> <a class="hash-link" href="#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with</p><p> <code>{nativeEvent: {layout: {x, y, width, height}}}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlongpress"></a>onLongPress <span class="propType">function</span> <a class="hash-link" href="#onlongpress">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpress"></a>onPress <span class="propType">function</span> <a class="hash-link" href="#onpress">#</a></h4><div><p>Called when the touch is released, but not if cancelled (e.g. by a scroll
|
||||
one of the primary reason a "web" app doesn't feel "native".</p><blockquote><p><strong>NOTE</strong>: TouchableWithoutFeedback supports only one child</p><p>If you wish to have several child components, wrap them in a View.</p></blockquote></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitycomponenttype"></a>accessibilityComponentType <span class="propType">View.AccessibilityComponentType</span> <a class="hash-link" href="#accessibilitycomponenttype">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitytraits"></a>accessibilityTraits <span class="propType">View.AccessibilityTraits, [View.AccessibilityTraits]</span> <a class="hash-link" href="#accessibilitytraits">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a>accessible <span class="propType">bool</span> <a class="hash-link" href="#accessible">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="delaylongpress"></a>delayLongPress <span class="propType">number</span> <a class="hash-link" href="#delaylongpress">#</a></h4><div><p>Delay in ms, from onPressIn, before onLongPress is called.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="delaypressin"></a>delayPressIn <span class="propType">number</span> <a class="hash-link" href="#delaypressin">#</a></h4><div><p>Delay in ms, from the start of the touch, before onPressIn is called.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="delaypressout"></a>delayPressOut <span class="propType">number</span> <a class="hash-link" href="#delaypressout">#</a></h4><div><p>Delay in ms, from the release of the touch, before onPressOut is called.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout <span class="propType">function</span> <a class="hash-link" href="#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with</p><p> <code>{nativeEvent: {layout: {x, y, width, height}}}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlongpress"></a>onLongPress <span class="propType">function</span> <a class="hash-link" href="#onlongpress">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpress"></a>onPress <span class="propType">function</span> <a class="hash-link" href="#onpress">#</a></h4><div><p>Called when the touch is released, but not if cancelled (e.g. by a scroll
|
||||
that steals the responder lock).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpressin"></a>onPressIn <span class="propType">function</span> <a class="hash-link" href="#onpressin">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpressout"></a>onPressOut <span class="propType">function</span> <a class="hash-link" href="#onpressout">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pressretentionoffset"></a>pressRetentionOffset <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="#pressretentionoffset">#</a></h4><div><p>When the scroll view is disabled, this defines how far your touch may
|
||||
move off of the button, before deactivating the button. Once deactivated,
|
||||
try moving it back and you'll see that the button is once again
|
||||
|
||||
Reference in new issue
Block a user