mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for next
This commit is contained in:
Website Deployment Script
File diff suppressed because one or more lines are too long
+13
-1
@@ -2,12 +2,24 @@
|
||||
<feed xmlns="http://www.w3.org/2005/Atom">
|
||||
<id>https://facebook.github.io/react-native/blog/</id>
|
||||
<title>React Native Blog</title>
|
||||
<updated>2017-08-30T00:00:00Z</updated>
|
||||
<updated>2017-09-21T00:00:00Z</updated>
|
||||
<link rel="alternate" href="https://facebook.github.io/react-native/blog/"/>
|
||||
<subtitle>The best place to stay up-to-date with the latest React Native news and events.</subtitle>
|
||||
<logo>https://facebook.github.io/react-native/img/header_logo.png</logo>
|
||||
<rights>Copyright © 2017 Facebook Inc.</rights>
|
||||
<generator>Feed for Node.js</generator>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[React Native Monthly #4]]></title>
|
||||
<id>https://facebook.github.io/react-native/blog/2017/09/21/react-native-monthly-4.html</id>
|
||||
<link href="https://facebook.github.io/react-native/blog/2017/09/21/react-native-monthly-4.html">
|
||||
</link>
|
||||
<updated>2017-09-21T00:00:00Z</updated>
|
||||
<summary type="html"><![CDATA[The React Native monthly meeting continues! Here are the notes from each team:]]></summary>
|
||||
<author>
|
||||
<name>Mike Grabowski</name>
|
||||
<uri>https://github.com/grabbou</uri>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[React Native Monthly #3]]></title>
|
||||
<id>https://facebook.github.io/react-native/blog/2017/08/30/react-native-monthly-3.html</id>
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -105,12 +105,13 @@ times to loop using the key 'iterations' in the config. Will loop with
|
||||
blocking the UI thread if the child animation is set to 'useNativeDriver'.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="event"></a><span class="methodType">static </span>event<span class="methodType">(argMapping, config?)</span> <a class="hash-link" href="docs/animated.html#event">#</a></h4><div><p>Takes an array of mappings and extracts values from each arg accordingly,
|
||||
then calls <code>setValue</code> on the mapped outputs. e.g.</p><div class="prism language-javascript"> onScroll<span class="token operator">=</span><span class="token punctuation">{</span>Animated<span class="token punctuation">.</span><span class="token function">event</span><span class="token punctuation">(</span>
|
||||
<span class="token punctuation">[</span><span class="token punctuation">{</span>nativeEvent<span class="token punctuation">:</span> <span class="token punctuation">{</span>contentOffset<span class="token punctuation">:</span> <span class="token punctuation">{</span>x<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_scrollX<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>listener<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // Optional async listener
|
||||
<span class="token punctuation">{</span>listener<span class="token punctuation">:</span> <span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token comment" spellcheck="true"> // Optional async listener
|
||||
</span> <span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
<span class="token operator">...</span>
|
||||
onPanResponderMove<span class="token punctuation">:</span> Animated<span class="token punctuation">.</span><span class="token function">event</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||||
<span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // raw event arg ignored
|
||||
</span> <span class="token punctuation">{</span>dx<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_panX<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // gestureState arg
|
||||
</span><span class="token punctuation">{</span>listener<span class="token punctuation">:</span> <span class="token punctuation">(</span>event<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token comment" spellcheck="true"> // Optional async listener
|
||||
</span> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span></div><p>Config is an object that may have the following options:</p><ul><li><code>listener</code>: Optional async listener.</li><li><code>useNativeDriver</code>: Uses the native driver when true. Default false.</li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="forkevent"></a><span class="methodType">static </span>forkEvent<span class="methodType">(event, listener)</span> <a class="hash-link" href="docs/animated.html#forkevent">#</a></h4><div><p>Advanced imperative API for snooping on animated events that are passed in through props. Use
|
||||
values directly where possible.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="unforkevent"></a><span class="methodType">static </span>unforkEvent<span class="methodType">(event, listener)</span> <a class="hash-link" href="docs/animated.html#unforkevent">#</a></h4></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/animated.html#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="value"></a>Value<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/animated.html#value">#</a></h4><div><p>Standard value class for driving animations. Typically initialized with
|
||||
<code>new Animated.Value(0);</code></p><p>See also <a href="docs/animated.html#animatedvalue" target="_blank"><code>AnimatedValue</code></a>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="valuexy"></a>ValueXY<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/animated.html#valuexy">#</a></h4><div><p>2D value class for driving 2D animations, such as pan gestures.</p><p>See also <a href="docs/animated.html#animatedvaluexy" target="_blank"><code>AnimatedValueXY</code></a>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="interpolation"></a>Interpolation<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/animated.html#interpolation">#</a></h4><div><p>exported to use the Interpolation type in flow</p><p>See also <a href="docs/animated.html#animatedinterpolation" target="_blank"><code>AnimatedInterpolation</code></a>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="node"></a>Node<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/animated.html#node">#</a></h4><div><p>Exported for ease of type checking. All animated values derive from this class.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="createanimatedcomponent"></a>createAnimatedComponent<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/animated.html#createanimatedcomponent">#</a></h4><div><p>Make any React component Animatable. Used to create <code>Animated.View</code>, etc.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="attachnativeevent"></a>attachNativeEvent<span class="propType">: Identifier</span> <a class="hash-link" href="docs/animated.html#attachnativeevent">#</a></h4><div><p>Imperative API to attach an animated value to an event on a view. Prefer using
|
||||
|
||||
@@ -5,7 +5,10 @@ a minimal level of customization.</p><span><center><img src="img/buttonExample.p
|
||||
button using <a href="docs/touchableopacity.html" target="_blank">TouchableOpacity</a>
|
||||
or <a href="docs/touchablenativefeedback.html" target="_blank">TouchableNativeFeedback</a>.
|
||||
For inspiration, look at the <a href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js" target="_blank">source code for this button component</a>.
|
||||
Or, take a look at the <a href="https://js.coach/react-native?search=button" target="_blank">wide variety of button components built by the community</a>.</p><p>Example usage:</p><div class="prism language-javascript"><span class="token operator"><</span>Button
|
||||
Or, take a look at the <a href="https://js.coach/react-native?search=button" target="_blank">wide variety of button components built by the community</a>.</p><p>Example usage:</p><div class="prism language-javascript"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<span class="token operator">...</span>
|
||||
|
||||
<span class="token operator"><</span>Button
|
||||
onPress<span class="token operator">=</span><span class="token punctuation">{</span>onPressLearnMore<span class="token punctuation">}</span>
|
||||
title<span class="token operator">=</span><span class="token string">"Learn More"</span>
|
||||
color<span class="token operator">=</span><span class="token string">"#841584"</span>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -9,7 +9,9 @@
|
||||
<span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">HeadlessJsTaskConfig</span><span class="token punctuation">(</span>
|
||||
<span class="token string">"SomeTaskName"</span><span class="token punctuation">,</span>
|
||||
Arguments<span class="token punctuation">.</span><span class="token function">fromBundle<span class="token punctuation">(</span></span>extras<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token number">5000</span><span class="token punctuation">,</span><span class="token comment" spellcheck="true"> // timeout for the task
|
||||
</span> <span class="token boolean">false</span><span class="token comment" spellcheck="true"> // optional: defines whether or not the task is allowed in foreground. Default is false
|
||||
</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token keyword">return</span> null<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -13,7 +13,67 @@ If you wish to have several child components, wrap them in a View.</p><p>Example
|
||||
<span class="token operator">/</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></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/touchablehighlight.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="docs/touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="docs/touchablehighlight.html#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="docs/touchablehighlight.html#activeopacity">#</a></h4><div><p>Determines what the opacity of the wrapped view should be when touch is
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><h3><a class="anchor" name="example"></a>Example <a class="hash-link" href="docs/touchablehighlight.html#example">#</a></h3><div class="web-player"><div class="prism language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>
|
||||
AppRegistry<span class="token punctuation">,</span>
|
||||
StyleSheet<span class="token punctuation">,</span>
|
||||
TouchableHighlight<span class="token punctuation">,</span>
|
||||
Text<span class="token punctuation">,</span>
|
||||
View<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span> count<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
onPress <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
count<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>count<span class="token operator">+</span><span class="token number">1</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token function">render</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 operator"><</span>View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token operator"><</span>TouchableHighlight
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span>
|
||||
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onPress<span class="token punctuation">}</span>
|
||||
<span class="token operator">></span>
|
||||
<span class="token operator"><</span>Text<span class="token operator">></span> Touch Here <span class="token operator"><</span><span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<span class="token operator"><</span><span class="token operator">/</span>TouchableHighlight<span class="token operator">></span>
|
||||
<span class="token operator"><</span>View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>countContainer<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token operator"><</span>Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>countText<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>count <span class="token operator">!==</span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>count<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">}</span>
|
||||
<span class="token operator"><</span><span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<span class="token operator"><</span><span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<span class="token operator"><</span><span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">const</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
container<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
justifyContent<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
paddingHorizontal<span class="token punctuation">:</span> <span class="token number">10</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
button<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
alignItems<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'#DDDDDD'</span><span class="token punctuation">,</span>
|
||||
padding<span class="token punctuation">:</span> <span class="token number">10</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
countContainer<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
alignItems<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
padding<span class="token punctuation">:</span> <span class="token number">10</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
countText<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
color<span class="token punctuation">:</span> <span class="token string">'#FF00FF'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span><span class="token string">'App'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> App<span class="token punctuation">)</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.2.6/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%0Aimport%20%7B%0A%20%20AppRegistry%2C%0A%20%20StyleSheet%2C%0A%20%20TouchableHighlight%2C%0A%20%20Text%2C%0A%20%20View%2C%0A%7D%20from%20'react-native'%0A%0Aclass%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%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%3CTouchableHighlight%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%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%20%3C%2FTouchableHighlight%3E%0A%20%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%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%0AAppRegistry.registerComponent('App'%2C%20()%20%3D%3E%20App)" frameborder="0"></iframe></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/touchablehighlight.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="docs/touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="docs/touchablehighlight.html#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="docs/touchablehighlight.html#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="docs/touchablehighlight.html#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="docs/touchablehighlight.html#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">ViewPropTypes.style</span> <a class="hash-link" href="docs/touchablehighlight.html#style">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="underlaycolor"></a>underlayColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/touchablehighlight.html#underlaycolor">#</a></h4><div><p>The color of the underlay that will show through when the touch is
|
||||
active.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hastvpreferredfocus"></a><span class="platform">ios</span>hasTVPreferredFocus?: <span class="propType">bool</span> <a class="hash-link" href="docs/touchablehighlight.html#hastvpreferredfocus">#</a></h4><div><p><em>(Apple TV only)</em> TV preferred focus (see documentation for the View component).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tvparallaxproperties"></a><span class="platform">ios</span>tvParallaxProperties?: <span class="propType">object</span> <a class="hash-link" href="docs/touchablehighlight.html#tvparallaxproperties">#</a></h4><div><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.
|
||||
|
||||
@@ -19,21 +19,21 @@ added to the view hiearchy. Be aware that this can affect layout.</p><p>Example
|
||||
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span> count<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span> count<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
onPress <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
count<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>count<span class="token operator">+</span><span class="token number">1</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
onPress <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
count<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>count<span class="token operator">+</span><span class="token number">1</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token function">render</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 operator"><</span>View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token operator"><</span>TouchableOpacity
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<span class="token operator"><</span>View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token operator"><</span>TouchableOpacity
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span>
|
||||
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onPress<span class="token punctuation">}</span>
|
||||
<span class="token operator">></span>
|
||||
@@ -69,7 +69,7 @@ onPress <span class="token operator">=</span> <span class="token punctuation">(<
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span><span class="token string">'App'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> App<span class="token punctuation">)</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.2.6/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%0Aimport%20%7B%0A%20%20AppRegistry%2C%0A%20%20StyleSheet%2C%0A%20%20TouchableOpacity%2C%0A%20%20Text%2C%0A%20%20View%2C%0A%7D%20from%20'react-native'%0A%0Aclass%20App%20extends%20Component%20%7B%0Aconstructor(props)%20%7B%0A%20super(props)%0A%20this.state%20%3D%20%7B%20count%3A%200%20%7D%0A%7D%0A%0AonPress%20%3D%20()%20%3D%3E%20%7B%0A%20%20this.setState(%7B%0A%20%20%20%20count%3A%20this.state.count%2B1%0A%20%20%7D)%0A%7D%0A%0A%20render()%20%7B%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%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%0AAppRegistry.registerComponent('App'%2C%20()%20%3D%3E%20App)" frameborder="0"></iframe></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/touchableopacity.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="docs/touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="docs/touchableopacity.html#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="docs/touchableopacity.html#activeopacity">#</a></h4><div><p>Determines what the opacity of the wrapped view should be when touch is
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span><span class="token string">'App'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> App<span class="token punctuation">)</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.2.6/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%0Aimport%20%7B%0A%20%20AppRegistry%2C%0A%20%20StyleSheet%2C%0A%20%20TouchableOpacity%2C%0A%20%20Text%2C%0A%20%20View%2C%0A%7D%20from%20'react-native'%0A%0Aclass%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%0AAppRegistry.registerComponent('App'%2C%20()%20%3D%3E%20App)" frameborder="0"></iframe></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/touchableopacity.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="docs/touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="docs/touchableopacity.html#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="docs/touchableopacity.html#activeopacity">#</a></h4><div><p>Determines what the opacity of the wrapped view should be when touch is
|
||||
active. Defaults to 0.2.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tvparallaxproperties"></a>tvParallaxProperties?: <span class="propType">object</span> <a class="hash-link" href="docs/touchableopacity.html#tvparallaxproperties">#</a></h4><div><p>Apple TV parallax effects</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/touchableopacity.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setopacityto"></a>setOpacityTo<span class="methodType">(value: number, duration: number)</span> <a class="hash-link" href="docs/touchableopacity.html#setopacityto">#</a></h4><div><p>Animate the touchable to a new opacity.</p></div></div></div></span></div><p class="edit-page-block"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableOpacity.js">Improve this page</a> by sending a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/touchablenativefeedback.html#content">← Prev</a><a class="docs-next" href="docs/touchablewithoutfeedback.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Learn the Basics</a><a href="docs/components-and-apis.html">Components and APIs</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://facebook.github.io/react/" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></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 © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
|
||||
Reference in New Issue
Block a user