Updated docs for next

2025-11-01 09:14:26 +00:00 · 2016-06-23 06:44:51 +00:00
parent aeb1e550b4
commit bb39ee0efe
3 changed files with 29 additions and 22 deletions
@@ -8,13 +8,13 @@ performant way. <code>Animated</code> focuses on declarative relationships betwe
 and outputs, with configurable transforms in between, and simple <code>start</code>/<code>stop</code>
 methods to control time-based animation execution.  For example, a complete
 component with a simple spring bounce on mount looks like this:</p><div class="prism language-javascript">class <span class="token class-name">Playground</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
-  <span class="token function">constructor<span class="token punctuation">(</span></span>props<span class="token punctuation">:</span> any<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token function">constructor<span class="token punctuation">(</span></span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">super<span class="token punctuation">(</span></span>props<span class="token punctuation">)</span><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>
      bounceValue<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Animated<span class="token punctuation">.</span>Value</span><span class="token punctuation">(</span><span class="token number">0</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>
-  <span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span>
+  <span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      &lt;Animated<span class="token punctuation">.</span>Image                        <span class="token comment" spellcheck="true"> // Base: Image, Text, View
 </span>        source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">&#x27;http://i.imgur.com/XMKOH81.jpg&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
@@ -159,7 +159,7 @@ what you want.</p><p>Note that in order to get this to work on <strong>Android</
  <span class="token function">componentWillMount<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token comment" spellcheck="true"> // Animate creation
 </span>    LayoutAnimation<span class="token punctuation">.</span><span class="token function">spring<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>
+  <span class="token punctuation">}</span>

  <span class="token function">_onPress<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token comment" spellcheck="true"> // Animate the update
@@ -179,7 +179,7 @@ what you want.</p><p>Note that in order to get this to work on <strong>Android</
      &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</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></div><p><a href="https://rnplay.org/apps/uaQrGQ" target="_blank">Run this example</a></p><p>This example uses a preset value, you can customize the animations as
+<span class="token punctuation">}</span></div><p><a href="https://rnplay.org/apps/uaQrGQ" target="_blank">Run this example</a></p><p>This example uses a preset value, you can customize the animations as
 you need, see <a href="https://github.com/facebook/react-native/blob/master/Libraries/LayoutAnimation/LayoutAnimation.js" target="_blank">LayoutAnimation.js</a>
 for more information.</p><h3><a class="anchor" name="requestanimationframe"></a>requestAnimationFrame <a class="hash-link" href="docs/animations.html#requestanimationframe">#</a></h3><p><code>requestAnimationFrame</code> is a polyfill from the browser that you might be
 familiar with. It accepts a function as its only argument and calls that
@@ -12,7 +12,7 @@ within your React components, which makes your code more difficult to
 reason about. Before you use it, try to solve your problem with <code>setState</code>
 and <a href="http://facebook.github.io/react/docs/advanced-performance.html#shouldcomponentupdate-in-action" target="_blank">shouldComponentUpdate</a>.</p></blockquote><h2><a class="anchor" name="setnativeprops-with-touchableopacity"></a>setNativeProps with TouchableOpacity <a class="hash-link" href="docs/direct-manipulation.html#setnativeprops-with-touchableopacity">#</a></h2><p><a href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/TouchableOpacity.js" target="_blank">TouchableOpacity</a>
 uses <code>setNativeProps</code> internally to update the opacity of its child
