mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
22 lines
4.4 KiB
Markdown
22 lines
4.4 KiB
Markdown
---
|
|
id: version-0.21-touchablehighlight
|
|
title: touchablehighlight
|
|
original_id: touchablehighlight
|
|
---
|
|
<a id="content"></a><table width="100%"><tbody><tr><td><h1><a class="anchor" name="touchablehighlight"></a>TouchableHighlight <a class="hash-link" href="undefined#touchablehighlight">#</a></h1></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableHighlight.js">Edit on GitHub</a></td></tr></tbody></table><div><div><p>A wrapper for making views respond properly to touches.
|
|
On press down, the opacity of the wrapped view is decreased, which allows
|
|
the underlay color to show through, darkening or tinting the view. The
|
|
underlay comes from adding a view to the view hierarchy, which can sometimes
|
|
cause unwanted visual artifacts if not used correctly, for example if the
|
|
backgroundColor of the wrapped view isn't explicitly set to an opaque color.</p><p>Example:</p><div class="prism language-javascript">renderButton<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>
|
|
<TouchableHighlight onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPressButton<span class="token punctuation">}</span><span class="token operator">></span>
|
|
<Image
|
|
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span>
|
|
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'image!myButton'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<<span class="token operator">/</span>TouchableHighlight<span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><blockquote><p><strong>NOTE</strong>: TouchableHighlight 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="undefined#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="undefined#touchablewithoutfeedback">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="activeopacity"></a>activeOpacity <span class="propType">number</span> <a class="hash-link" href="undefined#activeopacity">#</a></h4><div><p>Determines what the opacity of the wrapped view should be when touch is
|
|
active.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onhideunderlay"></a>onHideUnderlay <span class="propType">function</span> <a class="hash-link" href="undefined#onhideunderlay">#</a></h4><div><p>Called immediately after the underlay is hidden</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onshowunderlay"></a>onShowUnderlay <span class="propType">function</span> <a class="hash-link" href="undefined#onshowunderlay">#</a></h4><div><p>Called immediately after the underlay is shown</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType"><a href="view.html#style">View#style</a></span> <a class="hash-link" href="undefined#style">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="underlaycolor"></a>underlayColor <span class="propType"><a href="colors.html">color</a></span> <a class="hash-link" href="undefined#underlaycolor">#</a></h4><div><p>The color of the underlay that will show through when the touch is
|
|
active.</p></div></div></div></div><div class="docs-prevnext"><a class="docs-next" href="touchablenativefeedback.html#content">Next →</a></div> |