-component:</p><div class="prism language-javascript">setOpacityTo<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+component:</p><div class="prism language-javascript"><span class="token function">setOpacityTo<span class="token punctuation">(</span></span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
 <span class="token comment" spellcheck="true"> // Redacted: animation related code
 </span>  <span class="token keyword">this</span><span class="token punctuation">.</span>refs<span class="token punctuation">[</span>CHILD_REF<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">setNativeProps<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
    opacity<span class="token punctuation">:</span> value
@@ -25,9 +25,10 @@ any knowledge of that fact or requiring any changes to its implementation:</p><d
  &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
 &lt;<span class="token operator">/</span>TouchableOpacity<span class="token operator">&gt;</span></div><p>Let&#x27;s imagine that <code>setNativeProps</code> was not available. One way that we
 might implement it with that constraint is to store the opacity value
-in the state, then update that value whenever <code>onPress</code> is fired:</p><div class="prism language-javascript"><span class="token function">getInitialState<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token keyword">return</span> <span class="token punctuation">{</span> myButtonOpacity<span class="token punctuation">:</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 punctuation">,</span>
+in the state, then update that value whenever <code>onPress</code> is fired:</p><div class="prism language-javascript"><span class="token function">constructor<span class="token punctuation">(</span></span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token function">super<span class="token punctuation">(</span></span>props<span class="token punctuation">)</span><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> myButtonOpacity<span class="token punctuation">:</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 punctuation">}</span>

 <span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
@@ -49,25 +50,25 @@ you will notice that it is a wrapper around <code>RCTUIManager.updateView</code>
 this is the exact same function call that results from re-rendering -
 see <a href="https://github.com/facebook/react-native/blob/master/Libraries/ReactNative/ReactNativeBaseComponent.js" target="_blank">receiveComponent in
 ReactNativeBaseComponent.js</a>.</p><h2><a class="anchor" name="composite-components-and-setnativeprops"></a>Composite components and setNativeProps <a class="hash-link" href="docs/direct-manipulation.html#composite-components-and-setnativeprops">#</a></h2><p>Composite components are not backed by a native view, so you cannot call
-<code>setNativeProps</code> on them. Consider this example:</p><div class="prism language-javascript"><span class="token keyword">var</span> MyButton <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
+<code>setNativeProps</code> on them. Consider this example:</p><div class="prism language-javascript">class <span class="token class-name">MyButton</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  <span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      &lt;View<span class="token operator">&gt;</span>
        &lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>label<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
      &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</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><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>

-<span class="token keyword">var</span> App <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
+class <span class="token class-name">App</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  <span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      &lt;TouchableOpacity<span class="token operator">&gt;</span>
        &lt;MyButton label<span class="token operator">=</span><span class="token string">&quot;Press me!&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
      &lt;<span class="token operator">/</span>TouchableOpacity<span class="token operator">&gt;</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><span class="token punctuation">;</span></div><p><a href="https://rnplay.org/apps/JXkgmQ" target="_blank">Run this example</a></p><p>If you run this you will immediately see this error: <code>Touchable child
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span></div><p><a href="https://rnplay.org/apps/JXkgmQ" target="_blank">Run this example</a></p><p>If you run this you will immediately see this error: <code>Touchable child
 must either be native or forward setNativeProps to a native component</code>.
 This occurs because <code>MyButton</code> isn&#x27;t directly backed by a native view
 whose opacity should be set. You can think about it like this: if you
@@ -77,10 +78,10 @@ pass the style prop down to a child, unless you are wrapping a native
 component. Similarly, we are going to forward <code>setNativeProps</code> to a
 native-backed child component.</p><h4><a class="anchor" name="forward-setnativeprops-to-a-child"></a>Forward setNativeProps to a child <a class="hash-link" href="docs/direct-manipulation.html#forward-setnativeprops-to-a-child">#</a></h4><p>All we need to do is provide a <code>setNativeProps</code> method on our component
 that calls <code>setNativeProps</code> on the appropriate child with the given
-arguments.</p><div class="prism language-javascript"><span class="token keyword">var</span> MyButton <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
+arguments.</p><div class="prism language-javascript">class <span class="token class-name">MyButton</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  <span class="token function">setNativeProps<span class="token punctuation">(</span></span>nativeProps<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>_root<span class="token punctuation">.</span><span class="token function">setNativeProps<span class="token punctuation">(</span></span>nativeProps<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 function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
@@ -88,8 +89,8 @@ arguments.</p><div class="prism language-javascript"><span class="token keyword"
        &lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>label<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
      &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</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><span class="token punctuation">;</span></div><p><a href="https://rnplay.org/apps/YJxnEQ" target="_blank">Run this example</a></p><p>You can now use <code>MyButton</code> inside of <code>TouchableOpacity</code>! A sidenote for
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span></div><p><a href="https://rnplay.org/apps/YJxnEQ" target="_blank">Run this example</a></p><p>You can now use <code>MyButton</code> inside of <code>TouchableOpacity</code>! A sidenote for
 clarity: we used the <a href="https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute" target="_blank">ref callback</a> syntax here, rather than the traditional string-based ref.</p><p>You may have noticed that we passed all of the props down to the child
 view using <code>{...this.props}</code>. The reason for this is that
 <code>TouchableOpacity</code> is actually a composite component, and so in addition
@@ -104,10 +105,15 @@ characters when the <code>bufferDelay</code> is low and the user types very
 quickly. Some developers prefer to skip this prop entirely and instead
 use <code>setNativeProps</code> to directly manipulate the TextInput value when
 necessary. For example, the following code demonstrates clearing the
-input when you tap a button:</p><div class="prism language-javascript"><span class="token keyword">var</span> App <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
+input when you tap a button:</p><div class="prism language-javascript">class <span class="token class-name">App</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
+  <span class="token function">constructor<span class="token punctuation">(</span></span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token function">super<span class="token punctuation">(</span></span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token keyword">this</span><span class="token punctuation">.</span>clearText <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>clearText<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+  <span class="token punctuation">}</span>
+
  <span class="token function">clearText<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>_textInput<span class="token punctuation">.</span><span class="token function">setNativeProps<span class="token punctuation">(</span></span><span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">&#x27;&#x27;</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>
+  <span class="token punctuation">}</span>

  <span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
@@ -120,7 +126,7 @@ input when you tap a button:</p><div class="prism language-javascript"><span cla
      &lt;<span class="token operator">/</span>View<span class="token operator">&gt;</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><span class="token punctuation">;</span></div><p><a href="https://rnplay.org/plays/pOI9bA" target="_blank">Run this example</a></p><h2><a class="anchor" name="avoiding-conflicts-with-the-render-function"></a>Avoiding conflicts with the render function <a class="hash-link" href="docs/direct-manipulation.html#avoiding-conflicts-with-the-render-function">#</a></h2><p>If you update a property that is also managed by the render function,
+<span class="token punctuation">}</span></div><p><a href="https://rnplay.org/plays/pOI9bA" target="_blank">Run this example</a></p><h2><a class="anchor" name="avoiding-conflicts-with-the-render-function"></a>Avoiding conflicts with the render function <a class="hash-link" href="docs/direct-manipulation.html#avoiding-conflicts-with-the-render-function">#</a></h2><p>If you update a property that is also managed by the render function,
 you might end up with some unpredictable and confusing bugs because
 anytime the component re-renders and that property changes, whatever
 value was previously set from <code>setNativeProps</code> will be completely
@@ -58,7 +58,8 @@ module<span class="token punctuation">.</span>exports <span class="token operato
 <span class="token punctuation">}</span></div><p>The event name <code>topChange</code> maps to the <code>onChange</code> callback prop in JavaScript (mappings are in <code>UIManagerModuleConstants.java</code>). This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// MyCustomView.js
 </span>
 class <span class="token class-name">MyCustomView</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
-  <span class="token function">constructor<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token function">constructor<span class="token punctuation">(</span></span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+    <span class="token function">super<span class="token punctuation">(</span></span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>_onChange <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_onChange<span class="token punctuation">.</span><span class="token function">bind<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">_onChange<span class="token punctuation">(</span></span>event<span class="token punctuation">:</span> Event<span class="token punctuation">)</span> <span class="token punctuation">{</span>