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 a8f391f53eec0dac151c56a31fedeb3a5d25e834
This commit is contained in:
Website Deployment Script
@@ -136,7 +136,7 @@
|
||||
<li><p>Adding a <code>transform</code> style to the image component:</p>
|
||||
<pre><code class="hljs css language-jsx"><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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</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><span class="token punctuation">{</span>transform<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>scaleX<span class="token operator">:</span> I18nManager<span class="token punctuation">.</span>isRTL <span class="token operator">?</span> <span class="token operator">-</span><span class="token number">1</span> <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 punctuation">}</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><span class="token punctuation">{</span>transform<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>scaleX<span class="token punctuation">:</span> I18nManager<span class="token punctuation">.</span>isRTL <span class="token operator">?</span> <span class="token operator">-</span><span class="token number">1</span> <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>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre></li>
|
||||
<li><p>Or, changing the image source according to the direction:</p>
|
||||
@@ -156,9 +156,9 @@
|
||||
</p>
|
||||
<h5><a class="anchor" aria-hidden="true" id="gestures-example"></a><a href="#gestures-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>Gestures Example</h5>
|
||||
<pre><code class="hljs css language-js"><span class="token comment">// SwipeableRow.js</span>
|
||||
<span class="token function">_isSwipingExcessivelyRightFromClosedPosition</span><span class="token punctuation">(</span>gestureState<span class="token operator">:</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> boolean <span class="token punctuation">{</span>
|
||||
<span class="token function">_isSwipingExcessivelyRightFromClosedPosition</span><span class="token punctuation">(</span>gestureState<span class="token punctuation">:</span> Object<span class="token punctuation">)</span><span class="token punctuation">:</span> boolean <span class="token punctuation">{</span>
|
||||
<span class="token comment">// ...</span>
|
||||
<span class="token keyword">const</span> gestureStateDx <span class="token operator">=</span> <span class="token constant">IS_RTL</span> <span class="token operator">?</span> <span class="token operator">-</span>gestureState<span class="token punctuation">.</span>dx <span class="token operator">:</span> gestureState<span class="token punctuation">.</span>dx<span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> gestureStateDx <span class="token operator">=</span> <span class="token constant">IS_RTL</span> <span class="token operator">?</span> <span class="token operator">-</span>gestureState<span class="token punctuation">.</span>dx <span class="token punctuation">:</span> gestureState<span class="token punctuation">.</span>dx<span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_isSwipingRightFromClosed</span><span class="token punctuation">(</span>gestureState<span class="token punctuation">)</span> <span class="token operator">&&</span>
|
||||
gestureStateDx <span class="token operator">></span> <span class="token constant">RIGHT_SWIPE_THRESHOLD</span>
|
||||
@@ -167,10 +167,10 @@
|
||||
</code></pre>
|
||||
<h5><a class="anchor" aria-hidden="true" id="animation-example"></a><a href="#animation-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>Animation Example</h5>
|
||||
<pre><code class="hljs css language-js"><span class="token comment">// SwipeableRow.js</span>
|
||||
<span class="token function">_animateBounceBack</span><span class="token punctuation">(</span>duration<span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">_animateBounceBack</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 keyword">void</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// ...</span>
|
||||
<span class="token keyword">const</span> swipeBounceBackDistance <span class="token operator">=</span> <span class="token constant">IS_RTL</span> <span class="token operator">?</span>
|
||||
<span class="token operator">-</span><span class="token constant">RIGHT_SWIPE_BOUNCE_BACK_DISTANCE</span> <span class="token operator">:</span>
|
||||
<span class="token operator">-</span><span class="token constant">RIGHT_SWIPE_BOUNCE_BACK_DISTANCE</span> <span class="token punctuation">:</span>
|
||||
<span class="token constant">RIGHT_SWIPE_BOUNCE_BACK_DISTANCE</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_animateTo</span><span class="token punctuation">(</span>
|
||||
<span class="token operator">-</span>swipeBounceBackDistance<span class="token punctuation">,</span>
|
||||
@@ -199,7 +199,7 @@
|
||||
|
||||
<span class="token function-variable function">_onDirectionChange</span> <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>
|
||||
I18nManager<span class="token punctuation">.</span><span class="token function">forceRTL</span><span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isRTL<span class="token punctuation">)</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> isRTL<span class="token operator">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isRTL <span class="token punctuation">}</span><span class="token punctuation">)</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> isRTL<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isRTL <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
Alert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Reload this page'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'Please reload this page to change the UI direction! '</span> <span class="token operator">+</span>
|
||||
|
||||
@@ -136,7 +136,7 @@
|
||||
<li><p>Adding a <code>transform</code> style to the image component:</p>
|
||||
<pre><code class="hljs css language-jsx"><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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</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><span class="token punctuation">{</span>transform<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>scaleX<span class="token operator">:</span> I18nManager<span class="token punctuation">.</span>isRTL <span class="token operator">?</span> <span class="token operator">-</span><span class="token number">1</span> <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 punctuation">}</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><span class="token punctuation">{</span>transform<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>scaleX<span class="token punctuation">:</span> I18nManager<span class="token punctuation">.</span>isRTL <span class="token operator">?</span> <span class="token operator">-</span><span class="token number">1</span> <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>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre></li>
|
||||
<li><p>Or, changing the image source according to the direction:</p>
|
||||
@@ -156,9 +156,9 @@
|
||||
</p>
|
||||
<h5><a class="anchor" aria-hidden="true" id="gestures-example"></a><a href="#gestures-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>Gestures Example</h5>
|
||||
<pre><code class="hljs css language-js"><span class="token comment">// SwipeableRow.js</span>
|
||||
<span class="token function">_isSwipingExcessivelyRightFromClosedPosition</span><span class="token punctuation">(</span>gestureState<span class="token operator">:</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> boolean <span class="token punctuation">{</span>
|
||||
<span class="token function">_isSwipingExcessivelyRightFromClosedPosition</span><span class="token punctuation">(</span>gestureState<span class="token punctuation">:</span> Object<span class="token punctuation">)</span><span class="token punctuation">:</span> boolean <span class="token punctuation">{</span>
|
||||
<span class="token comment">// ...</span>
|
||||
<span class="token keyword">const</span> gestureStateDx <span class="token operator">=</span> <span class="token constant">IS_RTL</span> <span class="token operator">?</span> <span class="token operator">-</span>gestureState<span class="token punctuation">.</span>dx <span class="token operator">:</span> gestureState<span class="token punctuation">.</span>dx<span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> gestureStateDx <span class="token operator">=</span> <span class="token constant">IS_RTL</span> <span class="token operator">?</span> <span class="token operator">-</span>gestureState<span class="token punctuation">.</span>dx <span class="token punctuation">:</span> gestureState<span class="token punctuation">.</span>dx<span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_isSwipingRightFromClosed</span><span class="token punctuation">(</span>gestureState<span class="token punctuation">)</span> <span class="token operator">&&</span>
|
||||
gestureStateDx <span class="token operator">></span> <span class="token constant">RIGHT_SWIPE_THRESHOLD</span>
|
||||
@@ -167,10 +167,10 @@
|
||||
</code></pre>
|
||||
<h5><a class="anchor" aria-hidden="true" id="animation-example"></a><a href="#animation-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>Animation Example</h5>
|
||||
<pre><code class="hljs css language-js"><span class="token comment">// SwipeableRow.js</span>
|
||||
<span class="token function">_animateBounceBack</span><span class="token punctuation">(</span>duration<span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">_animateBounceBack</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 keyword">void</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// ...</span>
|
||||
<span class="token keyword">const</span> swipeBounceBackDistance <span class="token operator">=</span> <span class="token constant">IS_RTL</span> <span class="token operator">?</span>
|
||||
<span class="token operator">-</span><span class="token constant">RIGHT_SWIPE_BOUNCE_BACK_DISTANCE</span> <span class="token operator">:</span>
|
||||
<span class="token operator">-</span><span class="token constant">RIGHT_SWIPE_BOUNCE_BACK_DISTANCE</span> <span class="token punctuation">:</span>
|
||||
<span class="token constant">RIGHT_SWIPE_BOUNCE_BACK_DISTANCE</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_animateTo</span><span class="token punctuation">(</span>
|
||||
<span class="token operator">-</span>swipeBounceBackDistance<span class="token punctuation">,</span>
|
||||
@@ -199,7 +199,7 @@
|
||||
|
||||
<span class="token function-variable function">_onDirectionChange</span> <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>
|
||||
I18nManager<span class="token punctuation">.</span><span class="token function">forceRTL</span><span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isRTL<span class="token punctuation">)</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> isRTL<span class="token operator">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isRTL <span class="token punctuation">}</span><span class="token punctuation">)</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> isRTL<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isRTL <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
Alert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Reload this page'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'Please reload this page to change the UI direction! '</span> <span class="token operator">+</span>
|
||||
|
||||
@@ -114,17 +114,17 @@
|
||||
<ul>
|
||||
<li><p>The internal state of item subtrees is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.</p></li>
|
||||
<li><p>These components are based on <code>PureComponent</code> which means that they will not re-render if <code>props</code> remains shallow-equal. Make sure that everything your <code>renderItem</code> function depends on directly is passed as a prop that is not <code>===</code> after updates, otherwise your UI may not update on changes. This includes the <code>data</code> prop and parent component state. For example:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token operator"><</span>FlatList
|
||||
data<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>data<span class="token punctuation">}</span>
|
||||
renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> item <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyItem</span></span>
|
||||
<span class="token attr-name">item</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">}</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 punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">FlatList</span></span>
|
||||
<span class="token attr-name">data</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>state<span class="token punctuation">.</span>data<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> item <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token operator"><</span>MyItem
|
||||
item<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span>
|
||||
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></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><span class="token parameter">oldState</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
selected<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
selected<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// New instance breaks `===`</span>
|
||||
<span class="token operator">...</span>oldState<span class="token punctuation">.</span>selected<span class="token punctuation">,</span> <span class="token comment">// copy old data</span>
|
||||
<span class="token punctuation">[</span>item<span class="token punctuation">.</span>key<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token operator">!</span>oldState<span class="token punctuation">.</span>selected<span class="token punctuation">[</span>item<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token comment">// toggle</span>
|
||||
<span class="token punctuation">[</span>item<span class="token punctuation">.</span>key<span class="token punctuation">]</span><span class="token punctuation">:</span> <span class="token operator">!</span>oldState<span class="token punctuation">.</span>selected<span class="token punctuation">[</span>item<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token comment">// toggle</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>
|
||||
|
||||
@@ -114,17 +114,17 @@
|
||||
<ul>
|
||||
<li><p>The internal state of item subtrees is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.</p></li>
|
||||
<li><p>These components are based on <code>PureComponent</code> which means that they will not re-render if <code>props</code> remains shallow-equal. Make sure that everything your <code>renderItem</code> function depends on directly is passed as a prop that is not <code>===</code> after updates, otherwise your UI may not update on changes. This includes the <code>data</code> prop and parent component state. For example:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token operator"><</span>FlatList
|
||||
data<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>data<span class="token punctuation">}</span>
|
||||
renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> item <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyItem</span></span>
|
||||
<span class="token attr-name">item</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">}</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 punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">FlatList</span></span>
|
||||
<span class="token attr-name">data</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>state<span class="token punctuation">.</span>data<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> item <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token operator"><</span>MyItem
|
||||
item<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span>
|
||||
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></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><span class="token parameter">oldState</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
selected<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
selected<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// New instance breaks `===`</span>
|
||||
<span class="token operator">...</span>oldState<span class="token punctuation">.</span>selected<span class="token punctuation">,</span> <span class="token comment">// copy old data</span>
|
||||
<span class="token punctuation">[</span>item<span class="token punctuation">.</span>key<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token operator">!</span>oldState<span class="token punctuation">.</span>selected<span class="token punctuation">[</span>item<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token comment">// toggle</span>
|
||||
<span class="token punctuation">[</span>item<span class="token punctuation">.</span>key<span class="token punctuation">]</span><span class="token punctuation">:</span> <span class="token operator">!</span>oldState<span class="token punctuation">.</span>selected<span class="token punctuation">[</span>item<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token comment">// toggle</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>
|
||||
|
||||
@@ -88,11 +88,11 @@
|
||||
<p>In practice, try-catching every nested property access is slow, and differentiating between specific kinds of TypeErrors is fragile. To deal with these shortcomings, we created a Babel plugin that transforms the above <code>idx</code> invocation into the following expression:</p>
|
||||
<pre><code class="hljs css language-jsx">props<span class="token punctuation">.</span>user <span class="token operator">==</span> <span class="token keyword">null</span>
|
||||
<span class="token operator">?</span> props<span class="token punctuation">.</span>user
|
||||
<span class="token operator">:</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends <span class="token operator">==</span> <span class="token keyword">null</span>
|
||||
<span class="token punctuation">:</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends <span class="token operator">==</span> <span class="token keyword">null</span>
|
||||
<span class="token operator">?</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends
|
||||
<span class="token operator">:</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token keyword">null</span>
|
||||
<span class="token punctuation">:</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token keyword">null</span>
|
||||
<span class="token operator">?</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
|
||||
<span class="token operator">:</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>friends<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">:</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>friends<span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Finally, we added a custom Flow type declaration for <code>idx</code> that allows the traversal in the second argument to be properly type-checked while permitting nested access on nullable properties.</p>
|
||||
<p>The function, Babel plugin, and Flow declaration are now <a href="https://github.com/facebookincubator/idx">available on GitHub</a>. They are used by installing the <strong>idx</strong> and <strong>babel-plugin-idx</strong> npm packages, and adding “idx” to the list of plugins in your <code>.babelrc</code> file.</p>
|
||||
|
||||
@@ -88,11 +88,11 @@
|
||||
<p>In practice, try-catching every nested property access is slow, and differentiating between specific kinds of TypeErrors is fragile. To deal with these shortcomings, we created a Babel plugin that transforms the above <code>idx</code> invocation into the following expression:</p>
|
||||
<pre><code class="hljs css language-jsx">props<span class="token punctuation">.</span>user <span class="token operator">==</span> <span class="token keyword">null</span>
|
||||
<span class="token operator">?</span> props<span class="token punctuation">.</span>user
|
||||
<span class="token operator">:</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends <span class="token operator">==</span> <span class="token keyword">null</span>
|
||||
<span class="token punctuation">:</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends <span class="token operator">==</span> <span class="token keyword">null</span>
|
||||
<span class="token operator">?</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends
|
||||
<span class="token operator">:</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token keyword">null</span>
|
||||
<span class="token punctuation">:</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token keyword">null</span>
|
||||
<span class="token operator">?</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
|
||||
<span class="token operator">:</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>friends<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">:</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>friends<span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Finally, we added a custom Flow type declaration for <code>idx</code> that allows the traversal in the second argument to be properly type-checked while permitting nested access on nullable properties.</p>
|
||||
<p>The function, Babel plugin, and Flow declaration are now <a href="https://github.com/facebookincubator/idx">available on GitHub</a>. They are used by installing the <strong>idx</strong> and <strong>babel-plugin-idx</strong> npm packages, and adding “idx” to the list of plugins in your <code>.babelrc</code> file.</p>
|
||||
|
||||
@@ -106,7 +106,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> MaskedViewIOS <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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MaskedViewIOS</span></span> <span class="token attr-name">maskElement</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Basic Mask</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></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">View</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><span class="token punctuation">{</span> backgroundColor<span class="token operator">:</span> <span class="token string">'blue'</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">View</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><span class="token punctuation">{</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'blue'</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">MaskedViewIOS</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p><code>MaskedViewIOS</code> takes props <code>maskElement</code> and <code>children</code>. The children are masked by the <code>maskElement</code>. Note that the mask doesn’t need to be an image, it can be any arbitrary view. The behavior of the above example would be to render the blue view, but for it to be visible only where the words “Basic Mask” are from the <code>maskElement</code>. We just made complicated blue text.</p>
|
||||
@@ -115,14 +115,14 @@
|
||||
fullScreenBlueLayer<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MaskedViewIOS</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><span class="token punctuation">{</span> flex<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">maskElement</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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>centeredFullScreen<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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>twitterLogo<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">View</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token punctuation">{</span>fullScreenWhiteLayer<span class="token punctuation">}</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">View</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><span class="token punctuation">{</span> flex<span class="token operator">:</span> <span class="token number">1</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">View</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><span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</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">MyApp</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">View</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">MaskedViewIOS</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
@@ -148,14 +148,14 @@
|
||||
<p>Since I’m thinking about this animation as steps occurring at different points in time along the complete animation, we will start our <code>Animated.Value</code> at 0, representing 0% complete, and end our value at 100, representing 100% complete.</p>
|
||||
<p>Our initial component state will be the following.</p>
|
||||
<pre><code class="hljs css language-jsx">state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
loadingProgress<span class="token operator">:</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>
|
||||
loadingProgress<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>
|
||||
</code></pre>
|
||||
<p>When we are ready to begin the animation, we tell Animated to animate this value to 100.</p>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>loadingProgress<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
toValue<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
duration<span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
|
||||
useNativeDriver<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// This is important!</span>
|
||||
toValue<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
duration<span class="token punctuation">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
|
||||
useNativeDriver<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token comment">// This is important!</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>I then try to figure out a rough estimate of the different pieces of the animations and the values I want them to have at different stages of the overall animation. Below is a table of the different pieces of the animation, and what I think their values should be at different points as we progress through time.</p>
|
||||
@@ -168,31 +168,31 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> loadingProgress <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>loadingProgress<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> opacityClearToVisible <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
opacity<span class="token operator">:</span> loadingProgress<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
extrapolate<span class="token operator">:</span> <span class="token string">'clamp'</span>
|
||||
opacity<span class="token punctuation">:</span> loadingProgress<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
extrapolate<span class="token punctuation">:</span> <span class="token string">'clamp'</span>
|
||||
<span class="token comment">// clamp means when the input is 30-100, output should stay at 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 keyword">const</span> imageScale <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
transform<span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
transform<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
scale<span class="token operator">:</span> loadingProgress<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0.8</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">]</span>
|
||||
scale<span class="token punctuation">:</span> loadingProgress<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0.8</span><span class="token punctuation">,</span> <span class="token number">70</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">const</span> appScale <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
transform<span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
transform<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
scale<span class="token operator">:</span> loadingProgress<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1.1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span>
|
||||
scale<span class="token punctuation">:</span> loadingProgress<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">1.1</span><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 punctuation">]</span>
|
||||
@@ -210,7 +210,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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>fullScreen<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token punctuation">{</span>fullScreenBlueLayer<span class="token punctuation">}</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">MaskedViewIOS</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><span class="token punctuation">{</span> flex<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">maskElement</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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>centeredFullScreen<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">Animated.Image</span></span>
|
||||
@@ -221,7 +221,7 @@
|
||||
<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token punctuation">{</span>fullScreenWhiteLayer<span class="token punctuation">}</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">Animated.View</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><span class="token punctuation">[</span>opacityClearToVisible<span class="token punctuation">,</span> appScale<span class="token punctuation">,</span> <span class="token punctuation">{</span> flex<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><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
<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><span class="token punctuation">[</span>opacityClearToVisible<span class="token punctuation">,</span> appScale<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><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 punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</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">Animated.View</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">MaskedViewIOS</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@@ -232,20 +232,20 @@
|
||||
<p>Yay! We now have the animation pieces looking like we want. Now we just have to clean up our blue and white layers which will never be seen again.</p>
|
||||
<p>To know when we can clean them up, we need to know when the animation is complete. Luckily where we call, <code>Animated.timing</code> ,<code>.start</code> takes an optional callback that runs when the animation is complete.</p>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>loadingProgress<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
toValue<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
duration<span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
|
||||
useNativeDriver<span class="token operator">:</span> <span class="token boolean">true</span>
|
||||
toValue<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
duration<span class="token punctuation">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
|
||||
useNativeDriver<span class="token punctuation">:</span> <span class="token boolean">true</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</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>
|
||||
animationDone<span class="token operator">:</span> <span class="token boolean">true</span>
|
||||
animationDone<span class="token punctuation">:</span> <span class="token boolean">true</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>
|
||||
</code></pre>
|
||||
<p>Now that we have a value in <code>state</code> to know whether we are done with the animation, we can modify our blue and white layers to use that.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> fullScreenBlueLayer <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animationDone <span class="token operator">?</span> <span class="token keyword">null</span> <span class="token operator">:</span> <span class="token punctuation">(</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> fullScreenBlueLayer <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animationDone <span class="token operator">?</span> <span class="token keyword">null</span> <span class="token punctuation">:</span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>fullScreenBlueLayer<span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> fullScreenWhiteLayer <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animationDone <span class="token operator">?</span> <span class="token keyword">null</span> <span class="token operator">:</span> <span class="token punctuation">(</span>
|
||||
<span class="token keyword">const</span> fullScreenWhiteLayer <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animationDone <span class="token operator">?</span> <span class="token keyword">null</span> <span class="token punctuation">:</span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>fullScreenWhiteLayer<span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
|
||||
+27
-27
@@ -106,7 +106,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> MaskedViewIOS <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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MaskedViewIOS</span></span> <span class="token attr-name">maskElement</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Basic Mask</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></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">View</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><span class="token punctuation">{</span> backgroundColor<span class="token operator">:</span> <span class="token string">'blue'</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">View</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><span class="token punctuation">{</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'blue'</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">MaskedViewIOS</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p><code>MaskedViewIOS</code> takes props <code>maskElement</code> and <code>children</code>. The children are masked by the <code>maskElement</code>. Note that the mask doesn’t need to be an image, it can be any arbitrary view. The behavior of the above example would be to render the blue view, but for it to be visible only where the words “Basic Mask” are from the <code>maskElement</code>. We just made complicated blue text.</p>
|
||||
@@ -115,14 +115,14 @@
|
||||
fullScreenBlueLayer<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MaskedViewIOS</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><span class="token punctuation">{</span> flex<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">maskElement</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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>centeredFullScreen<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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>twitterLogo<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">View</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token punctuation">{</span>fullScreenWhiteLayer<span class="token punctuation">}</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">View</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><span class="token punctuation">{</span> flex<span class="token operator">:</span> <span class="token number">1</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">View</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><span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</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">MyApp</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">View</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">MaskedViewIOS</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
@@ -148,14 +148,14 @@
|
||||
<p>Since I’m thinking about this animation as steps occurring at different points in time along the complete animation, we will start our <code>Animated.Value</code> at 0, representing 0% complete, and end our value at 100, representing 100% complete.</p>
|
||||
<p>Our initial component state will be the following.</p>
|
||||
<pre><code class="hljs css language-jsx">state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
loadingProgress<span class="token operator">:</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>
|
||||
loadingProgress<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>
|
||||
</code></pre>
|
||||
<p>When we are ready to begin the animation, we tell Animated to animate this value to 100.</p>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>loadingProgress<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
toValue<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
duration<span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
|
||||
useNativeDriver<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// This is important!</span>
|
||||
toValue<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
duration<span class="token punctuation">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
|
||||
useNativeDriver<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token comment">// This is important!</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>I then try to figure out a rough estimate of the different pieces of the animations and the values I want them to have at different stages of the overall animation. Below is a table of the different pieces of the animation, and what I think their values should be at different points as we progress through time.</p>
|
||||
@@ -168,31 +168,31 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> loadingProgress <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>loadingProgress<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> opacityClearToVisible <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
opacity<span class="token operator">:</span> loadingProgress<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
extrapolate<span class="token operator">:</span> <span class="token string">'clamp'</span>
|
||||
opacity<span class="token punctuation">:</span> loadingProgress<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
extrapolate<span class="token punctuation">:</span> <span class="token string">'clamp'</span>
|
||||
<span class="token comment">// clamp means when the input is 30-100, output should stay at 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 keyword">const</span> imageScale <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
transform<span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
transform<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
scale<span class="token operator">:</span> loadingProgress<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0.8</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">]</span>
|
||||
scale<span class="token punctuation">:</span> loadingProgress<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0.8</span><span class="token punctuation">,</span> <span class="token number">70</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">const</span> appScale <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
transform<span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
transform<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
scale<span class="token operator">:</span> loadingProgress<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1.1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span>
|
||||
scale<span class="token punctuation">:</span> loadingProgress<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">1.1</span><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 punctuation">]</span>
|
||||
@@ -210,7 +210,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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>fullScreen<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token punctuation">{</span>fullScreenBlueLayer<span class="token punctuation">}</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">MaskedViewIOS</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><span class="token punctuation">{</span> flex<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">maskElement</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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>centeredFullScreen<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">Animated.Image</span></span>
|
||||
@@ -221,7 +221,7 @@
|
||||
<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token punctuation">{</span>fullScreenWhiteLayer<span class="token punctuation">}</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">Animated.View</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><span class="token punctuation">[</span>opacityClearToVisible<span class="token punctuation">,</span> appScale<span class="token punctuation">,</span> <span class="token punctuation">{</span> flex<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><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
<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><span class="token punctuation">[</span>opacityClearToVisible<span class="token punctuation">,</span> appScale<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><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 punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</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">Animated.View</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">MaskedViewIOS</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@@ -232,20 +232,20 @@
|
||||
<p>Yay! We now have the animation pieces looking like we want. Now we just have to clean up our blue and white layers which will never be seen again.</p>
|
||||
<p>To know when we can clean them up, we need to know when the animation is complete. Luckily where we call, <code>Animated.timing</code> ,<code>.start</code> takes an optional callback that runs when the animation is complete.</p>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>loadingProgress<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
toValue<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
duration<span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
|
||||
useNativeDriver<span class="token operator">:</span> <span class="token boolean">true</span>
|
||||
toValue<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
duration<span class="token punctuation">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
|
||||
useNativeDriver<span class="token punctuation">:</span> <span class="token boolean">true</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</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>
|
||||
animationDone<span class="token operator">:</span> <span class="token boolean">true</span>
|
||||
animationDone<span class="token punctuation">:</span> <span class="token boolean">true</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>
|
||||
</code></pre>
|
||||
<p>Now that we have a value in <code>state</code> to know whether we are done with the animation, we can modify our blue and white layers to use that.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> fullScreenBlueLayer <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animationDone <span class="token operator">?</span> <span class="token keyword">null</span> <span class="token operator">:</span> <span class="token punctuation">(</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> fullScreenBlueLayer <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animationDone <span class="token operator">?</span> <span class="token keyword">null</span> <span class="token punctuation">:</span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>fullScreenBlueLayer<span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> fullScreenWhiteLayer <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animationDone <span class="token operator">?</span> <span class="token keyword">null</span> <span class="token operator">:</span> <span class="token punctuation">(</span>
|
||||
<span class="token keyword">const</span> fullScreenWhiteLayer <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animationDone <span class="token operator">?</span> <span class="token keyword">null</span> <span class="token punctuation">:</span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>fullScreenWhiteLayer<span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
<span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><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 punctuation">;</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Placeholder Text'</span> <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> text<span class="token punctuation">:</span> <span class="token string">'Placeholder Text'</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>
|
||||
@@ -129,12 +129,12 @@
|
||||
<span class="token attr-name">value</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>state<span class="token punctuation">.</span>text<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">InputAccessoryView</span></span> <span class="token attr-name">nativeID</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>inputAccessoryViewID<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">View</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><span class="token punctuation">{</span> backgroundColor<span class="token operator">:</span> <span class="token string">'white'</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">View</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><span class="token punctuation">{</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'white'</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">Button</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 punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></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> text<span class="token operator">:</span> <span class="token string">'Placeholder Text'</span> <span class="token punctuation">}</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> text<span class="token punctuation">:</span> <span class="token string">'Placeholder Text'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Reset Text<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Reset Text<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">View</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">InputAccessoryView</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
<span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><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 punctuation">;</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Placeholder Text'</span> <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> text<span class="token punctuation">:</span> <span class="token string">'Placeholder Text'</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>
|
||||
@@ -129,12 +129,12 @@
|
||||
<span class="token attr-name">value</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>state<span class="token punctuation">.</span>text<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">InputAccessoryView</span></span> <span class="token attr-name">nativeID</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>inputAccessoryViewID<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">View</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><span class="token punctuation">{</span> backgroundColor<span class="token operator">:</span> <span class="token string">'white'</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">View</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><span class="token punctuation">{</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'white'</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">Button</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 punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></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> text<span class="token operator">:</span> <span class="token string">'Placeholder Text'</span> <span class="token punctuation">}</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> text<span class="token punctuation">:</span> <span class="token string">'Placeholder Text'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Reset Text<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Reset Text<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">View</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">InputAccessoryView</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
|
||||
@@ -130,23 +130,23 @@
|
||||
</code></pre>
|
||||
<p>Then, we'll open up our <code>package.json</code> and replace the <code>jest</code> field with the following:</p>
|
||||
<pre><code class="hljs css language-js"><span class="token punctuation">{</span>
|
||||
<span class="token string">"jest"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token string">"preset"</span><span class="token operator">:</span> <span class="token string">"react-native"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"moduleFileExtensions"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token string">"jest"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token string">"preset"</span><span class="token punctuation">:</span> <span class="token string">"react-native"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"moduleFileExtensions"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token string">"ts"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"tsx"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"js"</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"transform"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token string">"^.+\\.(js)$"</span><span class="token operator">:</span> <span class="token string">"<rootDir>/node_modules/babel-jest"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"\\.(ts|tsx)$"</span><span class="token operator">:</span> <span class="token string">"<rootDir>/node_modules/ts-jest/preprocessor.js"</span>
|
||||
<span class="token string">"transform"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token string">"^.+\\.(js)$"</span><span class="token punctuation">:</span> <span class="token string">"<rootDir>/node_modules/babel-jest"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"\\.(ts|tsx)$"</span><span class="token punctuation">:</span> <span class="token string">"<rootDir>/node_modules/ts-jest/preprocessor.js"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"testRegex"</span><span class="token operator">:</span> <span class="token string">"(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"testPathIgnorePatterns"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token string">"testRegex"</span><span class="token punctuation">:</span> <span class="token string">"(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"testPathIgnorePatterns"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token string">"\\.snap$"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"<rootDir>/node_modules/"</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"cacheDirectory"</span><span class="token operator">:</span> <span class="token string">".jest/cache"</span>
|
||||
<span class="token string">"cacheDirectory"</span><span class="token punctuation">:</span> <span class="token string">".jest/cache"</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
|
||||
@@ -130,23 +130,23 @@
|
||||
</code></pre>
|
||||
<p>Then, we'll open up our <code>package.json</code> and replace the <code>jest</code> field with the following:</p>
|
||||
<pre><code class="hljs css language-js"><span class="token punctuation">{</span>
|
||||
<span class="token string">"jest"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token string">"preset"</span><span class="token operator">:</span> <span class="token string">"react-native"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"moduleFileExtensions"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token string">"jest"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token string">"preset"</span><span class="token punctuation">:</span> <span class="token string">"react-native"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"moduleFileExtensions"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token string">"ts"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"tsx"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"js"</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"transform"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token string">"^.+\\.(js)$"</span><span class="token operator">:</span> <span class="token string">"<rootDir>/node_modules/babel-jest"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"\\.(ts|tsx)$"</span><span class="token operator">:</span> <span class="token string">"<rootDir>/node_modules/ts-jest/preprocessor.js"</span>
|
||||
<span class="token string">"transform"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token string">"^.+\\.(js)$"</span><span class="token punctuation">:</span> <span class="token string">"<rootDir>/node_modules/babel-jest"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"\\.(ts|tsx)$"</span><span class="token punctuation">:</span> <span class="token string">"<rootDir>/node_modules/ts-jest/preprocessor.js"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"testRegex"</span><span class="token operator">:</span> <span class="token string">"(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"testPathIgnorePatterns"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token string">"testRegex"</span><span class="token punctuation">:</span> <span class="token string">"(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"testPathIgnorePatterns"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token string">"\\.snap$"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"<rootDir>/node_modules/"</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"cacheDirectory"</span><span class="token operator">:</span> <span class="token string">".jest/cache"</span>
|
||||
<span class="token string">"cacheDirectory"</span><span class="token punctuation">:</span> <span class="token string">".jest/cache"</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
<p>To opt into this new implementation, please use the <a href="/docs/next/webview#usewebkit"><code>useWebKit</code></a> prop:</p>
|
||||
<pre><code class="hljs css language-js"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">WebView</span></span>
|
||||
<span class="token attr-name">useWebKit</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><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 punctuation">{</span> url<span class="token operator">:</span> <span class="token string">'https://www.google.com'</span> <span class="token punctuation">}</span><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 punctuation">{</span> url<span class="token punctuation">:</span> <span class="token string">'https://www.google.com'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="improvements"></a><a href="#improvements" 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>Improvements</h2>
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
<p>To opt into this new implementation, please use the <a href="/docs/next/webview#usewebkit"><code>useWebKit</code></a> prop:</p>
|
||||
<pre><code class="hljs css language-js"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">WebView</span></span>
|
||||
<span class="token attr-name">useWebKit</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><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 punctuation">{</span> url<span class="token operator">:</span> <span class="token string">'https://www.google.com'</span> <span class="token punctuation">}</span><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 punctuation">{</span> url<span class="token punctuation">:</span> <span class="token string">'https://www.google.com'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="improvements"></a><a href="#improvements" 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>Improvements</h2>
|
||||
|
||||
@@ -106,7 +106,7 @@
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'pressed'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> pressed <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
backgroundColor<span class="token operator">:</span> pressed <span class="token operator">?</span> <span class="token string">'lightskyblue'</span> <span class="token operator">:</span> <span class="token string">'white'</span>
|
||||
backgroundColor<span class="token punctuation">:</span> pressed <span class="token operator">?</span> <span class="token string">'lightskyblue'</span> <span class="token punctuation">:</span> <span class="token string">'white'</span>
|
||||
<span class="token punctuation">}</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">Text</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>text<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Press Me!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</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">Pressable</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
@@ -122,7 +122,7 @@ A simple example of a Pressable component in action
|
||||
<p>For example, on iOS, the <a href="https://developer.apple.com/documentation/uikit/uicolor/ui_element_colors?language=objc">system provides a color called <code>labelColor</code></a>. That can be used in React Native with <code>PlatformColor</code> like this:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Text<span class="token punctuation">,</span> PlatformColor <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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</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><span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token function">PlatformColor</span><span class="token punctuation">(</span><span class="token string">'labelColor'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</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><span class="token punctuation">{</span> color<span class="token punctuation">:</span> <span class="token function">PlatformColor</span><span class="token punctuation">(</span><span class="token string">'labelColor'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
This is a label
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
@@ -134,7 +134,7 @@ Sets the color of the Text component to labelColor as defined by iOS.
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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><span class="token punctuation">{</span>
|
||||
backgroundColor<span class="token operator">:</span> <span class="token function">PlatformColor</span><span class="token punctuation">(</span><span class="token string">'?attr/colorButtonNormal'</span><span class="token punctuation">)</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token function">PlatformColor</span><span class="token punctuation">(</span><span class="token string">'?attr/colorButtonNormal'</span><span class="token punctuation">)</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">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">This is colored like a button!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</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">View</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
@@ -147,11 +147,11 @@ Sets the background color of the View component to colorButtonNormal as defined
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Text<span class="token punctuation">,</span> DynamicColorIOS <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 keyword">const</span> customDynamicTextColor <span class="token operator">=</span> <span class="token function">DynamicColorIOS</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
dark<span class="token operator">:</span> <span class="token string">'lightskyblue'</span><span class="token punctuation">,</span>
|
||||
light<span class="token operator">:</span> <span class="token string">'midnightblue'</span>
|
||||
dark<span class="token punctuation">:</span> <span class="token string">'lightskyblue'</span><span class="token punctuation">,</span>
|
||||
light<span class="token punctuation">:</span> <span class="token string">'midnightblue'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</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><span class="token punctuation">{</span> color<span class="token operator">:</span> customDynamicTextColor <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</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><span class="token punctuation">{</span> color<span class="token punctuation">:</span> customDynamicTextColor <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
This color changes automatically based on the system theme!
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
|
||||
@@ -106,7 +106,7 @@
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'pressed'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> pressed <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
backgroundColor<span class="token operator">:</span> pressed <span class="token operator">?</span> <span class="token string">'lightskyblue'</span> <span class="token operator">:</span> <span class="token string">'white'</span>
|
||||
backgroundColor<span class="token punctuation">:</span> pressed <span class="token operator">?</span> <span class="token string">'lightskyblue'</span> <span class="token punctuation">:</span> <span class="token string">'white'</span>
|
||||
<span class="token punctuation">}</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">Text</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>text<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Press Me!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</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">Pressable</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
@@ -122,7 +122,7 @@ A simple example of a Pressable component in action
|
||||
<p>For example, on iOS, the <a href="https://developer.apple.com/documentation/uikit/uicolor/ui_element_colors?language=objc">system provides a color called <code>labelColor</code></a>. That can be used in React Native with <code>PlatformColor</code> like this:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Text<span class="token punctuation">,</span> PlatformColor <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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</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><span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token function">PlatformColor</span><span class="token punctuation">(</span><span class="token string">'labelColor'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</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><span class="token punctuation">{</span> color<span class="token punctuation">:</span> <span class="token function">PlatformColor</span><span class="token punctuation">(</span><span class="token string">'labelColor'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
This is a label
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
@@ -134,7 +134,7 @@ Sets the color of the Text component to labelColor as defined by iOS.
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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><span class="token punctuation">{</span>
|
||||
backgroundColor<span class="token operator">:</span> <span class="token function">PlatformColor</span><span class="token punctuation">(</span><span class="token string">'?attr/colorButtonNormal'</span><span class="token punctuation">)</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token function">PlatformColor</span><span class="token punctuation">(</span><span class="token string">'?attr/colorButtonNormal'</span><span class="token punctuation">)</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">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">This is colored like a button!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</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">View</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
@@ -147,11 +147,11 @@ Sets the background color of the View component to colorButtonNormal as defined
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Text<span class="token punctuation">,</span> DynamicColorIOS <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 keyword">const</span> customDynamicTextColor <span class="token operator">=</span> <span class="token function">DynamicColorIOS</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
dark<span class="token operator">:</span> <span class="token string">'lightskyblue'</span><span class="token punctuation">,</span>
|
||||
light<span class="token operator">:</span> <span class="token string">'midnightblue'</span>
|
||||
dark<span class="token punctuation">:</span> <span class="token string">'lightskyblue'</span><span class="token punctuation">,</span>
|
||||
light<span class="token punctuation">:</span> <span class="token string">'midnightblue'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</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><span class="token punctuation">{</span> color<span class="token operator">:</span> customDynamicTextColor <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</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><span class="token punctuation">{</span> color<span class="token punctuation">:</span> customDynamicTextColor <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
This color changes automatically based on the system theme!
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
|
||||
+6
-6
@@ -154,7 +154,7 @@
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'pressed'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> pressed <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
backgroundColor<span class="token operator">:</span> pressed <span class="token operator">?</span> <span class="token string">'lightskyblue'</span> <span class="token operator">:</span> <span class="token string">'white'</span>
|
||||
backgroundColor<span class="token punctuation">:</span> pressed <span class="token operator">?</span> <span class="token string">'lightskyblue'</span> <span class="token punctuation">:</span> <span class="token string">'white'</span>
|
||||
<span class="token punctuation">}</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">Text</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>text<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Press Me!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</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">Pressable</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
@@ -170,7 +170,7 @@ A simple example of a Pressable component in action
|
||||
<p>For example, on iOS, the <a href="https://developer.apple.com/documentation/uikit/uicolor/ui_element_colors?language=objc">system provides a color called <code>labelColor</code></a>. That can be used in React Native with <code>PlatformColor</code> like this:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Text<span class="token punctuation">,</span> PlatformColor <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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</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><span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token function">PlatformColor</span><span class="token punctuation">(</span><span class="token string">'labelColor'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</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><span class="token punctuation">{</span> color<span class="token punctuation">:</span> <span class="token function">PlatformColor</span><span class="token punctuation">(</span><span class="token string">'labelColor'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
This is a label
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
@@ -182,7 +182,7 @@ Sets the color of the Text component to labelColor as defined by iOS.
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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><span class="token punctuation">{</span>
|
||||
backgroundColor<span class="token operator">:</span> <span class="token function">PlatformColor</span><span class="token punctuation">(</span><span class="token string">'?attr/colorButtonNormal'</span><span class="token punctuation">)</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token function">PlatformColor</span><span class="token punctuation">(</span><span class="token string">'?attr/colorButtonNormal'</span><span class="token punctuation">)</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">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">This is colored like a button!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</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">View</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
@@ -195,11 +195,11 @@ Sets the background color of the View component to colorButtonNormal as defined
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Text<span class="token punctuation">,</span> DynamicColorIOS <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 keyword">const</span> customDynamicTextColor <span class="token operator">=</span> <span class="token function">DynamicColorIOS</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
dark<span class="token operator">:</span> <span class="token string">'lightskyblue'</span><span class="token punctuation">,</span>
|
||||
light<span class="token operator">:</span> <span class="token string">'midnightblue'</span>
|
||||
dark<span class="token punctuation">:</span> <span class="token string">'lightskyblue'</span><span class="token punctuation">,</span>
|
||||
light<span class="token punctuation">:</span> <span class="token string">'midnightblue'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</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><span class="token punctuation">{</span> color<span class="token operator">:</span> customDynamicTextColor <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</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><span class="token punctuation">{</span> color<span class="token punctuation">:</span> customDynamicTextColor <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
This color changes automatically based on the system theme!
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
|
||||
+10
-10
@@ -217,7 +217,7 @@
|
||||
<p>To opt into this new implementation, please use the <a href="/docs/next/webview#usewebkit"><code>useWebKit</code></a> prop:</p>
|
||||
<pre><code class="hljs css language-js"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">WebView</span></span>
|
||||
<span class="token attr-name">useWebKit</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><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 punctuation">{</span> url<span class="token operator">:</span> <span class="token string">'https://www.google.com'</span> <span class="token punctuation">}</span><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 punctuation">{</span> url<span class="token punctuation">:</span> <span class="token string">'https://www.google.com'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="improvements"></a><a href="#improvements" 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>Improvements</h2>
|
||||
@@ -421,23 +421,23 @@ accessibilityStates={[“selected”]}
|
||||
</code></pre>
|
||||
<p>Then, we'll open up our <code>package.json</code> and replace the <code>jest</code> field with the following:</p>
|
||||
<pre><code class="hljs css language-js"><span class="token punctuation">{</span>
|
||||
<span class="token string">"jest"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token string">"preset"</span><span class="token operator">:</span> <span class="token string">"react-native"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"moduleFileExtensions"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token string">"jest"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token string">"preset"</span><span class="token punctuation">:</span> <span class="token string">"react-native"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"moduleFileExtensions"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token string">"ts"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"tsx"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"js"</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"transform"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token string">"^.+\\.(js)$"</span><span class="token operator">:</span> <span class="token string">"<rootDir>/node_modules/babel-jest"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"\\.(ts|tsx)$"</span><span class="token operator">:</span> <span class="token string">"<rootDir>/node_modules/ts-jest/preprocessor.js"</span>
|
||||
<span class="token string">"transform"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token string">"^.+\\.(js)$"</span><span class="token punctuation">:</span> <span class="token string">"<rootDir>/node_modules/babel-jest"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"\\.(ts|tsx)$"</span><span class="token punctuation">:</span> <span class="token string">"<rootDir>/node_modules/ts-jest/preprocessor.js"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"testRegex"</span><span class="token operator">:</span> <span class="token string">"(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"testPathIgnorePatterns"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token string">"testRegex"</span><span class="token punctuation">:</span> <span class="token string">"(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"testPathIgnorePatterns"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token string">"\\.snap$"</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"<rootDir>/node_modules/"</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token string">"cacheDirectory"</span><span class="token operator">:</span> <span class="token string">".jest/cache"</span>
|
||||
<span class="token string">"cacheDirectory"</span><span class="token punctuation">:</span> <span class="token string">".jest/cache"</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
|
||||
+31
-31
@@ -115,7 +115,7 @@
|
||||
<span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><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 punctuation">;</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Placeholder Text'</span> <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> text<span class="token punctuation">:</span> <span class="token string">'Placeholder Text'</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>
|
||||
@@ -129,12 +129,12 @@
|
||||
<span class="token attr-name">value</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>state<span class="token punctuation">.</span>text<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">InputAccessoryView</span></span> <span class="token attr-name">nativeID</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>inputAccessoryViewID<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">View</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><span class="token punctuation">{</span> backgroundColor<span class="token operator">:</span> <span class="token string">'white'</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">View</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><span class="token punctuation">{</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'white'</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">Button</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 punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></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> text<span class="token operator">:</span> <span class="token string">'Placeholder Text'</span> <span class="token punctuation">}</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> text<span class="token punctuation">:</span> <span class="token string">'Placeholder Text'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Reset Text<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Reset Text<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">View</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">InputAccessoryView</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@@ -303,7 +303,7 @@ const<span class="hljs-built_in"> client </span>= new AWSAppSyncClient({
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> MaskedViewIOS <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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MaskedViewIOS</span></span> <span class="token attr-name">maskElement</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Basic Mask</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></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">View</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><span class="token punctuation">{</span> backgroundColor<span class="token operator">:</span> <span class="token string">'blue'</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">View</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><span class="token punctuation">{</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'blue'</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">MaskedViewIOS</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p><code>MaskedViewIOS</code> takes props <code>maskElement</code> and <code>children</code>. The children are masked by the <code>maskElement</code>. Note that the mask doesn’t need to be an image, it can be any arbitrary view. The behavior of the above example would be to render the blue view, but for it to be visible only where the words “Basic Mask” are from the <code>maskElement</code>. We just made complicated blue text.</p>
|
||||
@@ -312,14 +312,14 @@ const<span class="hljs-built_in"> client </span>= new AWSAppSyncClient({
|
||||
fullScreenBlueLayer<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MaskedViewIOS</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><span class="token punctuation">{</span> flex<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">maskElement</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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>centeredFullScreen<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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>twitterLogo<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">View</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token punctuation">{</span>fullScreenWhiteLayer<span class="token punctuation">}</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">View</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><span class="token punctuation">{</span> flex<span class="token operator">:</span> <span class="token number">1</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">View</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><span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</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">MyApp</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">View</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">MaskedViewIOS</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
@@ -345,14 +345,14 @@ const<span class="hljs-built_in"> client </span>= new AWSAppSyncClient({
|
||||
<p>Since I’m thinking about this animation as steps occurring at different points in time along the complete animation, we will start our <code>Animated.Value</code> at 0, representing 0% complete, and end our value at 100, representing 100% complete.</p>
|
||||
<p>Our initial component state will be the following.</p>
|
||||
<pre><code class="hljs css language-jsx">state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
loadingProgress<span class="token operator">:</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>
|
||||
loadingProgress<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>
|
||||
</code></pre>
|
||||
<p>When we are ready to begin the animation, we tell Animated to animate this value to 100.</p>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>loadingProgress<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
toValue<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
duration<span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
|
||||
useNativeDriver<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// This is important!</span>
|
||||
toValue<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
duration<span class="token punctuation">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
|
||||
useNativeDriver<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token comment">// This is important!</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>I then try to figure out a rough estimate of the different pieces of the animations and the values I want them to have at different stages of the overall animation. Below is a table of the different pieces of the animation, and what I think their values should be at different points as we progress through time.</p>
|
||||
@@ -365,31 +365,31 @@ const<span class="hljs-built_in"> client </span>= new AWSAppSyncClient({
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> loadingProgress <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>loadingProgress<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> opacityClearToVisible <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
opacity<span class="token operator">:</span> loadingProgress<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
extrapolate<span class="token operator">:</span> <span class="token string">'clamp'</span>
|
||||
opacity<span class="token punctuation">:</span> loadingProgress<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
extrapolate<span class="token punctuation">:</span> <span class="token string">'clamp'</span>
|
||||
<span class="token comment">// clamp means when the input is 30-100, output should stay at 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 keyword">const</span> imageScale <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
transform<span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
transform<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
scale<span class="token operator">:</span> loadingProgress<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0.8</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">]</span>
|
||||
scale<span class="token punctuation">:</span> loadingProgress<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0.8</span><span class="token punctuation">,</span> <span class="token number">70</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">const</span> appScale <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
transform<span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
transform<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
scale<span class="token operator">:</span> loadingProgress<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1.1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span>
|
||||
scale<span class="token punctuation">:</span> loadingProgress<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">1.1</span><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 punctuation">]</span>
|
||||
@@ -407,7 +407,7 @@ const<span class="hljs-built_in"> client </span>= new AWSAppSyncClient({
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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>fullScreen<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token punctuation">{</span>fullScreenBlueLayer<span class="token punctuation">}</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">MaskedViewIOS</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><span class="token punctuation">{</span> flex<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">maskElement</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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>centeredFullScreen<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">Animated.Image</span></span>
|
||||
@@ -418,7 +418,7 @@ const<span class="hljs-built_in"> client </span>= new AWSAppSyncClient({
|
||||
<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token punctuation">{</span>fullScreenWhiteLayer<span class="token punctuation">}</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">Animated.View</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><span class="token punctuation">[</span>opacityClearToVisible<span class="token punctuation">,</span> appScale<span class="token punctuation">,</span> <span class="token punctuation">{</span> flex<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><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
<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><span class="token punctuation">[</span>opacityClearToVisible<span class="token punctuation">,</span> appScale<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><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 punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</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">Animated.View</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">MaskedViewIOS</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@@ -429,20 +429,20 @@ const<span class="hljs-built_in"> client </span>= new AWSAppSyncClient({
|
||||
<p>Yay! We now have the animation pieces looking like we want. Now we just have to clean up our blue and white layers which will never be seen again.</p>
|
||||
<p>To know when we can clean them up, we need to know when the animation is complete. Luckily where we call, <code>Animated.timing</code> ,<code>.start</code> takes an optional callback that runs when the animation is complete.</p>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>loadingProgress<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
toValue<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
duration<span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
|
||||
useNativeDriver<span class="token operator">:</span> <span class="token boolean">true</span>
|
||||
toValue<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
duration<span class="token punctuation">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
|
||||
useNativeDriver<span class="token punctuation">:</span> <span class="token boolean">true</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</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>
|
||||
animationDone<span class="token operator">:</span> <span class="token boolean">true</span>
|
||||
animationDone<span class="token punctuation">:</span> <span class="token boolean">true</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>
|
||||
</code></pre>
|
||||
<p>Now that we have a value in <code>state</code> to know whether we are done with the animation, we can modify our blue and white layers to use that.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> fullScreenBlueLayer <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animationDone <span class="token operator">?</span> <span class="token keyword">null</span> <span class="token operator">:</span> <span class="token punctuation">(</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> fullScreenBlueLayer <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animationDone <span class="token operator">?</span> <span class="token keyword">null</span> <span class="token punctuation">:</span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>fullScreenBlueLayer<span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> fullScreenWhiteLayer <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animationDone <span class="token operator">?</span> <span class="token keyword">null</span> <span class="token operator">:</span> <span class="token punctuation">(</span>
|
||||
<span class="token keyword">const</span> fullScreenWhiteLayer <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animationDone <span class="token operator">?</span> <span class="token keyword">null</span> <span class="token punctuation">:</span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>fullScreenWhiteLayer<span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
|
||||
+17
-17
@@ -128,17 +128,17 @@ $ <span class="token function">npm</span> start
|
||||
<ul>
|
||||
<li><p>The internal state of item subtrees is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.</p></li>
|
||||
<li><p>These components are based on <code>PureComponent</code> which means that they will not re-render if <code>props</code> remains shallow-equal. Make sure that everything your <code>renderItem</code> function depends on directly is passed as a prop that is not <code>===</code> after updates, otherwise your UI may not update on changes. This includes the <code>data</code> prop and parent component state. For example:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token operator"><</span>FlatList
|
||||
data<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>data<span class="token punctuation">}</span>
|
||||
renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> item <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyItem</span></span>
|
||||
<span class="token attr-name">item</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">}</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 punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">FlatList</span></span>
|
||||
<span class="token attr-name">data</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>state<span class="token punctuation">.</span>data<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> item <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token operator"><</span>MyItem
|
||||
item<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span>
|
||||
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></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><span class="token parameter">oldState</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
selected<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
selected<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// New instance breaks `===`</span>
|
||||
<span class="token operator">...</span>oldState<span class="token punctuation">.</span>selected<span class="token punctuation">,</span> <span class="token comment">// copy old data</span>
|
||||
<span class="token punctuation">[</span>item<span class="token punctuation">.</span>key<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token operator">!</span>oldState<span class="token punctuation">.</span>selected<span class="token punctuation">[</span>item<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token comment">// toggle</span>
|
||||
<span class="token punctuation">[</span>item<span class="token punctuation">.</span>key<span class="token punctuation">]</span><span class="token punctuation">:</span> <span class="token operator">!</span>oldState<span class="token punctuation">.</span>selected<span class="token punctuation">[</span>item<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token comment">// toggle</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>
|
||||
@@ -193,11 +193,11 @@ $ <span class="token function">npm</span> start
|
||||
<p>In practice, try-catching every nested property access is slow, and differentiating between specific kinds of TypeErrors is fragile. To deal with these shortcomings, we created a Babel plugin that transforms the above <code>idx</code> invocation into the following expression:</p>
|
||||
<pre><code class="hljs css language-jsx">props<span class="token punctuation">.</span>user <span class="token operator">==</span> <span class="token keyword">null</span>
|
||||
<span class="token operator">?</span> props<span class="token punctuation">.</span>user
|
||||
<span class="token operator">:</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends <span class="token operator">==</span> <span class="token keyword">null</span>
|
||||
<span class="token punctuation">:</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends <span class="token operator">==</span> <span class="token keyword">null</span>
|
||||
<span class="token operator">?</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends
|
||||
<span class="token operator">:</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token keyword">null</span>
|
||||
<span class="token punctuation">:</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token keyword">null</span>
|
||||
<span class="token operator">?</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
|
||||
<span class="token operator">:</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>friends<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">:</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>friends<span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Finally, we added a custom Flow type declaration for <code>idx</code> that allows the traversal in the second argument to be properly type-checked while permitting nested access on nullable properties.</p>
|
||||
<p>The function, Babel plugin, and Flow declaration are now <a href="https://github.com/facebookincubator/idx">available on GitHub</a>. They are used by installing the <strong>idx</strong> and <strong>babel-plugin-idx</strong> npm packages, and adding “idx” to the list of plugins in your <code>.babelrc</code> file.</p>
|
||||
@@ -549,7 +549,7 @@ $ react-native upgrade
|
||||
<li><p>Adding a <code>transform</code> style to the image component:</p>
|
||||
<pre><code class="hljs css language-jsx"><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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</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><span class="token punctuation">{</span>transform<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>scaleX<span class="token operator">:</span> I18nManager<span class="token punctuation">.</span>isRTL <span class="token operator">?</span> <span class="token operator">-</span><span class="token number">1</span> <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 punctuation">}</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><span class="token punctuation">{</span>transform<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>scaleX<span class="token punctuation">:</span> I18nManager<span class="token punctuation">.</span>isRTL <span class="token operator">?</span> <span class="token operator">-</span><span class="token number">1</span> <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>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre></li>
|
||||
<li><p>Or, changing the image source according to the direction:</p>
|
||||
@@ -569,9 +569,9 @@ $ react-native upgrade
|
||||
</p>
|
||||
<h5><a class="anchor" aria-hidden="true" id="gestures-example"></a><a href="#gestures-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>Gestures Example</h5>
|
||||
<pre><code class="hljs css language-js"><span class="token comment">// SwipeableRow.js</span>
|
||||
<span class="token function">_isSwipingExcessivelyRightFromClosedPosition</span><span class="token punctuation">(</span>gestureState<span class="token operator">:</span> Object<span class="token punctuation">)</span><span class="token operator">:</span> boolean <span class="token punctuation">{</span>
|
||||
<span class="token function">_isSwipingExcessivelyRightFromClosedPosition</span><span class="token punctuation">(</span>gestureState<span class="token punctuation">:</span> Object<span class="token punctuation">)</span><span class="token punctuation">:</span> boolean <span class="token punctuation">{</span>
|
||||
<span class="token comment">// ...</span>
|
||||
<span class="token keyword">const</span> gestureStateDx <span class="token operator">=</span> <span class="token constant">IS_RTL</span> <span class="token operator">?</span> <span class="token operator">-</span>gestureState<span class="token punctuation">.</span>dx <span class="token operator">:</span> gestureState<span class="token punctuation">.</span>dx<span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> gestureStateDx <span class="token operator">=</span> <span class="token constant">IS_RTL</span> <span class="token operator">?</span> <span class="token operator">-</span>gestureState<span class="token punctuation">.</span>dx <span class="token punctuation">:</span> gestureState<span class="token punctuation">.</span>dx<span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_isSwipingRightFromClosed</span><span class="token punctuation">(</span>gestureState<span class="token punctuation">)</span> <span class="token operator">&&</span>
|
||||
gestureStateDx <span class="token operator">></span> <span class="token constant">RIGHT_SWIPE_THRESHOLD</span>
|
||||
@@ -580,10 +580,10 @@ $ react-native upgrade
|
||||
</code></pre>
|
||||
<h5><a class="anchor" aria-hidden="true" id="animation-example"></a><a href="#animation-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>Animation Example</h5>
|
||||
<pre><code class="hljs css language-js"><span class="token comment">// SwipeableRow.js</span>
|
||||
<span class="token function">_animateBounceBack</span><span class="token punctuation">(</span>duration<span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">_animateBounceBack</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 keyword">void</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// ...</span>
|
||||
<span class="token keyword">const</span> swipeBounceBackDistance <span class="token operator">=</span> <span class="token constant">IS_RTL</span> <span class="token operator">?</span>
|
||||
<span class="token operator">-</span><span class="token constant">RIGHT_SWIPE_BOUNCE_BACK_DISTANCE</span> <span class="token operator">:</span>
|
||||
<span class="token operator">-</span><span class="token constant">RIGHT_SWIPE_BOUNCE_BACK_DISTANCE</span> <span class="token punctuation">:</span>
|
||||
<span class="token constant">RIGHT_SWIPE_BOUNCE_BACK_DISTANCE</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_animateTo</span><span class="token punctuation">(</span>
|
||||
<span class="token operator">-</span>swipeBounceBackDistance<span class="token punctuation">,</span>
|
||||
@@ -612,7 +612,7 @@ $ react-native upgrade
|
||||
|
||||
<span class="token function-variable function">_onDirectionChange</span> <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>
|
||||
I18nManager<span class="token punctuation">.</span><span class="token function">forceRTL</span><span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isRTL<span class="token punctuation">)</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> isRTL<span class="token operator">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isRTL <span class="token punctuation">}</span><span class="token punctuation">)</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> isRTL<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isRTL <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
Alert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'Reload this page'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'Please reload this page to change the UI direction! '</span> <span class="token operator">+</span>
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
@@ -87,7 +87,7 @@
|
||||
<p>To use, set the <code>accessibilityLabel</code> property to a custom string on your View, Text or Touchable:</p>
|
||||
<pre><code class="hljs css language-jsx"><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">accessible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">accessibilityLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Tap me!<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">accessibilityLabel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Tap me!<span class="token punctuation">"</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>onPress<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">View</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 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">Text</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>buttonText<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Press me!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@@ -100,8 +100,8 @@
|
||||
<p>To use, set the <code>accessibilityHint</code> property to a custom string on your View, Text or Touchable:</p>
|
||||
<pre><code class="hljs css language-jsx"><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">accessible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">accessibilityLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Go back<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">accessibilityHint</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Navigates to the previous screen<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">accessibilityLabel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Go back<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">accessibilityHint</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Navigates to the previous screen<span class="token punctuation">"</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>onPress<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">View</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 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">Text</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>buttonText<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Back</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@@ -184,7 +184,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Click me</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</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">View</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">TouchableWithoutFeedback</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">accessibilityLiveRegion</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>polite<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">accessibilityLiveRegion</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>polite<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
Clicked </span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token plain-text"> times
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
|
||||
</code></pre>
|
||||
@@ -193,13 +193,13 @@
|
||||
<p>In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The <code>importantForAccessibility</code> property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to <code>auto</code>, <code>yes</code>, <code>no</code> and <code>no-hide-descendants</code> (the last value will force accessibility services to ignore the component and all of its children).</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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>container<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">View</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><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>layout<span class="token punctuation">,</span> <span class="token punctuation">{</span> backgroundColor<span class="token operator">:</span> <span class="token string">'green'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">importantForAccessibility</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yes<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
<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><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>layout<span class="token punctuation">,</span> <span class="token punctuation">{</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'green'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">importantForAccessibility</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>yes<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">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">First layout</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</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">View</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">View</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><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>layout<span class="token punctuation">,</span> <span class="token punctuation">{</span> backgroundColor<span class="token operator">:</span> <span class="token string">'yellow'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">importantForAccessibility</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>no-hide-descendants<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
<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><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>layout<span class="token punctuation">,</span> <span class="token punctuation">{</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'yellow'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">importantForAccessibility</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>no-hide-descendants<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">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Second layout</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</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">View</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">View</span></span><span class="token punctuation">></span></span>
|
||||
@@ -236,19 +236,19 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span>
|
||||
<span class="token attr-name">accessible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">accessibilityActions</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'cut'</span><span class="token punctuation">,</span> label<span class="token operator">:</span> <span class="token string">'cut'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'copy'</span><span class="token punctuation">,</span> label<span class="token operator">:</span> <span class="token string">'copy'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'paste'</span><span class="token punctuation">,</span> label<span class="token operator">:</span> <span class="token string">'paste'</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'cut'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'cut'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'copy'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'copy'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'paste'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'paste'</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">onAccessibilityAction</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">switch</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>nativeEvent<span class="token punctuation">.</span>actionName<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">case</span> <span class="token string">'cut'</span><span class="token operator">:</span>
|
||||
<span class="token keyword">case</span> <span class="token string">'cut'</span><span class="token punctuation">:</span>
|
||||
Alert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Alert'</span><span class="token punctuation">,</span> <span class="token string">'cut action success'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">break</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">case</span> <span class="token string">'copy'</span><span class="token operator">:</span>
|
||||
<span class="token keyword">case</span> <span class="token string">'copy'</span><span class="token punctuation">:</span>
|
||||
Alert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Alert'</span><span class="token punctuation">,</span> <span class="token string">'copy action success'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">break</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">case</span> <span class="token string">'paste'</span><span class="token operator">:</span>
|
||||
<span class="token keyword">case</span> <span class="token string">'paste'</span><span class="token punctuation">:</span>
|
||||
Alert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Alert'</span><span class="token punctuation">,</span> <span class="token string">'paste action success'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">break</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
@@ -87,7 +87,7 @@
|
||||
<p>To use, set the <code>accessibilityLabel</code> property to a custom string on your View, Text or Touchable:</p>
|
||||
<pre><code class="hljs css language-jsx"><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">accessible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">accessibilityLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Tap me!<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">accessibilityLabel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Tap me!<span class="token punctuation">"</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>onPress<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">View</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 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">Text</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>buttonText<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Press me!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@@ -100,8 +100,8 @@
|
||||
<p>To use, set the <code>accessibilityHint</code> property to a custom string on your View, Text or Touchable:</p>
|
||||
<pre><code class="hljs css language-jsx"><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">accessible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">accessibilityLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Go back<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">accessibilityHint</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Navigates to the previous screen<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">accessibilityLabel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Go back<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">accessibilityHint</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Navigates to the previous screen<span class="token punctuation">"</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>onPress<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">View</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 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">Text</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>buttonText<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Back</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@@ -184,7 +184,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Click me</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</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">View</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">TouchableWithoutFeedback</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">accessibilityLiveRegion</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>polite<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">accessibilityLiveRegion</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>polite<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
Clicked </span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token plain-text"> times
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
|
||||
</code></pre>
|
||||
@@ -193,13 +193,13 @@
|
||||
<p>In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The <code>importantForAccessibility</code> property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to <code>auto</code>, <code>yes</code>, <code>no</code> and <code>no-hide-descendants</code> (the last value will force accessibility services to ignore the component and all of its children).</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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>container<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">View</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><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>layout<span class="token punctuation">,</span> <span class="token punctuation">{</span> backgroundColor<span class="token operator">:</span> <span class="token string">'green'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">importantForAccessibility</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yes<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
<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><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>layout<span class="token punctuation">,</span> <span class="token punctuation">{</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'green'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">importantForAccessibility</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>yes<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">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">First layout</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</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">View</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">View</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><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>layout<span class="token punctuation">,</span> <span class="token punctuation">{</span> backgroundColor<span class="token operator">:</span> <span class="token string">'yellow'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">importantForAccessibility</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>no-hide-descendants<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
<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><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>layout<span class="token punctuation">,</span> <span class="token punctuation">{</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'yellow'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">importantForAccessibility</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>no-hide-descendants<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">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Second layout</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</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">View</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">View</span></span><span class="token punctuation">></span></span>
|
||||
@@ -236,19 +236,19 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span>
|
||||
<span class="token attr-name">accessible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">accessibilityActions</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'cut'</span><span class="token punctuation">,</span> label<span class="token operator">:</span> <span class="token string">'cut'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'copy'</span><span class="token punctuation">,</span> label<span class="token operator">:</span> <span class="token string">'copy'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'paste'</span><span class="token punctuation">,</span> label<span class="token operator">:</span> <span class="token string">'paste'</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'cut'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'cut'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'copy'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'copy'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'paste'</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'paste'</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">onAccessibilityAction</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">switch</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>nativeEvent<span class="token punctuation">.</span>actionName<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">case</span> <span class="token string">'cut'</span><span class="token operator">:</span>
|
||||
<span class="token keyword">case</span> <span class="token string">'cut'</span><span class="token punctuation">:</span>
|
||||
Alert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Alert'</span><span class="token punctuation">,</span> <span class="token string">'cut action success'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">break</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">case</span> <span class="token string">'copy'</span><span class="token operator">:</span>
|
||||
<span class="token keyword">case</span> <span class="token string">'copy'</span><span class="token punctuation">:</span>
|
||||
Alert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Alert'</span><span class="token punctuation">,</span> <span class="token string">'copy action success'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">break</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">case</span> <span class="token string">'paste'</span><span class="token operator">:</span>
|
||||
<span class="token keyword">case</span> <span class="token string">'paste'</span><span class="token punctuation">:</span>
|
||||
Alert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Alert'</span><span class="token punctuation">,</span> <span class="token string">'paste action success'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">break</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<p>Here's a small example illustrating how to use <code>AccessibilityInfo</code>:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">ScreenReaderStatusExample</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
screenReaderEnabled<span class="token operator">:</span> <span class="token boolean">false</span>
|
||||
screenReaderEnabled<span class="token punctuation">:</span> <span class="token boolean">false</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -26,7 +26,7 @@
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
AccessibilityInfo<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">isEnabled</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>
|
||||
screenReaderEnabled<span class="token operator">:</span> isEnabled
|
||||
screenReaderEnabled<span class="token punctuation">:</span> isEnabled
|
||||
<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>
|
||||
@@ -40,7 +40,7 @@
|
||||
|
||||
<span class="token function-variable function">_handleScreenReaderToggled</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">isEnabled</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>
|
||||
screenReaderEnabled<span class="token operator">:</span> isEnabled
|
||||
screenReaderEnabled<span class="token punctuation">:</span> isEnabled
|
||||
<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>
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
The screen reader is</span><span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span><span class="token plain-text">
|
||||
</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>screenReaderEnabled
|
||||
<span class="token operator">?</span> <span class="token string">'enabled'</span>
|
||||
<span class="token operator">:</span> <span class="token string">'disabled'</span><span class="token punctuation">}</span><span class="token plain-text">
|
||||
<span class="token punctuation">:</span> <span class="token string">'disabled'</span><span class="token punctuation">}</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">Text</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">View</span></span><span class="token punctuation">></span></span>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<p>Here's a small example illustrating how to use <code>AccessibilityInfo</code>:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">ScreenReaderStatusExample</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
screenReaderEnabled<span class="token operator">:</span> <span class="token boolean">false</span>
|
||||
screenReaderEnabled<span class="token punctuation">:</span> <span class="token boolean">false</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -26,7 +26,7 @@
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
AccessibilityInfo<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">isEnabled</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>
|
||||
screenReaderEnabled<span class="token operator">:</span> isEnabled
|
||||
screenReaderEnabled<span class="token punctuation">:</span> isEnabled
|
||||
<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>
|
||||
@@ -40,7 +40,7 @@
|
||||
|
||||
<span class="token function-variable function">_handleScreenReaderToggled</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">isEnabled</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>
|
||||
screenReaderEnabled<span class="token operator">:</span> isEnabled
|
||||
screenReaderEnabled<span class="token punctuation">:</span> isEnabled
|
||||
<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>
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
The screen reader is</span><span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span><span class="token plain-text">
|
||||
</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>screenReaderEnabled
|
||||
<span class="token operator">?</span> <span class="token string">'enabled'</span>
|
||||
<span class="token operator">:</span> <span class="token string">'disabled'</span><span class="token punctuation">}</span><span class="token plain-text">
|
||||
<span class="token punctuation">:</span> <span class="token string">'disabled'</span><span class="token punctuation">}</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">Text</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">View</span></span><span class="token punctuation">></span></span>
|
||||
|
||||
+10
-10
@@ -33,13 +33,13 @@
|
||||
<span class="token string">'Keep your app up to date to enjoy the latest features'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
text<span class="token operator">:</span> <span class="token string">'Cancel'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">onPress</span><span class="token operator">:</span> <span class="token punctuation">(</span><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><span class="token string">'Cancel Pressed'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
style<span class="token operator">:</span> <span class="token string">'cancel'</span>
|
||||
text<span class="token punctuation">:</span> <span class="token string">'Cancel'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">onPress</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><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><span class="token string">'Cancel Pressed'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
style<span class="token punctuation">:</span> <span class="token string">'cancel'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
text<span class="token operator">:</span> <span class="token string">'Install'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">onPress</span><span class="token operator">:</span> <span class="token punctuation">(</span><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><span class="token string">'Install Pressed'</span><span class="token punctuation">)</span>
|
||||
text<span class="token punctuation">:</span> <span class="token string">'Install'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">onPress</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><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><span class="token string">'Install Pressed'</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>
|
||||
@@ -50,13 +50,13 @@
|
||||
<span class="token string">'Enter your password to claim your $1.5B in lottery winnings'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
text<span class="token operator">:</span> <span class="token string">'Cancel'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">onPress</span><span class="token operator">:</span> <span class="token punctuation">(</span><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><span class="token string">'Cancel Pressed'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
style<span class="token operator">:</span> <span class="token string">'cancel'</span>
|
||||
text<span class="token punctuation">:</span> <span class="token string">'Cancel'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">onPress</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><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><span class="token string">'Cancel Pressed'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
style<span class="token punctuation">:</span> <span class="token string">'cancel'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
text<span class="token operator">:</span> <span class="token string">'OK'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">onPress</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">password</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
||||
text<span class="token punctuation">:</span> <span class="token string">'OK'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">onPress</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token parameter">password</span><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><span class="token string">'OK Pressed, password: '</span> <span class="token operator">+</span> password<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
|
||||
@@ -33,13 +33,13 @@
|
||||
<span class="token string">'Keep your app up to date to enjoy the latest features'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
text<span class="token operator">:</span> <span class="token string">'Cancel'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">onPress</span><span class="token operator">:</span> <span class="token punctuation">(</span><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><span class="token string">'Cancel Pressed'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
style<span class="token operator">:</span> <span class="token string">'cancel'</span>
|
||||
text<span class="token punctuation">:</span> <span class="token string">'Cancel'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">onPress</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><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><span class="token string">'Cancel Pressed'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
style<span class="token punctuation">:</span> <span class="token string">'cancel'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
text<span class="token operator">:</span> <span class="token string">'Install'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">onPress</span><span class="token operator">:</span> <span class="token punctuation">(</span><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><span class="token string">'Install Pressed'</span><span class="token punctuation">)</span>
|
||||
text<span class="token punctuation">:</span> <span class="token string">'Install'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">onPress</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><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><span class="token string">'Install Pressed'</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>
|
||||
@@ -50,13 +50,13 @@
|
||||
<span class="token string">'Enter your password to claim your $1.5B in lottery winnings'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
text<span class="token operator">:</span> <span class="token string">'Cancel'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">onPress</span><span class="token operator">:</span> <span class="token punctuation">(</span><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><span class="token string">'Cancel Pressed'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
style<span class="token operator">:</span> <span class="token string">'cancel'</span>
|
||||
text<span class="token punctuation">:</span> <span class="token string">'Cancel'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">onPress</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><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><span class="token string">'Cancel Pressed'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
style<span class="token punctuation">:</span> <span class="token string">'cancel'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
text<span class="token operator">:</span> <span class="token string">'OK'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">onPress</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">password</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
||||
text<span class="token punctuation">:</span> <span class="token string">'OK'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">onPress</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token parameter">password</span><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><span class="token string">'OK Pressed, password: '</span> <span class="token operator">+</span> password<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<span class="token comment">// Animate value over time</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// The value to drive</span>
|
||||
<span class="token punctuation">{</span>
|
||||
toValue<span class="token operator">:</span> <span class="token number">1</span> <span class="token comment">// Animate to final value of 1</span>
|
||||
toValue<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token comment">// Animate to final value of 1</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Start the animation</span>
|
||||
</code></pre>
|
||||
@@ -95,9 +95,9 @@
|
||||
<p>For example, when working with horizontal scrolling gestures, you would do the following in order to map <code>event.nativeEvent.contentOffset.x</code> to <code>scrollX</code> (an <code>Animated.Value</code>):</p>
|
||||
<pre><code class="hljs css language-jsx"> 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 comment">// scrollX = e.nativeEvent.contentOffset.x</span>
|
||||
<span class="token punctuation">[</span><span class="token punctuation">{</span> nativeEvent<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
contentOffset<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
x<span class="token operator">:</span> scrollX
|
||||
<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> scrollX
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span>
|
||||
@@ -391,14 +391,14 @@
|
||||
</code></pre>
|
||||
<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>
|
||||
<pre><code class="hljs css language-jsx">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 operator">:</span> <span class="token punctuation">{</span>contentOffset<span class="token operator">:</span> <span class="token punctuation">{</span>x<span class="token operator">:</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><span class="token function-variable function">listener</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">event</span><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">// Optional async listener</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><span class="token function-variable function">listener</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token parameter">event</span><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">// Optional async listener</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
<span class="token operator">...</span>
|
||||
onPanResponderMove<span class="token operator">:</span> Animated<span class="token punctuation">.</span><span class="token function">event</span><span class="token punctuation">(</span><span class="token punctuation">[</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">// raw event arg ignored</span>
|
||||
<span class="token punctuation">{</span>dx<span class="token operator">:</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">// gestureState arg</span>
|
||||
<span class="token punctuation">{</span><span class="token function-variable function">listener</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> gestureState</span><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">// Optional async listener</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">// gestureState arg</span>
|
||||
<span class="token punctuation">{</span><span class="token function-variable function">listener</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> gestureState</span><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">// Optional async listener</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
</code></pre>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<span class="token comment">// Animate value over time</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// The value to drive</span>
|
||||
<span class="token punctuation">{</span>
|
||||
toValue<span class="token operator">:</span> <span class="token number">1</span> <span class="token comment">// Animate to final value of 1</span>
|
||||
toValue<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token comment">// Animate to final value of 1</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Start the animation</span>
|
||||
</code></pre>
|
||||
@@ -95,9 +95,9 @@
|
||||
<p>For example, when working with horizontal scrolling gestures, you would do the following in order to map <code>event.nativeEvent.contentOffset.x</code> to <code>scrollX</code> (an <code>Animated.Value</code>):</p>
|
||||
<pre><code class="hljs css language-jsx"> 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 comment">// scrollX = e.nativeEvent.contentOffset.x</span>
|
||||
<span class="token punctuation">[</span><span class="token punctuation">{</span> nativeEvent<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
contentOffset<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
x<span class="token operator">:</span> scrollX
|
||||
<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> scrollX
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span>
|
||||
@@ -391,14 +391,14 @@
|
||||
</code></pre>
|
||||
<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>
|
||||
<pre><code class="hljs css language-jsx">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 operator">:</span> <span class="token punctuation">{</span>contentOffset<span class="token operator">:</span> <span class="token punctuation">{</span>x<span class="token operator">:</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><span class="token function-variable function">listener</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">event</span><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">// Optional async listener</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><span class="token function-variable function">listener</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token parameter">event</span><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">// Optional async listener</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
<span class="token operator">...</span>
|
||||
onPanResponderMove<span class="token operator">:</span> Animated<span class="token punctuation">.</span><span class="token function">event</span><span class="token punctuation">(</span><span class="token punctuation">[</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">// raw event arg ignored</span>
|
||||
<span class="token punctuation">{</span>dx<span class="token operator">:</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">// gestureState arg</span>
|
||||
<span class="token punctuation">{</span><span class="token function-variable function">listener</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> gestureState</span><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">// Optional async listener</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">// gestureState arg</span>
|
||||
<span class="token punctuation">{</span><span class="token function-variable function">listener</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> gestureState</span><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">// Optional async listener</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
</code></pre>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
|
||||
@@ -19,21 +19,21 @@
|
||||
<span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><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 punctuation">;</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
pan<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Animated<span class="token punctuation">.</span>ValueXY</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// inits to zero</span>
|
||||
pan<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Animated<span class="token punctuation">.</span>ValueXY</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// inits to zero</span>
|
||||
<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 punctuation">.</span>panResponder <span class="token operator">=</span> PanResponder<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token function-variable function">onStartShouldSetPanResponder</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
onPanResponderMove<span class="token operator">:</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 function-variable function">onStartShouldSetPanResponder</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token boolean">true</span><span class="token punctuation">,</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 punctuation">{</span>
|
||||
dx<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pan<span class="token punctuation">.</span>x<span class="token punctuation">,</span> <span class="token comment">// x,y are Animated.Value</span>
|
||||
dy<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pan<span class="token punctuation">.</span>y
|
||||
dx<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pan<span class="token punctuation">.</span>x<span class="token punctuation">,</span> <span class="token comment">// x,y are Animated.Value</span>
|
||||
dy<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pan<span class="token punctuation">.</span>y
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">onPanResponderRelease</span><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 function-variable function">onPanResponderRelease</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
Animated<span class="token punctuation">.</span><span class="token function">spring</span><span class="token punctuation">(</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pan<span class="token punctuation">,</span> <span class="token comment">// Auto-multiplexed</span>
|
||||
<span class="token punctuation">{</span> toValue<span class="token operator">:</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Back to zero</span>
|
||||
<span class="token punctuation">{</span> toValue<span class="token punctuation">:</span> <span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Back to zero</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</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>
|
||||
@@ -178,7 +178,7 @@
|
||||
</code></pre>
|
||||
<p>Converts <code>{x, y}</code> into a useable translation transform, e.g.</p>
|
||||
<pre><code class="hljs css language-jsx">style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
transform<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>anim<span class="token punctuation">.</span><span class="token function">getTranslateTransform</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
transform<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>anim<span class="token punctuation">.</span><span class="token function">getTranslateTransform</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a><ul class="toc-headings"><li><a href="#methods">Methods</a></li></ul></li><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#setvalue"><code>setValue()</code></a></li><li><a href="#setoffset"><code>setOffset()</code></a></li><li><a href="#flattenoffset"><code>flattenOffset()</code></a></li><li><a href="#extractoffset"><code>extractOffset()</code></a></li><li><a href="#addlistener"><code>addListener()</code></a></li><li><a href="#removelistener"><code>removeListener()</code></a></li><li><a href="#removealllisteners"><code>removeAllListeners()</code></a></li><li><a href="#stopanimation"><code>stopAnimation()</code></a></li><li><a href="#resetanimation"><code>resetAnimation()</code></a></li><li><a href="#getlayout"><code>getLayout()</code></a></li><li><a href="#gettranslatetransform"><code>getTranslateTransform()</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">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://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="https://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'));
|
||||
|
||||
@@ -19,21 +19,21 @@
|
||||
<span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><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 punctuation">;</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
pan<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Animated<span class="token punctuation">.</span>ValueXY</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// inits to zero</span>
|
||||
pan<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Animated<span class="token punctuation">.</span>ValueXY</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// inits to zero</span>
|
||||
<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 punctuation">.</span>panResponder <span class="token operator">=</span> PanResponder<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token function-variable function">onStartShouldSetPanResponder</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
onPanResponderMove<span class="token operator">:</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 function-variable function">onStartShouldSetPanResponder</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token boolean">true</span><span class="token punctuation">,</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 punctuation">{</span>
|
||||
dx<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pan<span class="token punctuation">.</span>x<span class="token punctuation">,</span> <span class="token comment">// x,y are Animated.Value</span>
|
||||
dy<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pan<span class="token punctuation">.</span>y
|
||||
dx<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pan<span class="token punctuation">.</span>x<span class="token punctuation">,</span> <span class="token comment">// x,y are Animated.Value</span>
|
||||
dy<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pan<span class="token punctuation">.</span>y
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">onPanResponderRelease</span><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 function-variable function">onPanResponderRelease</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
Animated<span class="token punctuation">.</span><span class="token function">spring</span><span class="token punctuation">(</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pan<span class="token punctuation">,</span> <span class="token comment">// Auto-multiplexed</span>
|
||||
<span class="token punctuation">{</span> toValue<span class="token operator">:</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Back to zero</span>
|
||||
<span class="token punctuation">{</span> toValue<span class="token punctuation">:</span> <span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Back to zero</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</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>
|
||||
@@ -178,7 +178,7 @@
|
||||
</code></pre>
|
||||
<p>Converts <code>{x, y}</code> into a useable translation transform, e.g.</p>
|
||||
<pre><code class="hljs css language-jsx">style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
transform<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>anim<span class="token punctuation">.</span><span class="token function">getTranslateTransform</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
transform<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>anim<span class="token punctuation">.</span><span class="token function">getTranslateTransform</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a><ul class="toc-headings"><li><a href="#methods">Methods</a></li></ul></li><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#setvalue"><code>setValue()</code></a></li><li><a href="#setoffset"><code>setOffset()</code></a></li><li><a href="#flattenoffset"><code>flattenOffset()</code></a></li><li><a href="#extractoffset"><code>extractOffset()</code></a></li><li><a href="#addlistener"><code>addListener()</code></a></li><li><a href="#removelistener"><code>removeListener()</code></a></li><li><a href="#removealllisteners"><code>removeAllListeners()</code></a></li><li><a href="#stopanimation"><code>stopAnimation()</code></a></li><li><a href="#resetanimation"><code>resetAnimation()</code></a></li><li><a href="#getlayout"><code>getLayout()</code></a></li><li><a href="#gettranslatetransform"><code>getTranslateTransform()</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">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://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="https://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'));
|
||||
|
||||
+37
-37
@@ -136,9 +136,9 @@
|
||||
<p>By default, <code>timing</code> will use a easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing a <code>easing</code> parameter. Custom <code>duration</code> or even a <code>delay</code> before the animation starts is also supported.</p>
|
||||
<p>For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:</p>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>xPosition<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
toValue<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
easing<span class="token operator">:</span> Easing<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
duration<span class="token operator">:</span> <span class="token number">2000</span>
|
||||
toValue<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
easing<span class="token punctuation">:</span> Easing<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
duration<span class="token punctuation">:</span> <span class="token number">2000</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Take a look at the <a href="/docs/0.10/animated#configuring-animations">Configuring animations</a> section of the <code>Animated</code> API reference to learn more about all the config parameters supported by the built-in animations.</p>
|
||||
@@ -149,17 +149,17 @@
|
||||
<span class="token comment">// decay, then spring to start and twirl</span>
|
||||
Animated<span class="token punctuation">.</span><span class="token function">decay</span><span class="token punctuation">(</span>position<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// coast to a stop</span>
|
||||
velocity<span class="token operator">:</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> gestureState<span class="token punctuation">.</span>vx<span class="token punctuation">,</span> y<span class="token operator">:</span> gestureState<span class="token punctuation">.</span>vy <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// velocity from gesture release</span>
|
||||
deceleration<span class="token operator">:</span> <span class="token number">0.997</span>
|
||||
velocity<span class="token punctuation">:</span> <span class="token punctuation">{</span> x<span class="token punctuation">:</span> gestureState<span class="token punctuation">.</span>vx<span class="token punctuation">,</span> y<span class="token punctuation">:</span> gestureState<span class="token punctuation">.</span>vy <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// velocity from gesture release</span>
|
||||
deceleration<span class="token punctuation">:</span> <span class="token number">0.997</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
Animated<span class="token punctuation">.</span><span class="token function">parallel</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||||
<span class="token comment">// after decay, in parallel:</span>
|
||||
Animated<span class="token punctuation">.</span><span class="token function">spring</span><span class="token punctuation">(</span>position<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
toValue<span class="token operator">:</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token comment">// return to start</span>
|
||||
toValue<span class="token punctuation">:</span> <span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token comment">// return to start</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span>twirl<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// and twirl</span>
|
||||
toValue<span class="token operator">:</span> <span class="token number">360</span>
|
||||
toValue<span class="token punctuation">:</span> <span class="token number">360</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 function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// start the sequence group</span>
|
||||
@@ -173,32 +173,32 @@
|
||||
<span class="token keyword">const</span> b <span class="token operator">=</span> Animated<span class="token punctuation">.</span><span class="token function">divide</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> a<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
Animated<span class="token punctuation">.</span><span class="token function">spring</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
toValue<span class="token operator">:</span> <span class="token number">2</span>
|
||||
toValue<span class="token punctuation">:</span> <span class="token number">2</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</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="interpolation"></a><a href="#interpolation" 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>Interpolation</h3>
|
||||
<p>Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>A mapping to convert a 0-1 range to a 0-100 range would be:</p>
|
||||
<pre><code class="hljs css language-jsx">value<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying <code>style</code> from the example above like so:</p>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
transform<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||||
translateY<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">150</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span> <span class="token comment">// 0 : 150, 0.5 : 75, 1 : 0</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
transform<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||||
translateY<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">150</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span> <span class="token comment">// 0 : 150, 0.5 : 75, 1 : 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 punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p><a href="/docs/0.10/animated#interpolate"><code>interpolate()</code></a> supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:</p>
|
||||
<pre><code class="hljs css language-jsx">value<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">101</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">101</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</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>
|
||||
</code></pre>
|
||||
<p>Which would map like so:</p>
|
||||
@@ -217,18 +217,18 @@ Animated<span class="token punctuation">.</span><span class="token function">spr
|
||||
</code></pre>
|
||||
<p><code>interpolate()</code> also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:</p>
|
||||
<pre><code class="hljs css language-jsx">value<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">360</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'0deg'</span><span class="token punctuation">,</span> <span class="token string">'360deg'</span><span class="token punctuation">]</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">360</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'0deg'</span><span class="token punctuation">,</span> <span class="token string">'360deg'</span><span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p><code>interpolate()</code> also supports arbitrary easing functions, many of which are already implemented in the <a href="/docs/0.10/easing"><code>Easing</code></a> module. <code>interpolate()</code> also has configurable behavior for extrapolating the <code>outputRange</code>. You can set the extrapolation by setting the <code>extrapolate</code>, <code>extrapolateLeft</code>, or <code>extrapolateRight</code> options. The default value is <code>extend</code> but you can use <code>clamp</code> to prevent the output value from exceeding <code>outputRange</code>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="tracking-dynamic-values"></a><a href="#tracking-dynamic-values" 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>Tracking dynamic values</h3>
|
||||
<p>Animated values can also track other values. Set the <code>toValue</code> of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a <code>spring()</code> pinned on another animated value, or with <code>timing()</code> and a <code>duration</code> of 0 for rigid tracking. They can also be composed with interpolations:</p>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">spring</span><span class="token punctuation">(</span>follower<span class="token punctuation">,</span> <span class="token punctuation">{</span> toValue<span class="token operator">:</span> leader <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">spring</span><span class="token punctuation">(</span>follower<span class="token punctuation">,</span> <span class="token punctuation">{</span> toValue<span class="token punctuation">:</span> leader <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span>opacity<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
toValue<span class="token operator">:</span> pan<span class="token punctuation">.</span>x<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span>
|
||||
toValue<span class="token punctuation">:</span> pan<span class="token punctuation">.</span>x<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">1</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 punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
@@ -238,9 +238,9 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<p>For example, when working with horizontal scrolling gestures, you would do the following in order to map <code>event.nativeEvent.contentOffset.x</code> to <code>scrollX</code> (an <code>Animated.Value</code>):</p>
|
||||
<pre><code class="hljs css language-jsx"> 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 comment">// scrollX = e.nativeEvent.contentOffset.x</span>
|
||||
<span class="token punctuation">[</span><span class="token punctuation">{</span> nativeEvent<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
contentOffset<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
x<span class="token operator">:</span> scrollX
|
||||
<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> scrollX
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span>
|
||||
@@ -251,7 +251,7 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<span class="token punctuation">[</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">// ignore the native event</span>
|
||||
<span class="token comment">// extract dx and dy from gestureState</span>
|
||||
<span class="token comment">// like 'pan.x = gestureState.dx, pan.y = gestureState.dy'</span>
|
||||
<span class="token punctuation">{</span>dx<span class="token operator">:</span> pan<span class="token punctuation">.</span>x<span class="token punctuation">,</span> dy<span class="token operator">:</span> pan<span class="token punctuation">.</span>y<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">{</span>dx<span class="token punctuation">:</span> pan<span class="token punctuation">.</span>x<span class="token punctuation">,</span> dy<span class="token punctuation">:</span> pan<span class="token punctuation">.</span>y<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="responding-to-the-current-animation-value"></a><a href="#responding-to-the-current-animation-value" 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>Responding to the current animation value</h3>
|
||||
@@ -265,9 +265,9 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<p>The <code>Animated</code> API is designed to be serializable. By using the <a href="/blog/2017/02/14/using-native-driver-for-animated">native driver</a>, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.</p>
|
||||
<p>To use the native driver for normal animations add <code>useNativeDriver: true</code> to the animation config when starting it.</p>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animatedValue<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
toValue<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
duration<span class="token operator">:</span> <span class="token number">500</span><span class="token punctuation">,</span>
|
||||
useNativeDriver<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// <-- Add this</span>
|
||||
toValue<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
duration<span class="token punctuation">:</span> <span class="token number">500</span><span class="token punctuation">,</span>
|
||||
useNativeDriver<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token comment">// <-- Add this</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.</p>
|
||||
@@ -277,12 +277,12 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
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 operator">:</span> <span class="token punctuation">{</span>
|
||||
contentOffset<span class="token operator">:</span> <span class="token punctuation">{</span> y<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animatedValue <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> y<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animatedValue <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> useNativeDriver<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token comment">// <-- Add this</span>
|
||||
<span class="token punctuation">{</span> useNativeDriver<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token comment">// <-- Add this</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span>content<span class="token punctuation">}</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Animated.ScrollView</span></span><span class="token punctuation">></span></span>
|
||||
@@ -295,10 +295,10 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<p>While using transform styles such as <code>rotateY</code>, <code>rotateX</code>, and others ensure the transform style <code>perspective</code> is in place. At this time some animations may not render on Android without it. Example below.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Animated.View</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><span class="token punctuation">{</span>
|
||||
transform<span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span> scale<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>scale <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span> rotateY<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>rotateY <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span> perspective<span class="token operator">:</span> <span class="token number">1000</span> <span class="token punctuation">}</span> <span class="token comment">// without this line this Animation will not render on Android while working fine on iOS</span>
|
||||
transform<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span> scale<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>scale <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span> rotateY<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>rotateY <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span> perspective<span class="token punctuation">:</span> <span class="token number">1000</span> <span class="token punctuation">}</span> <span class="token comment">// without this line this Animation will not render on Android while working fine on iOS</span>
|
||||
<span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
|
||||
@@ -136,9 +136,9 @@
|
||||
<p>By default, <code>timing</code> will use a easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing a <code>easing</code> parameter. Custom <code>duration</code> or even a <code>delay</code> before the animation starts is also supported.</p>
|
||||
<p>For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:</p>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>xPosition<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
toValue<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
easing<span class="token operator">:</span> Easing<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
duration<span class="token operator">:</span> <span class="token number">2000</span>
|
||||
toValue<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
easing<span class="token punctuation">:</span> Easing<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
duration<span class="token punctuation">:</span> <span class="token number">2000</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Take a look at the <a href="/docs/0.10/animated#configuring-animations">Configuring animations</a> section of the <code>Animated</code> API reference to learn more about all the config parameters supported by the built-in animations.</p>
|
||||
@@ -149,17 +149,17 @@
|
||||
<span class="token comment">// decay, then spring to start and twirl</span>
|
||||
Animated<span class="token punctuation">.</span><span class="token function">decay</span><span class="token punctuation">(</span>position<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// coast to a stop</span>
|
||||
velocity<span class="token operator">:</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> gestureState<span class="token punctuation">.</span>vx<span class="token punctuation">,</span> y<span class="token operator">:</span> gestureState<span class="token punctuation">.</span>vy <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// velocity from gesture release</span>
|
||||
deceleration<span class="token operator">:</span> <span class="token number">0.997</span>
|
||||
velocity<span class="token punctuation">:</span> <span class="token punctuation">{</span> x<span class="token punctuation">:</span> gestureState<span class="token punctuation">.</span>vx<span class="token punctuation">,</span> y<span class="token punctuation">:</span> gestureState<span class="token punctuation">.</span>vy <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// velocity from gesture release</span>
|
||||
deceleration<span class="token punctuation">:</span> <span class="token number">0.997</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
Animated<span class="token punctuation">.</span><span class="token function">parallel</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||||
<span class="token comment">// after decay, in parallel:</span>
|
||||
Animated<span class="token punctuation">.</span><span class="token function">spring</span><span class="token punctuation">(</span>position<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
toValue<span class="token operator">:</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token comment">// return to start</span>
|
||||
toValue<span class="token punctuation">:</span> <span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token comment">// return to start</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span>twirl<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// and twirl</span>
|
||||
toValue<span class="token operator">:</span> <span class="token number">360</span>
|
||||
toValue<span class="token punctuation">:</span> <span class="token number">360</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 function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// start the sequence group</span>
|
||||
@@ -173,32 +173,32 @@
|
||||
<span class="token keyword">const</span> b <span class="token operator">=</span> Animated<span class="token punctuation">.</span><span class="token function">divide</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> a<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
Animated<span class="token punctuation">.</span><span class="token function">spring</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
toValue<span class="token operator">:</span> <span class="token number">2</span>
|
||||
toValue<span class="token punctuation">:</span> <span class="token number">2</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</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="interpolation"></a><a href="#interpolation" 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>Interpolation</h3>
|
||||
<p>Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>A mapping to convert a 0-1 range to a 0-100 range would be:</p>
|
||||
<pre><code class="hljs css language-jsx">value<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying <code>style</code> from the example above like so:</p>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
transform<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||||
translateY<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">150</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span> <span class="token comment">// 0 : 150, 0.5 : 75, 1 : 0</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
transform<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||||
translateY<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">150</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span> <span class="token comment">// 0 : 150, 0.5 : 75, 1 : 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 punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p><a href="/docs/0.10/animated#interpolate"><code>interpolate()</code></a> supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:</p>
|
||||
<pre><code class="hljs css language-jsx">value<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">101</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">101</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</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>
|
||||
</code></pre>
|
||||
<p>Which would map like so:</p>
|
||||
@@ -217,18 +217,18 @@ Animated<span class="token punctuation">.</span><span class="token function">spr
|
||||
</code></pre>
|
||||
<p><code>interpolate()</code> also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:</p>
|
||||
<pre><code class="hljs css language-jsx">value<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">360</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'0deg'</span><span class="token punctuation">,</span> <span class="token string">'360deg'</span><span class="token punctuation">]</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">360</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'0deg'</span><span class="token punctuation">,</span> <span class="token string">'360deg'</span><span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p><code>interpolate()</code> also supports arbitrary easing functions, many of which are already implemented in the <a href="/docs/0.10/easing"><code>Easing</code></a> module. <code>interpolate()</code> also has configurable behavior for extrapolating the <code>outputRange</code>. You can set the extrapolation by setting the <code>extrapolate</code>, <code>extrapolateLeft</code>, or <code>extrapolateRight</code> options. The default value is <code>extend</code> but you can use <code>clamp</code> to prevent the output value from exceeding <code>outputRange</code>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="tracking-dynamic-values"></a><a href="#tracking-dynamic-values" 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>Tracking dynamic values</h3>
|
||||
<p>Animated values can also track other values. Set the <code>toValue</code> of an animation to another animated value instead of a plain number. For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a <code>spring()</code> pinned on another animated value, or with <code>timing()</code> and a <code>duration</code> of 0 for rigid tracking. They can also be composed with interpolations:</p>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">spring</span><span class="token punctuation">(</span>follower<span class="token punctuation">,</span> <span class="token punctuation">{</span> toValue<span class="token operator">:</span> leader <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">spring</span><span class="token punctuation">(</span>follower<span class="token punctuation">,</span> <span class="token punctuation">{</span> toValue<span class="token punctuation">:</span> leader <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span>opacity<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
toValue<span class="token operator">:</span> pan<span class="token punctuation">.</span>x<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span>
|
||||
toValue<span class="token punctuation">:</span> pan<span class="token punctuation">.</span>x<span class="token punctuation">.</span><span class="token function">interpolate</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">1</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 punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
@@ -238,9 +238,9 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<p>For example, when working with horizontal scrolling gestures, you would do the following in order to map <code>event.nativeEvent.contentOffset.x</code> to <code>scrollX</code> (an <code>Animated.Value</code>):</p>
|
||||
<pre><code class="hljs css language-jsx"> 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 comment">// scrollX = e.nativeEvent.contentOffset.x</span>
|
||||
<span class="token punctuation">[</span><span class="token punctuation">{</span> nativeEvent<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
contentOffset<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
x<span class="token operator">:</span> scrollX
|
||||
<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> scrollX
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span>
|
||||
@@ -251,7 +251,7 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<span class="token punctuation">[</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">// ignore the native event</span>
|
||||
<span class="token comment">// extract dx and dy from gestureState</span>
|
||||
<span class="token comment">// like 'pan.x = gestureState.dx, pan.y = gestureState.dy'</span>
|
||||
<span class="token punctuation">{</span>dx<span class="token operator">:</span> pan<span class="token punctuation">.</span>x<span class="token punctuation">,</span> dy<span class="token operator">:</span> pan<span class="token punctuation">.</span>y<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">{</span>dx<span class="token punctuation">:</span> pan<span class="token punctuation">.</span>x<span class="token punctuation">,</span> dy<span class="token punctuation">:</span> pan<span class="token punctuation">.</span>y<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="responding-to-the-current-animation-value"></a><a href="#responding-to-the-current-animation-value" 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>Responding to the current animation value</h3>
|
||||
@@ -265,9 +265,9 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<p>The <code>Animated</code> API is designed to be serializable. By using the <a href="/blog/2017/02/14/using-native-driver-for-animated">native driver</a>, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.</p>
|
||||
<p>To use the native driver for normal animations add <code>useNativeDriver: true</code> to the animation config when starting it.</p>
|
||||
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animatedValue<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
toValue<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
duration<span class="token operator">:</span> <span class="token number">500</span><span class="token punctuation">,</span>
|
||||
useNativeDriver<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// <-- Add this</span>
|
||||
toValue<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
duration<span class="token punctuation">:</span> <span class="token number">500</span><span class="token punctuation">,</span>
|
||||
useNativeDriver<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token comment">// <-- Add this</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.</p>
|
||||
@@ -277,12 +277,12 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
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 operator">:</span> <span class="token punctuation">{</span>
|
||||
contentOffset<span class="token operator">:</span> <span class="token punctuation">{</span> y<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animatedValue <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> y<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>animatedValue <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> useNativeDriver<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token comment">// <-- Add this</span>
|
||||
<span class="token punctuation">{</span> useNativeDriver<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token comment">// <-- Add this</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span>content<span class="token punctuation">}</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Animated.ScrollView</span></span><span class="token punctuation">></span></span>
|
||||
@@ -295,10 +295,10 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<p>While using transform styles such as <code>rotateY</code>, <code>rotateX</code>, and others ensure the transform style <code>perspective</code> is in place. At this time some animations may not render on Android without it. Example below.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Animated.View</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><span class="token punctuation">{</span>
|
||||
transform<span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span> scale<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>scale <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span> rotateY<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>rotateY <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span> perspective<span class="token operator">:</span> <span class="token number">1000</span> <span class="token punctuation">}</span> <span class="token comment">// without this line this Animation will not render on Android while working fine on iOS</span>
|
||||
transform<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span> scale<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>scale <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span> rotateY<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>rotateY <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span> perspective<span class="token punctuation">:</span> <span class="token number">1000</span> <span class="token punctuation">}</span> <span class="token comment">// without this line this Animation will not render on Android while working fine on iOS</span>
|
||||
<span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">AppStateExample</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
appState<span class="token operator">:</span> AppState<span class="token punctuation">.</span>currentState
|
||||
appState<span class="token punctuation">:</span> AppState<span class="token punctuation">.</span>currentState
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -52,7 +52,7 @@
|
||||
<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'App has come to the foreground!'</span><span class="token punctuation">)</span><span class="token punctuation">;</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> appState<span class="token operator">:</span> nextAppState <span class="token punctuation">}</span><span class="token punctuation">)</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> appState<span class="token punctuation">:</span> nextAppState <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><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">AppStateExample</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
appState<span class="token operator">:</span> AppState<span class="token punctuation">.</span>currentState
|
||||
appState<span class="token punctuation">:</span> AppState<span class="token punctuation">.</span>currentState
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -52,7 +52,7 @@
|
||||
<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'App has come to the foreground!'</span><span class="token punctuation">)</span><span class="token punctuation">;</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> appState<span class="token operator">:</span> nextAppState <span class="token punctuation">}</span><span class="token punctuation">)</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> appState<span class="token punctuation">:</span> nextAppState <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><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
|
||||
+15
-15
@@ -39,14 +39,14 @@
|
||||
</code></pre>
|
||||
<p>Merging data:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">let</span> UID123_object <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'Chris'</span><span class="token punctuation">,</span>
|
||||
age<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
|
||||
traits<span class="token operator">:</span> <span class="token punctuation">{</span> hair<span class="token operator">:</span> <span class="token string">'brown'</span><span class="token punctuation">,</span> eyes<span class="token operator">:</span> <span class="token string">'brown'</span> <span class="token punctuation">}</span>
|
||||
name<span class="token punctuation">:</span> <span class="token string">'Chris'</span><span class="token punctuation">,</span>
|
||||
age<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
|
||||
traits<span class="token punctuation">:</span> <span class="token punctuation">{</span> hair<span class="token punctuation">:</span> <span class="token string">'brown'</span><span class="token punctuation">,</span> eyes<span class="token punctuation">:</span> <span class="token string">'brown'</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// You only need to define what will be added or updated</span>
|
||||
<span class="token keyword">let</span> UID123_delta <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
age<span class="token operator">:</span> <span class="token number">31</span><span class="token punctuation">,</span>
|
||||
traits<span class="token operator">:</span> <span class="token punctuation">{</span> eyes<span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> shoe_size<span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span>
|
||||
age<span class="token punctuation">:</span> <span class="token number">31</span><span class="token punctuation">,</span>
|
||||
traits<span class="token punctuation">:</span> <span class="token punctuation">{</span> eyes<span class="token punctuation">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> shoe_size<span class="token punctuation">:</span> <span class="token number">10</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
AsyncStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span>
|
||||
@@ -72,28 +72,28 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<p>Multi merge example:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token comment">// first user, initial values</span>
|
||||
<span class="token keyword">let</span> UID234_object <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'Chris'</span><span class="token punctuation">,</span>
|
||||
age<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
|
||||
traits<span class="token operator">:</span> <span class="token punctuation">{</span> hair<span class="token operator">:</span> <span class="token string">'brown'</span><span class="token punctuation">,</span> eyes<span class="token operator">:</span> <span class="token string">'brown'</span> <span class="token punctuation">}</span>
|
||||
name<span class="token punctuation">:</span> <span class="token string">'Chris'</span><span class="token punctuation">,</span>
|
||||
age<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
|
||||
traits<span class="token punctuation">:</span> <span class="token punctuation">{</span> hair<span class="token punctuation">:</span> <span class="token string">'brown'</span><span class="token punctuation">,</span> eyes<span class="token punctuation">:</span> <span class="token string">'brown'</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// first user, delta values</span>
|
||||
<span class="token keyword">let</span> UID234_delta <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
age<span class="token operator">:</span> <span class="token number">31</span><span class="token punctuation">,</span>
|
||||
traits<span class="token operator">:</span> <span class="token punctuation">{</span> eyes<span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> shoe_size<span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span>
|
||||
age<span class="token punctuation">:</span> <span class="token number">31</span><span class="token punctuation">,</span>
|
||||
traits<span class="token punctuation">:</span> <span class="token punctuation">{</span> eyes<span class="token punctuation">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> shoe_size<span class="token punctuation">:</span> <span class="token number">10</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// second user, initial values</span>
|
||||
<span class="token keyword">let</span> UID345_object <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'Marge'</span><span class="token punctuation">,</span>
|
||||
age<span class="token operator">:</span> <span class="token number">25</span><span class="token punctuation">,</span>
|
||||
traits<span class="token operator">:</span> <span class="token punctuation">{</span> hair<span class="token operator">:</span> <span class="token string">'blonde'</span><span class="token punctuation">,</span> eyes<span class="token operator">:</span> <span class="token string">'blue'</span> <span class="token punctuation">}</span>
|
||||
name<span class="token punctuation">:</span> <span class="token string">'Marge'</span><span class="token punctuation">,</span>
|
||||
age<span class="token punctuation">:</span> <span class="token number">25</span><span class="token punctuation">,</span>
|
||||
traits<span class="token punctuation">:</span> <span class="token punctuation">{</span> hair<span class="token punctuation">:</span> <span class="token string">'blonde'</span><span class="token punctuation">,</span> eyes<span class="token punctuation">:</span> <span class="token string">'blue'</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// second user, delta values</span>
|
||||
<span class="token keyword">let</span> UID345_delta <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
age<span class="token operator">:</span> <span class="token number">26</span><span class="token punctuation">,</span>
|
||||
traits<span class="token operator">:</span> <span class="token punctuation">{</span> eyes<span class="token operator">:</span> <span class="token string">'green'</span><span class="token punctuation">,</span> shoe_size<span class="token operator">:</span> <span class="token number">6</span> <span class="token punctuation">}</span>
|
||||
age<span class="token punctuation">:</span> <span class="token number">26</span><span class="token punctuation">,</span>
|
||||
traits<span class="token punctuation">:</span> <span class="token punctuation">{</span> eyes<span class="token punctuation">:</span> <span class="token string">'green'</span><span class="token punctuation">,</span> shoe_size<span class="token punctuation">:</span> <span class="token number">6</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">let</span> multi_set_pairs <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||||
|
||||
@@ -39,14 +39,14 @@
|
||||
</code></pre>
|
||||
<p>Merging data:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">let</span> UID123_object <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'Chris'</span><span class="token punctuation">,</span>
|
||||
age<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
|
||||
traits<span class="token operator">:</span> <span class="token punctuation">{</span> hair<span class="token operator">:</span> <span class="token string">'brown'</span><span class="token punctuation">,</span> eyes<span class="token operator">:</span> <span class="token string">'brown'</span> <span class="token punctuation">}</span>
|
||||
name<span class="token punctuation">:</span> <span class="token string">'Chris'</span><span class="token punctuation">,</span>
|
||||
age<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
|
||||
traits<span class="token punctuation">:</span> <span class="token punctuation">{</span> hair<span class="token punctuation">:</span> <span class="token string">'brown'</span><span class="token punctuation">,</span> eyes<span class="token punctuation">:</span> <span class="token string">'brown'</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// You only need to define what will be added or updated</span>
|
||||
<span class="token keyword">let</span> UID123_delta <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
age<span class="token operator">:</span> <span class="token number">31</span><span class="token punctuation">,</span>
|
||||
traits<span class="token operator">:</span> <span class="token punctuation">{</span> eyes<span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> shoe_size<span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span>
|
||||
age<span class="token punctuation">:</span> <span class="token number">31</span><span class="token punctuation">,</span>
|
||||
traits<span class="token punctuation">:</span> <span class="token punctuation">{</span> eyes<span class="token punctuation">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> shoe_size<span class="token punctuation">:</span> <span class="token number">10</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
AsyncStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span>
|
||||
@@ -72,28 +72,28 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<p>Multi merge example:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token comment">// first user, initial values</span>
|
||||
<span class="token keyword">let</span> UID234_object <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'Chris'</span><span class="token punctuation">,</span>
|
||||
age<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
|
||||
traits<span class="token operator">:</span> <span class="token punctuation">{</span> hair<span class="token operator">:</span> <span class="token string">'brown'</span><span class="token punctuation">,</span> eyes<span class="token operator">:</span> <span class="token string">'brown'</span> <span class="token punctuation">}</span>
|
||||
name<span class="token punctuation">:</span> <span class="token string">'Chris'</span><span class="token punctuation">,</span>
|
||||
age<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
|
||||
traits<span class="token punctuation">:</span> <span class="token punctuation">{</span> hair<span class="token punctuation">:</span> <span class="token string">'brown'</span><span class="token punctuation">,</span> eyes<span class="token punctuation">:</span> <span class="token string">'brown'</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// first user, delta values</span>
|
||||
<span class="token keyword">let</span> UID234_delta <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
age<span class="token operator">:</span> <span class="token number">31</span><span class="token punctuation">,</span>
|
||||
traits<span class="token operator">:</span> <span class="token punctuation">{</span> eyes<span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> shoe_size<span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span>
|
||||
age<span class="token punctuation">:</span> <span class="token number">31</span><span class="token punctuation">,</span>
|
||||
traits<span class="token punctuation">:</span> <span class="token punctuation">{</span> eyes<span class="token punctuation">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> shoe_size<span class="token punctuation">:</span> <span class="token number">10</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// second user, initial values</span>
|
||||
<span class="token keyword">let</span> UID345_object <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'Marge'</span><span class="token punctuation">,</span>
|
||||
age<span class="token operator">:</span> <span class="token number">25</span><span class="token punctuation">,</span>
|
||||
traits<span class="token operator">:</span> <span class="token punctuation">{</span> hair<span class="token operator">:</span> <span class="token string">'blonde'</span><span class="token punctuation">,</span> eyes<span class="token operator">:</span> <span class="token string">'blue'</span> <span class="token punctuation">}</span>
|
||||
name<span class="token punctuation">:</span> <span class="token string">'Marge'</span><span class="token punctuation">,</span>
|
||||
age<span class="token punctuation">:</span> <span class="token number">25</span><span class="token punctuation">,</span>
|
||||
traits<span class="token punctuation">:</span> <span class="token punctuation">{</span> hair<span class="token punctuation">:</span> <span class="token string">'blonde'</span><span class="token punctuation">,</span> eyes<span class="token punctuation">:</span> <span class="token string">'blue'</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// second user, delta values</span>
|
||||
<span class="token keyword">let</span> UID345_delta <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
age<span class="token operator">:</span> <span class="token number">26</span><span class="token punctuation">,</span>
|
||||
traits<span class="token operator">:</span> <span class="token punctuation">{</span> eyes<span class="token operator">:</span> <span class="token string">'green'</span><span class="token punctuation">,</span> shoe_size<span class="token operator">:</span> <span class="token number">6</span> <span class="token punctuation">}</span>
|
||||
age<span class="token punctuation">:</span> <span class="token number">26</span><span class="token punctuation">,</span>
|
||||
traits<span class="token punctuation">:</span> <span class="token punctuation">{</span> eyes<span class="token punctuation">:</span> <span class="token string">'green'</span><span class="token punctuation">,</span> shoe_size<span class="token punctuation">:</span> <span class="token number">6</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">let</span> multi_set_pairs <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||||
|
||||
@@ -153,19 +153,19 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> TVEventHandler <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'TVEventHandler'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">Game2048</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
_tvEventHandler<span class="token operator">:</span> any<span class="token punctuation">;</span>
|
||||
_tvEventHandler<span class="token punctuation">:</span> any<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">_enableTVEventHandler</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_tvEventHandler <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">TVEventHandler</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_tvEventHandler<span class="token punctuation">.</span><span class="token function">enable</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">cmp<span class="token punctuation">,</span> evt</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>evt <span class="token operator">&&</span> evt<span class="token punctuation">.</span>eventType <span class="token operator">===</span> <span class="token string">'right'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
cmp<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>board<span class="token operator">:</span> cmp<span class="token punctuation">.</span>state<span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">move</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
cmp<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>board<span class="token punctuation">:</span> cmp<span class="token punctuation">.</span>state<span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">move</span><span class="token punctuation">(</span><span class="token number">2</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">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>evt <span class="token operator">&&</span> evt<span class="token punctuation">.</span>eventType <span class="token operator">===</span> <span class="token string">'up'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
cmp<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>board<span class="token operator">:</span> cmp<span class="token punctuation">.</span>state<span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">move</span><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>
|
||||
cmp<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>board<span class="token punctuation">:</span> cmp<span class="token punctuation">.</span>state<span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">move</span><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 punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>evt <span class="token operator">&&</span> evt<span class="token punctuation">.</span>eventType <span class="token operator">===</span> <span class="token string">'left'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
cmp<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>board<span class="token operator">:</span> cmp<span class="token punctuation">.</span>state<span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">move</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>
|
||||
cmp<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>board<span class="token punctuation">:</span> cmp<span class="token punctuation">.</span>state<span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">move</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 keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>evt <span class="token operator">&&</span> evt<span class="token punctuation">.</span>eventType <span class="token operator">===</span> <span class="token string">'down'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
cmp<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>board<span class="token operator">:</span> cmp<span class="token punctuation">.</span>state<span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">move</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
cmp<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>board<span class="token punctuation">:</span> cmp<span class="token punctuation">.</span>state<span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">move</span><span class="token punctuation">(</span><span class="token number">3</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">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>evt <span class="token operator">&&</span> evt<span class="token punctuation">.</span>eventType <span class="token operator">===</span> <span class="token string">'playPause'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
cmp<span class="token punctuation">.</span><span class="token function">restartGame</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
@@ -153,19 +153,19 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> TVEventHandler <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'TVEventHandler'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">Game2048</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
_tvEventHandler<span class="token operator">:</span> any<span class="token punctuation">;</span>
|
||||
_tvEventHandler<span class="token punctuation">:</span> any<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">_enableTVEventHandler</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_tvEventHandler <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">TVEventHandler</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_tvEventHandler<span class="token punctuation">.</span><span class="token function">enable</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">cmp<span class="token punctuation">,</span> evt</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>evt <span class="token operator">&&</span> evt<span class="token punctuation">.</span>eventType <span class="token operator">===</span> <span class="token string">'right'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
cmp<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>board<span class="token operator">:</span> cmp<span class="token punctuation">.</span>state<span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">move</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
cmp<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>board<span class="token punctuation">:</span> cmp<span class="token punctuation">.</span>state<span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">move</span><span class="token punctuation">(</span><span class="token number">2</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">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>evt <span class="token operator">&&</span> evt<span class="token punctuation">.</span>eventType <span class="token operator">===</span> <span class="token string">'up'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
cmp<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>board<span class="token operator">:</span> cmp<span class="token punctuation">.</span>state<span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">move</span><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>
|
||||
cmp<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>board<span class="token punctuation">:</span> cmp<span class="token punctuation">.</span>state<span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">move</span><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 punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>evt <span class="token operator">&&</span> evt<span class="token punctuation">.</span>eventType <span class="token operator">===</span> <span class="token string">'left'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
cmp<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>board<span class="token operator">:</span> cmp<span class="token punctuation">.</span>state<span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">move</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>
|
||||
cmp<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>board<span class="token punctuation">:</span> cmp<span class="token punctuation">.</span>state<span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">move</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 keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>evt <span class="token operator">&&</span> evt<span class="token punctuation">.</span>eventType <span class="token operator">===</span> <span class="token string">'down'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
cmp<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>board<span class="token operator">:</span> cmp<span class="token punctuation">.</span>state<span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">move</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
cmp<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>board<span class="token punctuation">:</span> cmp<span class="token punctuation">.</span>state<span class="token punctuation">.</span>board<span class="token punctuation">.</span><span class="token function">move</span><span class="token punctuation">(</span><span class="token number">3</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">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>evt <span class="token operator">&&</span> evt<span class="token punctuation">.</span>eventType <span class="token operator">===</span> <span class="token string">'playPause'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
cmp<span class="token punctuation">.</span><span class="token function">restartGame</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
@@ -91,7 +91,7 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
|
||||
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">ImageBrowserApp</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">renderImage</span><span class="token punctuation">(</span><span class="token parameter">imgURI</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> uri<span class="token operator">:</span> imgURI <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> uri<span class="token punctuation">:</span> imgURI <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>images<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>renderImage<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -91,7 +91,7 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
|
||||
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">ImageBrowserApp</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">renderImage</span><span class="token punctuation">(</span><span class="token parameter">imgURI</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> uri<span class="token operator">:</span> imgURI <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> uri<span class="token punctuation">:</span> imgURI <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>images<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>renderImage<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -174,7 +174,7 @@
|
||||
<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">WebView</span></span>
|
||||
<span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">this</span><span class="token punctuation">.</span><span class="token attr-value">props</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">nativeConfig</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> component<span class="token operator">:</span> RCTCustomWebView <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">nativeConfig</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> component<span class="token punctuation">:</span> RCTCustomWebView <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
@@ -192,12 +192,12 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">CustomWebView</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">static</span> propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span>WebView<span class="token punctuation">.</span>propTypes<span class="token punctuation">,</span>
|
||||
finalUrl<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">,</span>
|
||||
onNavigationCompleted<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>func
|
||||
finalUrl<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">,</span>
|
||||
onNavigationCompleted<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>func
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">static</span> defaultProps <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
finalUrl<span class="token operator">:</span> <span class="token string">'about:blank'</span>
|
||||
finalUrl<span class="token punctuation">:</span> <span class="token string">'about:blank'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function-variable function">_onNavigationCompleted</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
@@ -210,10 +210,10 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">WebView</span></span>
|
||||
<span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">this</span><span class="token punctuation">.</span><span class="token attr-value">props</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">nativeConfig</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
component<span class="token operator">:</span> RCTCustomWebView<span class="token punctuation">,</span>
|
||||
props<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
finalUrl<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>finalUrl<span class="token punctuation">,</span>
|
||||
onNavigationCompleted<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_onNavigationCompleted
|
||||
component<span class="token punctuation">:</span> RCTCustomWebView<span class="token punctuation">,</span>
|
||||
props<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
finalUrl<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>finalUrl<span class="token punctuation">,</span>
|
||||
onNavigationCompleted<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_onNavigationCompleted
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
@@ -228,9 +228,9 @@
|
||||
CustomWebView<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span>WebView<span class="token punctuation">.</span>extraNativeComponentConfig<span class="token punctuation">,</span>
|
||||
nativeOnly<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
nativeOnly<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span>WebView<span class="token punctuation">.</span>extraNativeComponentConfig<span class="token punctuation">.</span>nativeOnly<span class="token punctuation">,</span>
|
||||
onScrollToBottom<span class="token operator">:</span> <span class="token boolean">true</span>
|
||||
onScrollToBottom<span class="token punctuation">:</span> <span class="token boolean">true</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -174,7 +174,7 @@
|
||||
<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">WebView</span></span>
|
||||
<span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">this</span><span class="token punctuation">.</span><span class="token attr-value">props</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">nativeConfig</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> component<span class="token operator">:</span> RCTCustomWebView <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">nativeConfig</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> component<span class="token punctuation">:</span> RCTCustomWebView <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
@@ -192,12 +192,12 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">CustomWebView</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">static</span> propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span>WebView<span class="token punctuation">.</span>propTypes<span class="token punctuation">,</span>
|
||||
finalUrl<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">,</span>
|
||||
onNavigationCompleted<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>func
|
||||
finalUrl<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">,</span>
|
||||
onNavigationCompleted<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>func
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">static</span> defaultProps <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
finalUrl<span class="token operator">:</span> <span class="token string">'about:blank'</span>
|
||||
finalUrl<span class="token punctuation">:</span> <span class="token string">'about:blank'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function-variable function">_onNavigationCompleted</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
@@ -210,10 +210,10 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">WebView</span></span>
|
||||
<span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">this</span><span class="token punctuation">.</span><span class="token attr-value">props</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">nativeConfig</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
component<span class="token operator">:</span> RCTCustomWebView<span class="token punctuation">,</span>
|
||||
props<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
finalUrl<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>finalUrl<span class="token punctuation">,</span>
|
||||
onNavigationCompleted<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_onNavigationCompleted
|
||||
component<span class="token punctuation">:</span> RCTCustomWebView<span class="token punctuation">,</span>
|
||||
props<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
finalUrl<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>finalUrl<span class="token punctuation">,</span>
|
||||
onNavigationCompleted<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_onNavigationCompleted
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
@@ -228,9 +228,9 @@
|
||||
CustomWebView<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span>WebView<span class="token punctuation">.</span>extraNativeComponentConfig<span class="token punctuation">,</span>
|
||||
nativeOnly<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
nativeOnly<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span>WebView<span class="token punctuation">.</span>extraNativeComponentConfig<span class="token punctuation">.</span>nativeOnly<span class="token punctuation">,</span>
|
||||
onScrollToBottom<span class="token operator">:</span> <span class="token boolean">true</span>
|
||||
onScrollToBottom<span class="token punctuation">:</span> <span class="token boolean">true</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -143,8 +143,8 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">WebView</span></span>
|
||||
<span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">this</span><span class="token punctuation">.</span><span class="token attr-value">props</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">nativeConfig</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
component<span class="token operator">:</span> RCTCustomWebView<span class="token punctuation">,</span>
|
||||
viewManager<span class="token operator">:</span> CustomWebViewManager
|
||||
component<span class="token punctuation">:</span> RCTCustomWebView<span class="token punctuation">,</span>
|
||||
viewManager<span class="token punctuation">:</span> CustomWebViewManager
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -163,12 +163,12 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">CustomWebView</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">static</span> propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span>WebView<span class="token punctuation">.</span>propTypes<span class="token punctuation">,</span>
|
||||
finalUrl<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">,</span>
|
||||
onNavigationCompleted<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>func
|
||||
finalUrl<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">,</span>
|
||||
onNavigationCompleted<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>func
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">static</span> defaultProps <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
finalUrl<span class="token operator">:</span> <span class="token string">'about:blank'</span>
|
||||
finalUrl<span class="token punctuation">:</span> <span class="token string">'about:blank'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function-variable function">_onNavigationCompleted</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
@@ -181,12 +181,12 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">WebView</span></span>
|
||||
<span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">this</span><span class="token punctuation">.</span><span class="token attr-value">props</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">nativeConfig</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
component<span class="token operator">:</span> RCTCustomWebView<span class="token punctuation">,</span>
|
||||
props<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
finalUrl<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>finalUrl<span class="token punctuation">,</span>
|
||||
onNavigationCompleted<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_onNavigationCompleted
|
||||
component<span class="token punctuation">:</span> RCTCustomWebView<span class="token punctuation">,</span>
|
||||
props<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
finalUrl<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>finalUrl<span class="token punctuation">,</span>
|
||||
onNavigationCompleted<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_onNavigationCompleted
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
viewManager<span class="token operator">:</span> CustomWebViewManager
|
||||
viewManager<span class="token punctuation">:</span> CustomWebViewManager
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -200,9 +200,9 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
CustomWebView<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span>WebView<span class="token punctuation">.</span>extraNativeComponentConfig<span class="token punctuation">,</span>
|
||||
nativeOnly<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
nativeOnly<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span>WebView<span class="token punctuation">.</span>extraNativeComponentConfig<span class="token punctuation">.</span>nativeOnly<span class="token punctuation">,</span>
|
||||
onScrollToBottom<span class="token operator">:</span> <span class="token boolean">true</span>
|
||||
onScrollToBottom<span class="token punctuation">:</span> <span class="token boolean">true</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -143,8 +143,8 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">WebView</span></span>
|
||||
<span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">this</span><span class="token punctuation">.</span><span class="token attr-value">props</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">nativeConfig</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
component<span class="token operator">:</span> RCTCustomWebView<span class="token punctuation">,</span>
|
||||
viewManager<span class="token operator">:</span> CustomWebViewManager
|
||||
component<span class="token punctuation">:</span> RCTCustomWebView<span class="token punctuation">,</span>
|
||||
viewManager<span class="token punctuation">:</span> CustomWebViewManager
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -163,12 +163,12 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">CustomWebView</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">static</span> propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span>WebView<span class="token punctuation">.</span>propTypes<span class="token punctuation">,</span>
|
||||
finalUrl<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">,</span>
|
||||
onNavigationCompleted<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>func
|
||||
finalUrl<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">,</span>
|
||||
onNavigationCompleted<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>func
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">static</span> defaultProps <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
finalUrl<span class="token operator">:</span> <span class="token string">'about:blank'</span>
|
||||
finalUrl<span class="token punctuation">:</span> <span class="token string">'about:blank'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function-variable function">_onNavigationCompleted</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
@@ -181,12 +181,12 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">WebView</span></span>
|
||||
<span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">this</span><span class="token punctuation">.</span><span class="token attr-value">props</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">nativeConfig</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
component<span class="token operator">:</span> RCTCustomWebView<span class="token punctuation">,</span>
|
||||
props<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
finalUrl<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>finalUrl<span class="token punctuation">,</span>
|
||||
onNavigationCompleted<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_onNavigationCompleted
|
||||
component<span class="token punctuation">:</span> RCTCustomWebView<span class="token punctuation">,</span>
|
||||
props<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
finalUrl<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>finalUrl<span class="token punctuation">,</span>
|
||||
onNavigationCompleted<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_onNavigationCompleted
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
viewManager<span class="token operator">:</span> CustomWebViewManager
|
||||
viewManager<span class="token punctuation">:</span> CustomWebViewManager
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -200,9 +200,9 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
CustomWebView<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span>WebView<span class="token punctuation">.</span>extraNativeComponentConfig<span class="token punctuation">,</span>
|
||||
nativeOnly<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
nativeOnly<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span>WebView<span class="token punctuation">.</span>extraNativeComponentConfig<span class="token punctuation">.</span>nativeOnly<span class="token punctuation">,</span>
|
||||
onScrollToBottom<span class="token operator">:</span> <span class="token boolean">true</span>
|
||||
onScrollToBottom<span class="token punctuation">:</span> <span class="token boolean">true</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -77,13 +77,13 @@
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" 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>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="set"></a><a href="#set" 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>set()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code.</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" 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>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>Initial dimensions are set before <code>runApplication</code> is called so they should be available before any other require's are run, but may be updated later.</p>
|
||||
<p>Note: Although dimensions are available immediately, they may change (e.g due to device rotation) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a <code>StyleSheet</code>).</p>
|
||||
|
||||
@@ -77,13 +77,13 @@
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" 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>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="set"></a><a href="#set" 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>set()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code.</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" 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>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>Initial dimensions are set before <code>runApplication</code> is called so they should be available before any other require's are run, but may be updated later.</p>
|
||||
<p>Note: Although dimensions are available immediately, they may change (e.g due to device rotation) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a <code>StyleSheet</code>).</p>
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">setOpacityTo</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// Redacted: animation related code</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>refs<span class="token punctuation">[</span><span class="token constant">CHILD_REF</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">setNativeProps</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token operator">:</span> value
|
||||
opacity<span class="token punctuation">:</span> value
|
||||
<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>
|
||||
</code></pre>
|
||||
@@ -92,14 +92,14 @@
|
||||
<p>Let'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>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><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 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 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 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><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 punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></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>myButtonOpacity<span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">onPressOut</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></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>myButtonOpacity<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><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">View</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><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">,</span> <span class="token punctuation">{</span>opacity<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>myButtonOpacity<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
<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 punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></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>myButtonOpacity<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">onPressOut</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></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>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><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">View</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><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">,</span> <span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>myButtonOpacity<span class="token punctuation">}</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">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Press me!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</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">View</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>
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">setOpacityTo</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// Redacted: animation related code</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>refs<span class="token punctuation">[</span><span class="token constant">CHILD_REF</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">setNativeProps</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token operator">:</span> value
|
||||
opacity<span class="token punctuation">:</span> value
|
||||
<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>
|
||||
</code></pre>
|
||||
@@ -92,14 +92,14 @@
|
||||
<p>Let'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>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><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 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 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 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><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 punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></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>myButtonOpacity<span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">onPressOut</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></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>myButtonOpacity<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><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">View</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><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">,</span> <span class="token punctuation">{</span>opacity<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>myButtonOpacity<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
<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 punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></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>myButtonOpacity<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">onPressOut</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></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>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><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">View</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><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">,</span> <span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>myButtonOpacity<span class="token punctuation">}</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">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Press me!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</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">View</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>
|
||||
|
||||
+20
-20
@@ -27,7 +27,7 @@
|
||||
<p>If you need section support, use <a href="/docs/0.10/sectionlist"><code><SectionList></code></a>.</p>
|
||||
<p>Minimal Example:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">FlatList</span></span>
|
||||
<span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'a'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'b'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> key<span class="token punctuation">:</span> <span class="token string">'a'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token punctuation">:</span> <span class="token string">'b'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> item <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
@@ -43,11 +43,11 @@
|
||||
<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">const</span> textColor <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>selected <span class="token operator">?</span> <span class="token string">'red'</span> <span class="token operator">:</span> <span class="token string">'black'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> textColor <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>selected <span class="token operator">?</span> <span class="token string">'red'</span> <span class="token punctuation">:</span> <span class="token string">'black'</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>_onPress<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">View</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">Text</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><span class="token punctuation">{</span> color<span class="token operator">:</span> textColor <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">Text</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><span class="token punctuation">{</span> color<span class="token punctuation">:</span> textColor <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 punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>title<span class="token punctuation">}</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">Text</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">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@@ -57,11 +57,11 @@
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">MultiSelectList</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>PureComponent</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span> selected<span class="token operator">:</span> <span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> Map<span class="token operator"><</span>string<span class="token punctuation">,</span> boolean<span class="token operator">></span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span> selected<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> Map<span class="token operator"><</span>string<span class="token punctuation">,</span> boolean<span class="token operator">></span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function-variable function">_keyExtractor</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>id<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function-variable function">_onPressItem</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">id<span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token function-variable function">_onPressItem</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// updater functions are preferred for transactional updates</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><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// copy the map rather than modifying state.</span>
|
||||
@@ -148,7 +148,7 @@
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" 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>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="props-1"></a><a href="#props-1" 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>Props</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="renderitem"></a><a href="#renderitem" 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>renderItem</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">renderItem</span><span class="token punctuation">(</span><span class="token punctuation">{</span> item<span class="token operator">:</span> object<span class="token punctuation">,</span> index<span class="token operator">:</span> number<span class="token punctuation">,</span> separators<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function-variable function">highlight</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">,</span> <span class="token function-variable function">unhighlight</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">,</span> <span class="token function-variable function">updateProps</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">select<span class="token operator">:</span> string<span class="token punctuation">,</span> newProps<span class="token operator">:</span> object</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">[</span>element<span class="token punctuation">]</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">renderItem</span><span class="token punctuation">(</span><span class="token punctuation">{</span> item<span class="token punctuation">:</span> object<span class="token punctuation">,</span> index<span class="token punctuation">:</span> number<span class="token punctuation">,</span> separators<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token function-variable function">highlight</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">,</span> <span class="token function-variable function">unhighlight</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">,</span> <span class="token function-variable function">updateProps</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">select<span class="token punctuation">:</span> string<span class="token punctuation">,</span> newProps<span class="token punctuation">:</span> object</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>element<span class="token punctuation">]</span>
|
||||
</code></pre>
|
||||
<p>Takes an item from <code>data</code> and renders it into the list.</p>
|
||||
<p>Provides additional metadata like <code>index</code> if you need it, as well as a more generic <code>separators.updateProps</code> function which let's you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common <code>highlight</code> and <code>unhighlight</code> (which set the <code>highlighted: boolean</code> prop) are insufficient for your use case.</p>
|
||||
@@ -163,15 +163,15 @@
|
||||
<p>Example usage:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">FlatList</span></span>
|
||||
<span class="token attr-name">ItemSeparatorComponent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Platform<span class="token punctuation">.</span><span class="token constant">OS</span> <span class="token operator">!==</span> <span class="token string">'android'</span> <span class="token operator">&&</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>highlighted<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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><span class="token punctuation">[</span>style<span class="token punctuation">.</span>separator<span class="token punctuation">,</span> highlighted <span class="token operator">&&</span> <span class="token punctuation">{</span>marginLeft<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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><span class="token punctuation">[</span>style<span class="token punctuation">.</span>separator<span class="token punctuation">,</span> highlighted <span class="token operator">&&</span> <span class="token punctuation">{</span>marginLeft<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> <span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span>title<span class="token operator">:</span> <span class="token string">'Title Text'</span><span class="token punctuation">,</span> key<span class="token operator">:</span> <span class="token string">'item1'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">'Title Text'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'item1'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>item<span class="token punctuation">,</span> separators<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TouchableHighlight</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 punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_onPress</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">onShowUnderlay</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>separators<span class="token punctuation">.</span>highlight<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">onHideUnderlay</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>separators<span class="token punctuation">.</span>unhighlight<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">View</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><span class="token punctuation">{</span>backgroundColor<span class="token operator">:</span> <span class="token string">'white'</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">View</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><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'white'</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">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</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">View</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">TouchableHighlight</span></span><span class="token punctuation">></span></span>
|
||||
@@ -257,11 +257,11 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getitemlayout"></a><a href="#getitemlayout" 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>getItemLayout</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>length<span class="token operator">:</span> number<span class="token punctuation">,</span> offset<span class="token operator">:</span> number<span class="token punctuation">,</span> index<span class="token operator">:</span> number<span class="token punctuation">}</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>length<span class="token punctuation">:</span> number<span class="token punctuation">,</span> offset<span class="token punctuation">:</span> number<span class="token punctuation">,</span> index<span class="token punctuation">:</span> number<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p><code>getItemLayout</code> is an optional optimization that let us skip measurement of dynamic content if you know the height of items a priori. <code>getItemLayout</code> is the most efficient if you have fixed height items, for example:</p>
|
||||
<pre><code class="hljs css language-jsx"> getItemLayout<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token punctuation">{</span>length<span class="token operator">:</span> <span class="token constant">ITEM_HEIGHT</span><span class="token punctuation">,</span> offset<span class="token operator">:</span> <span class="token constant">ITEM_HEIGHT</span> <span class="token operator">*</span> index<span class="token punctuation">,</span> index<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">{</span>length<span class="token punctuation">:</span> <span class="token constant">ITEM_HEIGHT</span><span class="token punctuation">,</span> offset<span class="token punctuation">:</span> <span class="token constant">ITEM_HEIGHT</span> <span class="token operator">*</span> index<span class="token punctuation">,</span> index<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Adding <code>getItemLayout</code> can be a great performance boost for lists of several hundred items. Remember to include separator length (height or width) in your offset calculation if you specify <code>ItemSeparatorComponent</code>.</p>
|
||||
@@ -319,7 +319,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="keyextractor"></a><a href="#keyextractor" 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>keyExtractor</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">item<span class="token operator">:</span> object<span class="token punctuation">,</span> index<span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token operator">=></span> string<span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">:</span> object<span class="token punctuation">,</span> index<span class="token punctuation">:</span> number</span><span class="token punctuation">)</span> <span class="token operator">=></span> string<span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks <code>item.key</code>, then falls back to using the index, like React does.</p>
|
||||
<table>
|
||||
@@ -343,7 +343,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onendreached"></a><a href="#onendreached" 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>onEndReached</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">info<span class="token operator">:</span> <span class="token punctuation">{</span>distanceFromEnd<span class="token operator">:</span> number<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">info<span class="token punctuation">:</span> <span class="token punctuation">{</span>distanceFromEnd<span class="token punctuation">:</span> number<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span>
|
||||
</code></pre>
|
||||
<p>Called once when the scroll position gets within <code>onEndReachedThreshold</code> of the rendered content.</p>
|
||||
<table>
|
||||
@@ -380,9 +380,9 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onviewableitemschanged"></a><a href="#onviewableitemschanged" 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>onViewableItemsChanged</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">info<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
viewableItems<span class="token operator">:</span> array<span class="token punctuation">,</span>
|
||||
changed<span class="token operator">:</span> array<span class="token punctuation">,</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">info<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
viewableItems<span class="token punctuation">:</span> array<span class="token punctuation">,</span>
|
||||
changed<span class="token punctuation">:</span> array<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span>
|
||||
</code></pre>
|
||||
<p>Called when the viewability of rows changes, as defined by the <code>viewabilityConfig</code> prop.</p>
|
||||
@@ -465,24 +465,24 @@
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="scrolltoend"></a><a href="#scrolltoend" 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>scrollToEnd()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToEnd</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">[</span>params<span class="token punctuation">]</span><span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToEnd</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">[</span>params<span class="token punctuation">]</span><span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Scrolls to the end of the content. May be janky without <code>getItemLayout</code> prop.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="scrolltoindex"></a><a href="#scrolltoindex" 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>scrollToIndex()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToIndex</span><span class="token punctuation">(</span><span class="token punctuation">(</span>params<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToIndex</span><span class="token punctuation">(</span><span class="token punctuation">(</span>params<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Scrolls to the item at the specified index such that it is positioned in the viewable area such that <code>viewPosition</code> 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle. <code>viewOffset</code> is a fixed number of pixels to offset the final target position.</p>
|
||||
<p>Note: cannot scroll to locations outside the render window without specifying the <code>getItemLayout</code> prop.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="scrolltoitem"></a><a href="#scrolltoitem" 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>scrollToItem()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToItem</span><span class="token punctuation">(</span><span class="token punctuation">(</span>params<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToItem</span><span class="token punctuation">(</span><span class="token punctuation">(</span>params<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Requires linear scan through data - use <code>scrollToIndex</code> instead if possible.</p>
|
||||
<p>Note: cannot scroll to locations outside the render window without specifying the <code>getItemLayout</code> prop.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="scrolltooffset"></a><a href="#scrolltooffset" 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>scrollToOffset()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToOffset</span><span class="token punctuation">(</span><span class="token punctuation">(</span>params<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToOffset</span><span class="token punctuation">(</span><span class="token punctuation">(</span>params<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Scroll to a specific content pixel offset in the list.</p>
|
||||
<p>Check out <a href="/docs/0.10/virtualizedlist#scrolltooffset">scrollToOffset</a> of VirtualizedList</p>
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
<p>If you need section support, use <a href="/docs/0.10/sectionlist"><code><SectionList></code></a>.</p>
|
||||
<p>Minimal Example:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">FlatList</span></span>
|
||||
<span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'a'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> <span class="token string">'b'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span> key<span class="token punctuation">:</span> <span class="token string">'a'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> key<span class="token punctuation">:</span> <span class="token string">'b'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> item <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
@@ -43,11 +43,11 @@
|
||||
<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">const</span> textColor <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>selected <span class="token operator">?</span> <span class="token string">'red'</span> <span class="token operator">:</span> <span class="token string">'black'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> textColor <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>selected <span class="token operator">?</span> <span class="token string">'red'</span> <span class="token punctuation">:</span> <span class="token string">'black'</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>_onPress<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">View</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">Text</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><span class="token punctuation">{</span> color<span class="token operator">:</span> textColor <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">Text</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><span class="token punctuation">{</span> color<span class="token punctuation">:</span> textColor <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 punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>title<span class="token punctuation">}</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">Text</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">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@@ -57,11 +57,11 @@
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">MultiSelectList</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>PureComponent</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span> selected<span class="token operator">:</span> <span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> Map<span class="token operator"><</span>string<span class="token punctuation">,</span> boolean<span class="token operator">></span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span> selected<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> Map<span class="token operator"><</span>string<span class="token punctuation">,</span> boolean<span class="token operator">></span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function-variable function">_keyExtractor</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>id<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function-variable function">_onPressItem</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">id<span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token function-variable function">_onPressItem</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// updater functions are preferred for transactional updates</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><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// copy the map rather than modifying state.</span>
|
||||
@@ -148,7 +148,7 @@
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" 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>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="props-1"></a><a href="#props-1" 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>Props</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="renderitem"></a><a href="#renderitem" 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>renderItem</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">renderItem</span><span class="token punctuation">(</span><span class="token punctuation">{</span> item<span class="token operator">:</span> object<span class="token punctuation">,</span> index<span class="token operator">:</span> number<span class="token punctuation">,</span> separators<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function-variable function">highlight</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">,</span> <span class="token function-variable function">unhighlight</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">,</span> <span class="token function-variable function">updateProps</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">select<span class="token operator">:</span> string<span class="token punctuation">,</span> newProps<span class="token operator">:</span> object</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">[</span>element<span class="token punctuation">]</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">renderItem</span><span class="token punctuation">(</span><span class="token punctuation">{</span> item<span class="token punctuation">:</span> object<span class="token punctuation">,</span> index<span class="token punctuation">:</span> number<span class="token punctuation">,</span> separators<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token function-variable function">highlight</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">,</span> <span class="token function-variable function">unhighlight</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">,</span> <span class="token function-variable function">updateProps</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">select<span class="token punctuation">:</span> string<span class="token punctuation">,</span> newProps<span class="token punctuation">:</span> object</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>element<span class="token punctuation">]</span>
|
||||
</code></pre>
|
||||
<p>Takes an item from <code>data</code> and renders it into the list.</p>
|
||||
<p>Provides additional metadata like <code>index</code> if you need it, as well as a more generic <code>separators.updateProps</code> function which let's you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common <code>highlight</code> and <code>unhighlight</code> (which set the <code>highlighted: boolean</code> prop) are insufficient for your use case.</p>
|
||||
@@ -163,15 +163,15 @@
|
||||
<p>Example usage:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">FlatList</span></span>
|
||||
<span class="token attr-name">ItemSeparatorComponent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Platform<span class="token punctuation">.</span><span class="token constant">OS</span> <span class="token operator">!==</span> <span class="token string">'android'</span> <span class="token operator">&&</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>highlighted<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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><span class="token punctuation">[</span>style<span class="token punctuation">.</span>separator<span class="token punctuation">,</span> highlighted <span class="token operator">&&</span> <span class="token punctuation">{</span>marginLeft<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</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><span class="token punctuation">[</span>style<span class="token punctuation">.</span>separator<span class="token punctuation">,</span> highlighted <span class="token operator">&&</span> <span class="token punctuation">{</span>marginLeft<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> <span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span>title<span class="token operator">:</span> <span class="token string">'Title Text'</span><span class="token punctuation">,</span> key<span class="token operator">:</span> <span class="token string">'item1'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">'Title Text'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'item1'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>item<span class="token punctuation">,</span> separators<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TouchableHighlight</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 punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_onPress</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">onShowUnderlay</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>separators<span class="token punctuation">.</span>highlight<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">onHideUnderlay</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>separators<span class="token punctuation">.</span>unhighlight<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">View</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><span class="token punctuation">{</span>backgroundColor<span class="token operator">:</span> <span class="token string">'white'</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">View</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><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'white'</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">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</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">View</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">TouchableHighlight</span></span><span class="token punctuation">></span></span>
|
||||
@@ -257,11 +257,11 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="getitemlayout"></a><a href="#getitemlayout" 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>getItemLayout</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>length<span class="token operator">:</span> number<span class="token punctuation">,</span> offset<span class="token operator">:</span> number<span class="token punctuation">,</span> index<span class="token operator">:</span> number<span class="token punctuation">}</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>length<span class="token punctuation">:</span> number<span class="token punctuation">,</span> offset<span class="token punctuation">:</span> number<span class="token punctuation">,</span> index<span class="token punctuation">:</span> number<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p><code>getItemLayout</code> is an optional optimization that let us skip measurement of dynamic content if you know the height of items a priori. <code>getItemLayout</code> is the most efficient if you have fixed height items, for example:</p>
|
||||
<pre><code class="hljs css language-jsx"> getItemLayout<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token punctuation">{</span>length<span class="token operator">:</span> <span class="token constant">ITEM_HEIGHT</span><span class="token punctuation">,</span> offset<span class="token operator">:</span> <span class="token constant">ITEM_HEIGHT</span> <span class="token operator">*</span> index<span class="token punctuation">,</span> index<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">{</span>length<span class="token punctuation">:</span> <span class="token constant">ITEM_HEIGHT</span><span class="token punctuation">,</span> offset<span class="token punctuation">:</span> <span class="token constant">ITEM_HEIGHT</span> <span class="token operator">*</span> index<span class="token punctuation">,</span> index<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Adding <code>getItemLayout</code> can be a great performance boost for lists of several hundred items. Remember to include separator length (height or width) in your offset calculation if you specify <code>ItemSeparatorComponent</code>.</p>
|
||||
@@ -319,7 +319,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="keyextractor"></a><a href="#keyextractor" 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>keyExtractor</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">item<span class="token operator">:</span> object<span class="token punctuation">,</span> index<span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token operator">=></span> string<span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">:</span> object<span class="token punctuation">,</span> index<span class="token punctuation">:</span> number</span><span class="token punctuation">)</span> <span class="token operator">=></span> string<span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks <code>item.key</code>, then falls back to using the index, like React does.</p>
|
||||
<table>
|
||||
@@ -343,7 +343,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onendreached"></a><a href="#onendreached" 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>onEndReached</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">info<span class="token operator">:</span> <span class="token punctuation">{</span>distanceFromEnd<span class="token operator">:</span> number<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">info<span class="token punctuation">:</span> <span class="token punctuation">{</span>distanceFromEnd<span class="token punctuation">:</span> number<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span>
|
||||
</code></pre>
|
||||
<p>Called once when the scroll position gets within <code>onEndReachedThreshold</code> of the rendered content.</p>
|
||||
<table>
|
||||
@@ -380,9 +380,9 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onviewableitemschanged"></a><a href="#onviewableitemschanged" 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>onViewableItemsChanged</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">info<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
viewableItems<span class="token operator">:</span> array<span class="token punctuation">,</span>
|
||||
changed<span class="token operator">:</span> array<span class="token punctuation">,</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">info<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
viewableItems<span class="token punctuation">:</span> array<span class="token punctuation">,</span>
|
||||
changed<span class="token punctuation">:</span> array<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span>
|
||||
</code></pre>
|
||||
<p>Called when the viewability of rows changes, as defined by the <code>viewabilityConfig</code> prop.</p>
|
||||
@@ -465,24 +465,24 @@
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="scrolltoend"></a><a href="#scrolltoend" 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>scrollToEnd()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToEnd</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">[</span>params<span class="token punctuation">]</span><span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToEnd</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">[</span>params<span class="token punctuation">]</span><span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Scrolls to the end of the content. May be janky without <code>getItemLayout</code> prop.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="scrolltoindex"></a><a href="#scrolltoindex" 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>scrollToIndex()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToIndex</span><span class="token punctuation">(</span><span class="token punctuation">(</span>params<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToIndex</span><span class="token punctuation">(</span><span class="token punctuation">(</span>params<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Scrolls to the item at the specified index such that it is positioned in the viewable area such that <code>viewPosition</code> 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle. <code>viewOffset</code> is a fixed number of pixels to offset the final target position.</p>
|
||||
<p>Note: cannot scroll to locations outside the render window without specifying the <code>getItemLayout</code> prop.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="scrolltoitem"></a><a href="#scrolltoitem" 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>scrollToItem()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToItem</span><span class="token punctuation">(</span><span class="token punctuation">(</span>params<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToItem</span><span class="token punctuation">(</span><span class="token punctuation">(</span>params<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Requires linear scan through data - use <code>scrollToIndex</code> instead if possible.</p>
|
||||
<p>Note: cannot scroll to locations outside the render window without specifying the <code>getItemLayout</code> prop.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="scrolltooffset"></a><a href="#scrolltooffset" 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>scrollToOffset()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToOffset</span><span class="token punctuation">(</span><span class="token punctuation">(</span>params<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToOffset</span><span class="token punctuation">(</span><span class="token punctuation">(</span>params<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Scroll to a specific content pixel offset in the list.</p>
|
||||
<p>Check out <a href="/docs/0.10/virtualizedlist#scrolltooffset">scrollToOffset</a> of VirtualizedList</p>
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
<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 punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'You tapped the button!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Press Me<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Press Me<span class="token punctuation">"</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<p>This will render a blue label on iOS, and a blue rounded rectangle with light text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.</p>
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
<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 punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'You tapped the button!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Press Me<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Press Me<span class="token punctuation">"</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<p>This will render a blue label on iOS, and a blue rounded rectangle with light text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.</p>
|
||||
|
||||
+25
-25
@@ -103,13 +103,13 @@
|
||||
<span class="token comment">// BAD</span>
|
||||
<span class="token keyword">var</span> icon <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>active
|
||||
<span class="token operator">?</span> <span class="token string">'my-icon-active'</span>
|
||||
<span class="token operator">:</span> <span class="token string">'my-icon-inactive'</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">:</span> <span class="token string">'my-icon-inactive'</span><span class="token punctuation">;</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">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">'./'</span> <span class="token operator">+</span> icon <span class="token operator">+</span> <span class="token string">'.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// GOOD</span>
|
||||
<span class="token keyword">var</span> icon <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>active
|
||||
<span class="token operator">?</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./my-icon-active.png'</span><span class="token punctuation">)</span>
|
||||
<span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./my-icon-inactive.png'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./my-icon-inactive.png'</span><span class="token punctuation">)</span><span class="token punctuation">;</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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>icon<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set <code>{ width: undefined, height: undefined }</code> on the style attribute.</p>
|
||||
@@ -121,38 +121,38 @@
|
||||
<p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.</p>
|
||||
<p>For images included via Xcode asset catalogs or in the Android drawable folder, use the image name without the extension:</p>
|
||||
<pre><code class="hljs css language-jsx"><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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> uri<span class="token operator">:</span> <span class="token string">'app_icon'</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> width<span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span> height<span class="token operator">:</span> <span class="token number">40</span> <span class="token punctuation">}</span><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 punctuation">{</span> uri<span class="token punctuation">:</span> <span class="token string">'app_icon'</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">40</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<p>For images in the Android assets folder, use the <code>asset:/</code> scheme:</p>
|
||||
<pre><code class="hljs css language-jsx"><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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> uri<span class="token operator">:</span> <span class="token string">'asset:/app_icon.png'</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> width<span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span> height<span class="token operator">:</span> <span class="token number">40</span> <span class="token punctuation">}</span><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 punctuation">{</span> uri<span class="token punctuation">:</span> <span class="token string">'asset:/app_icon.png'</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">40</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<p>These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="network-images"></a><a href="#network-images" 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>Network Images</h2>
|
||||
<p>Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, <em>you will need to manually specify the dimensions of your image</em>. It's highly recommended that you use https as well in order to satisfy <a href="/docs/0.10/running-on-device#app-transport-security">App Transport Security</a> requirements on iOS.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token comment">// GOOD</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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token operator">:</span> <span class="token string">'https://reactjs.org/logo-og.png'</span><span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span>width<span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> height<span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">'https://reactjs.org/logo-og.png'</span><span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
|
||||
<span class="token comment">// BAD</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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token operator">:</span> <span class="token string">'https://reactjs.org/logo-og.png'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">'https://reactjs.org/logo-og.png'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="network-requests-for-images"></a><a href="#network-requests-for-images" 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>Network Requests for Images</h3>
|
||||
<p>If you would like to set such things as the HTTP-Verb, Headers or a Body along with the image request, you may do this by defining these properties on the source object:</p>
|
||||
<pre><code class="hljs css language-jsx"><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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
uri<span class="token operator">:</span> <span class="token string">'https://reactjs.org/logo-og.png'</span><span class="token punctuation">,</span>
|
||||
method<span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
|
||||
headers<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
Pragma<span class="token operator">:</span> <span class="token string">'no-cache'</span>
|
||||
uri<span class="token punctuation">:</span> <span class="token string">'https://reactjs.org/logo-og.png'</span><span class="token punctuation">,</span>
|
||||
method<span class="token punctuation">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
|
||||
headers<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
Pragma<span class="token punctuation">:</span> <span class="token string">'no-cache'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
body<span class="token operator">:</span> <span class="token string">'Your Body goes here'</span>
|
||||
body<span class="token punctuation">:</span> <span class="token string">'Your Body goes here'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> width<span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> height<span class="token operator">:</span> <span class="token number">400</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">400</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="uri-data-images"></a><a href="#uri-data-images" 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>Uri Data Images</h2>
|
||||
@@ -163,12 +163,12 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token comment">// include at least width and height!</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><span class="token punctuation">{</span>
|
||||
width<span class="token operator">:</span> <span class="token number">51</span><span class="token punctuation">,</span>
|
||||
height<span class="token operator">:</span> <span class="token number">51</span><span class="token punctuation">,</span>
|
||||
resizeMode<span class="token operator">:</span> <span class="token string">'contain'</span>
|
||||
width<span class="token punctuation">:</span> <span class="token number">51</span><span class="token punctuation">,</span>
|
||||
height<span class="token punctuation">:</span> <span class="token number">51</span><span class="token punctuation">,</span>
|
||||
resizeMode<span class="token punctuation">:</span> <span class="token string">'contain'</span>
|
||||
<span class="token punctuation">}</span><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 punctuation">{</span>
|
||||
uri<span class="token operator">:</span>
|
||||
uri<span class="token punctuation">:</span>
|
||||
<span class="token string">'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
@@ -183,10 +183,10 @@
|
||||
</ul>
|
||||
<pre><code class="hljs css language-jsx"><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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
uri<span class="token operator">:</span> <span class="token string">'https://reactjs.org/logo-og.png'</span><span class="token punctuation">,</span>
|
||||
cache<span class="token operator">:</span> <span class="token string">'only-if-cached'</span>
|
||||
uri<span class="token punctuation">:</span> <span class="token string">'https://reactjs.org/logo-og.png'</span><span class="token punctuation">,</span>
|
||||
cache<span class="token punctuation">:</span> <span class="token string">'only-if-cached'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> width<span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> height<span class="token operator">:</span> <span class="token number">400</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">400</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="local-filesystem-images"></a><a href="#local-filesystem-images" 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>Local Filesystem Images</h2>
|
||||
@@ -197,11 +197,11 @@
|
||||
<p><em>In the browser</em> if you don't give a size to an image, the browser is going to render a 0x0 element, download the image, and then render the image based with the correct size. The big issue with this behavior is that your UI is going to jump all around as images load, this makes for a very bad user experience.</p>
|
||||
<p><em>In React Native</em> this behavior is intentionally not implemented. It is more work for the developer to know the dimensions (or aspect ratio) of the remote image in advance, but we believe that it leads to a better user experience. Static images loaded from the app bundle via the <code>require('./my-icon.png')</code> syntax <em>can be automatically sized</em> because their dimensions are available immediately at the time of mounting.</p>
|
||||
<p>For example, the result of <code>require('./my-icon.png')</code> might be:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">{</span><span class="token string">"__packager_asset"</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token string">"uri"</span><span class="token operator">:</span><span class="token string">"my-icon.png"</span><span class="token punctuation">,</span><span class="token string">"width"</span><span class="token operator">:</span><span class="token number">591</span><span class="token punctuation">,</span><span class="token string">"height"</span><span class="token operator">:</span><span class="token number">573</span><span class="token punctuation">}</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">{</span><span class="token string">"__packager_asset"</span><span class="token punctuation">:</span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token string">"uri"</span><span class="token punctuation">:</span><span class="token string">"my-icon.png"</span><span class="token punctuation">,</span><span class="token string">"width"</span><span class="token punctuation">:</span><span class="token number">591</span><span class="token punctuation">,</span><span class="token string">"height"</span><span class="token punctuation">:</span><span class="token number">573</span><span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="source-as-an-object"></a><a href="#source-as-an-object" 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>Source as an object</h2>
|
||||
<p>In React Native, one interesting decision is that the <code>src</code> attribute is named <code>source</code> and doesn't take a string but an object with a <code>uri</code> attribute.</p>
|
||||
<pre><code class="hljs css language-jsx"><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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> uri<span class="token operator">:</span> <span class="token string">'something.jpg'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
<pre><code class="hljs css language-jsx"><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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> uri<span class="token punctuation">:</span> <span class="token string">'something.jpg'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<p>On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using <code>require('./my-icon.png')</code>, then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting <code>{uri: ...}</code>, we can output <code>{uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}}</code> and transparently support spriting on all the existing call sites.</p>
|
||||
<p>On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.</p>
|
||||
@@ -209,7 +209,7 @@
|
||||
<p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is basic. Refer to <code><ImageBackground></code>'s <a href="/docs/0.10/imagebackground">documentation</a> for more insight, and create your own custom component when needed.</p>
|
||||
<pre><code class="hljs css language-jsx"><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">ImageBackground</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 operator">...</span><span class="token punctuation">}</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><span class="token punctuation">{</span>width<span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span> height<span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ImageBackground</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 operator">...</span><span class="token punctuation">}</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><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token string">'100%'</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">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Inside</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</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">ImageBackground</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
+25
-25
@@ -103,13 +103,13 @@
|
||||
<span class="token comment">// BAD</span>
|
||||
<span class="token keyword">var</span> icon <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>active
|
||||
<span class="token operator">?</span> <span class="token string">'my-icon-active'</span>
|
||||
<span class="token operator">:</span> <span class="token string">'my-icon-inactive'</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">:</span> <span class="token string">'my-icon-inactive'</span><span class="token punctuation">;</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">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">'./'</span> <span class="token operator">+</span> icon <span class="token operator">+</span> <span class="token string">'.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// GOOD</span>
|
||||
<span class="token keyword">var</span> icon <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>active
|
||||
<span class="token operator">?</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./my-icon-active.png'</span><span class="token punctuation">)</span>
|
||||
<span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./my-icon-inactive.png'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./my-icon-inactive.png'</span><span class="token punctuation">)</span><span class="token punctuation">;</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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>icon<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set <code>{ width: undefined, height: undefined }</code> on the style attribute.</p>
|
||||
@@ -121,38 +121,38 @@
|
||||
<p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.</p>
|
||||
<p>For images included via Xcode asset catalogs or in the Android drawable folder, use the image name without the extension:</p>
|
||||
<pre><code class="hljs css language-jsx"><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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> uri<span class="token operator">:</span> <span class="token string">'app_icon'</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> width<span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span> height<span class="token operator">:</span> <span class="token number">40</span> <span class="token punctuation">}</span><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 punctuation">{</span> uri<span class="token punctuation">:</span> <span class="token string">'app_icon'</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">40</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<p>For images in the Android assets folder, use the <code>asset:/</code> scheme:</p>
|
||||
<pre><code class="hljs css language-jsx"><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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> uri<span class="token operator">:</span> <span class="token string">'asset:/app_icon.png'</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> width<span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span> height<span class="token operator">:</span> <span class="token number">40</span> <span class="token punctuation">}</span><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 punctuation">{</span> uri<span class="token punctuation">:</span> <span class="token string">'asset:/app_icon.png'</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">40</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<p>These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="network-images"></a><a href="#network-images" 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>Network Images</h2>
|
||||
<p>Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, <em>you will need to manually specify the dimensions of your image</em>. It's highly recommended that you use https as well in order to satisfy <a href="/docs/0.10/running-on-device#app-transport-security">App Transport Security</a> requirements on iOS.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token comment">// GOOD</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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token operator">:</span> <span class="token string">'https://reactjs.org/logo-og.png'</span><span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span>width<span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> height<span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">'https://reactjs.org/logo-og.png'</span><span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
|
||||
<span class="token comment">// BAD</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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token operator">:</span> <span class="token string">'https://reactjs.org/logo-og.png'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">'https://reactjs.org/logo-og.png'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="network-requests-for-images"></a><a href="#network-requests-for-images" 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>Network Requests for Images</h3>
|
||||
<p>If you would like to set such things as the HTTP-Verb, Headers or a Body along with the image request, you may do this by defining these properties on the source object:</p>
|
||||
<pre><code class="hljs css language-jsx"><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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
uri<span class="token operator">:</span> <span class="token string">'https://reactjs.org/logo-og.png'</span><span class="token punctuation">,</span>
|
||||
method<span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
|
||||
headers<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
Pragma<span class="token operator">:</span> <span class="token string">'no-cache'</span>
|
||||
uri<span class="token punctuation">:</span> <span class="token string">'https://reactjs.org/logo-og.png'</span><span class="token punctuation">,</span>
|
||||
method<span class="token punctuation">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
|
||||
headers<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
Pragma<span class="token punctuation">:</span> <span class="token string">'no-cache'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
body<span class="token operator">:</span> <span class="token string">'Your Body goes here'</span>
|
||||
body<span class="token punctuation">:</span> <span class="token string">'Your Body goes here'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> width<span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> height<span class="token operator">:</span> <span class="token number">400</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">400</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="uri-data-images"></a><a href="#uri-data-images" 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>Uri Data Images</h2>
|
||||
@@ -163,12 +163,12 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token comment">// include at least width and height!</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><span class="token punctuation">{</span>
|
||||
width<span class="token operator">:</span> <span class="token number">51</span><span class="token punctuation">,</span>
|
||||
height<span class="token operator">:</span> <span class="token number">51</span><span class="token punctuation">,</span>
|
||||
resizeMode<span class="token operator">:</span> <span class="token string">'contain'</span>
|
||||
width<span class="token punctuation">:</span> <span class="token number">51</span><span class="token punctuation">,</span>
|
||||
height<span class="token punctuation">:</span> <span class="token number">51</span><span class="token punctuation">,</span>
|
||||
resizeMode<span class="token punctuation">:</span> <span class="token string">'contain'</span>
|
||||
<span class="token punctuation">}</span><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 punctuation">{</span>
|
||||
uri<span class="token operator">:</span>
|
||||
uri<span class="token punctuation">:</span>
|
||||
<span class="token string">'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
@@ -183,10 +183,10 @@
|
||||
</ul>
|
||||
<pre><code class="hljs css language-jsx"><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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
uri<span class="token operator">:</span> <span class="token string">'https://reactjs.org/logo-og.png'</span><span class="token punctuation">,</span>
|
||||
cache<span class="token operator">:</span> <span class="token string">'only-if-cached'</span>
|
||||
uri<span class="token punctuation">:</span> <span class="token string">'https://reactjs.org/logo-og.png'</span><span class="token punctuation">,</span>
|
||||
cache<span class="token punctuation">:</span> <span class="token string">'only-if-cached'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> width<span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span> height<span class="token operator">:</span> <span class="token number">400</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">400</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="local-filesystem-images"></a><a href="#local-filesystem-images" 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>Local Filesystem Images</h2>
|
||||
@@ -197,11 +197,11 @@
|
||||
<p><em>In the browser</em> if you don't give a size to an image, the browser is going to render a 0x0 element, download the image, and then render the image based with the correct size. The big issue with this behavior is that your UI is going to jump all around as images load, this makes for a very bad user experience.</p>
|
||||
<p><em>In React Native</em> this behavior is intentionally not implemented. It is more work for the developer to know the dimensions (or aspect ratio) of the remote image in advance, but we believe that it leads to a better user experience. Static images loaded from the app bundle via the <code>require('./my-icon.png')</code> syntax <em>can be automatically sized</em> because their dimensions are available immediately at the time of mounting.</p>
|
||||
<p>For example, the result of <code>require('./my-icon.png')</code> might be:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">{</span><span class="token string">"__packager_asset"</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token string">"uri"</span><span class="token operator">:</span><span class="token string">"my-icon.png"</span><span class="token punctuation">,</span><span class="token string">"width"</span><span class="token operator">:</span><span class="token number">591</span><span class="token punctuation">,</span><span class="token string">"height"</span><span class="token operator">:</span><span class="token number">573</span><span class="token punctuation">}</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">{</span><span class="token string">"__packager_asset"</span><span class="token punctuation">:</span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token string">"uri"</span><span class="token punctuation">:</span><span class="token string">"my-icon.png"</span><span class="token punctuation">,</span><span class="token string">"width"</span><span class="token punctuation">:</span><span class="token number">591</span><span class="token punctuation">,</span><span class="token string">"height"</span><span class="token punctuation">:</span><span class="token number">573</span><span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="source-as-an-object"></a><a href="#source-as-an-object" 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>Source as an object</h2>
|
||||
<p>In React Native, one interesting decision is that the <code>src</code> attribute is named <code>source</code> and doesn't take a string but an object with a <code>uri</code> attribute.</p>
|
||||
<pre><code class="hljs css language-jsx"><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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> uri<span class="token operator">:</span> <span class="token string">'something.jpg'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
<pre><code class="hljs css language-jsx"><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">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> uri<span class="token punctuation">:</span> <span class="token string">'something.jpg'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<p>On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using <code>require('./my-icon.png')</code>, then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting <code>{uri: ...}</code>, we can output <code>{uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}}</code> and transparently support spriting on all the existing call sites.</p>
|
||||
<p>On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.</p>
|
||||
@@ -209,7 +209,7 @@
|
||||
<p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is basic. Refer to <code><ImageBackground></code>'s <a href="/docs/0.10/imagebackground">documentation</a> for more insight, and create your own custom component when needed.</p>
|
||||
<pre><code class="hljs css language-jsx"><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">ImageBackground</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 operator">...</span><span class="token punctuation">}</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><span class="token punctuation">{</span>width<span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span> height<span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ImageBackground</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 operator">...</span><span class="token punctuation">}</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><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token string">'100%'</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">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Inside</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</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">ImageBackground</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -289,21 +289,21 @@ Pod installation complete! There are 3 dependencies <span class="hljs-keyword">f
|
||||
<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 operator">:</span> <span class="token punctuation">{</span>
|
||||
flex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
justifyContent<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
alignItems<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
backgroundColor<span class="token operator">:</span> <span class="token string">'#FFFFFF'</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>
|
||||
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">'#FFFFFF'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
highScoresTitle<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
fontSize<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||||
textAlign<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
margin<span class="token operator">:</span> <span class="token number">10</span>
|
||||
highScoresTitle<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||||
textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
margin<span class="token punctuation">:</span> <span class="token number">10</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
scores<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
textAlign<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
color<span class="token operator">:</span> <span class="token string">'#333333'</span><span class="token punctuation">,</span>
|
||||
marginBottom<span class="token operator">:</span> <span class="token number">5</span>
|
||||
scores<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
color<span class="token punctuation">:</span> <span class="token string">'#333333'</span><span class="token punctuation">,</span>
|
||||
marginBottom<span class="token punctuation">:</span> <span class="token number">5</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -523,14 +523,14 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios</spa
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token keyword">var</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 operator">:</span> <span class="token punctuation">{</span>
|
||||
flex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
justifyContent<span class="token operator">:</span> <span class="token string">'center'</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><span class="token punctuation">,</span>
|
||||
hello<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
fontSize<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||||
textAlign<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
margin<span class="token operator">:</span> <span class="token number">10</span>
|
||||
hello<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||||
textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
margin<span class="token punctuation">:</span> <span class="token number">10</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
|
||||
@@ -289,21 +289,21 @@ Pod installation complete! There are 3 dependencies <span class="hljs-keyword">f
|
||||
<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 operator">:</span> <span class="token punctuation">{</span>
|
||||
flex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
justifyContent<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
alignItems<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
backgroundColor<span class="token operator">:</span> <span class="token string">'#FFFFFF'</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>
|
||||
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">'#FFFFFF'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
highScoresTitle<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
fontSize<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||||
textAlign<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
margin<span class="token operator">:</span> <span class="token number">10</span>
|
||||
highScoresTitle<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||||
textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
margin<span class="token punctuation">:</span> <span class="token number">10</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
scores<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
textAlign<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
color<span class="token operator">:</span> <span class="token string">'#333333'</span><span class="token punctuation">,</span>
|
||||
marginBottom<span class="token operator">:</span> <span class="token number">5</span>
|
||||
scores<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
color<span class="token punctuation">:</span> <span class="token string">'#333333'</span><span class="token punctuation">,</span>
|
||||
marginBottom<span class="token punctuation">:</span> <span class="token number">5</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -523,14 +523,14 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios</spa
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token keyword">var</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 operator">:</span> <span class="token punctuation">{</span>
|
||||
flex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
justifyContent<span class="token operator">:</span> <span class="token string">'center'</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><span class="token punctuation">,</span>
|
||||
hello<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
fontSize<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||||
textAlign<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
margin<span class="token operator">:</span> <span class="token number">10</span>
|
||||
hello<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||||
textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||||
margin<span class="token punctuation">:</span> <span class="token number">10</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
|
||||
@@ -62,15 +62,15 @@
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="relativekeyboardheight"></a><a href="#relativekeyboardheight" 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>relativeKeyboardHeight()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">relativeKeyboardHeight</span><span class="token punctuation">(</span>keyboardFrame<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token operator">:</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">relativeKeyboardHeight</span><span class="token punctuation">(</span>keyboardFrame<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">:</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onkeyboardchange"></a><a href="#onkeyboardchange" 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>onKeyboardChange()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">onKeyboardChange</span><span class="token punctuation">(</span><span class="token punctuation">(</span>event<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">onKeyboardChange</span><span class="token punctuation">(</span><span class="token punctuation">(</span>event<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onlayout"></a><a href="#onlayout" 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>onLayout()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">onLayout</span><span class="token punctuation">(</span><span class="token punctuation">(</span>event<span class="token operator">:</span> ViewLayoutEvent<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">onLayout</span><span class="token punctuation">(</span><span class="token punctuation">(</span>event<span class="token punctuation">:</span> ViewLayoutEvent<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#props-1">Props</a><ul class="toc-headings"><li><a href="#keyboardverticaloffset"><code>keyboardVerticalOffset</code></a></li><li><a href="#behavior"><code>behavior</code></a></li><li><a href="#contentcontainerstyle"><code>contentContainerStyle</code></a></li></ul></li><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#relativekeyboardheight"><code>relativeKeyboardHeight()</code></a></li><li><a href="#onkeyboardchange"><code>onKeyboardChange()</code></a></li><li><a href="#onlayout"><code>onLayout()</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">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://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="https://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>
|
||||
|
||||
@@ -62,15 +62,15 @@
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="relativekeyboardheight"></a><a href="#relativekeyboardheight" 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>relativeKeyboardHeight()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">relativeKeyboardHeight</span><span class="token punctuation">(</span>keyboardFrame<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token operator">:</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">relativeKeyboardHeight</span><span class="token punctuation">(</span>keyboardFrame<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">:</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onkeyboardchange"></a><a href="#onkeyboardchange" 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>onKeyboardChange()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">onKeyboardChange</span><span class="token punctuation">(</span><span class="token punctuation">(</span>event<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">onKeyboardChange</span><span class="token punctuation">(</span><span class="token punctuation">(</span>event<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onlayout"></a><a href="#onlayout" 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>onLayout()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">onLayout</span><span class="token punctuation">(</span><span class="token punctuation">(</span>event<span class="token operator">:</span> ViewLayoutEvent<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">onLayout</span><span class="token punctuation">(</span><span class="token punctuation">(</span>event<span class="token punctuation">:</span> ViewLayoutEvent<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#props-1">Props</a><ul class="toc-headings"><li><a href="#keyboardverticaloffset"><code>keyboardVerticalOffset</code></a></li><li><a href="#behavior"><code>behavior</code></a></li><li><a href="#contentcontainerstyle"><code>contentContainerStyle</code></a></li></ul></li><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#relativekeyboardheight"><code>relativeKeyboardHeight()</code></a></li><li><a href="#onkeyboardchange"><code>onKeyboardChange()</code></a></li><li><a href="#onlayout"><code>onLayout()</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">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://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="https://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>
|
||||
|
||||
@@ -271,13 +271,13 @@
|
||||
<p>Exports some data, e.g. for perf investigations or analytics.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="scrollto"></a><a href="#scrollto" 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>scrollTo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token operator">:</span> Array<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">:</span> Array<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>Scrolls to a given x, y offset, either immediately or with a smooth animation.</p>
|
||||
<p>See <code>ScrollView#scrollTo</code>.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="scrolltoend"></a><a href="#scrolltoend" 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>scrollToEnd()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToEnd</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">[</span>options<span class="token punctuation">]</span><span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToEnd</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">[</span>options<span class="token punctuation">]</span><span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>If this is a vertical ListView scrolls to the bottom. If this is a horizontal ListView scrolls to the right.</p>
|
||||
<p>Use <code>scrollToEnd({animated: true})</code> for smooth animated scrolling, <code>scrollToEnd({animated: false})</code> for immediate scrolling. If no options are passed, <code>animated</code> defaults to true.</p>
|
||||
|
||||
@@ -271,13 +271,13 @@
|
||||
<p>Exports some data, e.g. for perf investigations or analytics.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="scrollto"></a><a href="#scrollto" 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>scrollTo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token operator">:</span> Array<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">:</span> Array<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>Scrolls to a given x, y offset, either immediately or with a smooth animation.</p>
|
||||
<p>See <code>ScrollView#scrollTo</code>.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="scrolltoend"></a><a href="#scrolltoend" 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>scrollToEnd()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToEnd</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">[</span>options<span class="token punctuation">]</span><span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToEnd</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">[</span>options<span class="token punctuation">]</span><span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>If this is a vertical ListView scrolls to the bottom. If this is a horizontal ListView scrolls to the right.</p>
|
||||
<p>Use <code>scrollToEnd({animated: true})</code> for smooth animated scrolling, <code>scrollToEnd({animated: false})</code> for immediate scrolling. If no options are passed, <code>animated</code> defaults to true.</p>
|
||||
|
||||
@@ -188,7 +188,7 @@ module<span class="token punctuation">.</span>exports <span class="token operato
|
||||
<span class="token keyword">super</span><span class="token punctuation">(</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><span class="token function">_onChange</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</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><span class="token punctuation">(</span><span class="token parameter">event<span class="token operator">:</span> Event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">_onChange</span><span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">:</span> Event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>onChangeMessage<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
@@ -202,7 +202,7 @@ MyCustomView<span class="token punctuation">.</span>propTypes <span class="token
|
||||
<span class="token comment">/**
|
||||
* Callback that is called continuously when the user is dragging the map.
|
||||
*/</span>
|
||||
onChangeMessage<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">,</span>
|
||||
onChangeMessage<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">,</span>
|
||||
<span class="token operator">...</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
|
||||
@@ -188,7 +188,7 @@ module<span class="token punctuation">.</span>exports <span class="token operato
|
||||
<span class="token keyword">super</span><span class="token punctuation">(</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><span class="token function">_onChange</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</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><span class="token punctuation">(</span><span class="token parameter">event<span class="token operator">:</span> Event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">_onChange</span><span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">:</span> Event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>onChangeMessage<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
@@ -202,7 +202,7 @@ MyCustomView<span class="token punctuation">.</span>propTypes <span class="token
|
||||
<span class="token comment">/**
|
||||
* Callback that is called continuously when the user is dragging the map.
|
||||
*/</span>
|
||||
onChangeMessage<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">,</span>
|
||||
onChangeMessage<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">,</span>
|
||||
<span class="token operator">...</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
|
||||
@@ -117,13 +117,13 @@ module<span class="token punctuation">.</span>exports <span class="token operato
|
||||
<span class="token operator">...</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MapView</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><span class="token punctuation">{</span> flex<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MapView</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><span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Make sure to use <code>RNTMap</code> here. We want to require the manager here, which will expose the view of our manager for use in Javascript.</p>
|
||||
<p><strong>Note:</strong> When rendering, don't forget to stretch the view, otherwise you'll be staring at a blank screen.</p>
|
||||
<pre><code class="hljs css language-jsx"> <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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MapView</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><span class="token punctuation">{</span>flex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MapView</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><span class="token punctuation">{</span>flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>This is now a fully-functioning native map view component in JavaScript, complete with pinch-zoom and other native gesture support. We can't really control it from JavaScript yet, though :(</p>
|
||||
@@ -135,7 +135,7 @@ RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, <span class="hljs-built_in">BOOL</span>)
|
||||
<p>Note that we explicitly specify the type as <code>BOOL</code> - React Native uses <code>RCTConvert</code> under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.</p>
|
||||
<p>Now to actually disable zooming, we set the property in JS:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token comment">// MyApp.js</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MapView</span></span> <span class="token attr-name">zoomEnabled</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</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><span class="token punctuation">{</span> flex<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MapView</span></span> <span class="token attr-name">zoomEnabled</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</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><span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<p>To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React <code>PropTypes</code>:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token comment">// MapView.js</span>
|
||||
@@ -154,7 +154,7 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
* A Boolean value that determines whether the user may use pinch
|
||||
* gestures to zoom in and out of the map.
|
||||
*/</span>
|
||||
zoomEnabled<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>bool
|
||||
zoomEnabled<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>bool
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> RNTMap <span class="token operator">=</span> <span class="token function">requireNativeComponent</span><span class="token punctuation">(</span><span class="token string">'RNTMap'</span><span class="token punctuation">,</span> MapView<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -219,7 +219,7 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
* A Boolean value that determines whether the user may use pinch
|
||||
* gestures to zoom in and out of the map.
|
||||
*/</span>
|
||||
zoomEnabled<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>bool<span class="token punctuation">,</span>
|
||||
zoomEnabled<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>bool<span class="token punctuation">,</span>
|
||||
|
||||
<span class="token comment">/**
|
||||
* The region to be displayed by the map.
|
||||
@@ -227,19 +227,19 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
* The region is defined by the center coordinates and the span of
|
||||
* coordinates to display.
|
||||
*/</span>
|
||||
region<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span><span class="token function">shape</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
region<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span><span class="token function">shape</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token comment">/**
|
||||
* Coordinates for the center of the map.
|
||||
*/</span>
|
||||
latitude<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
||||
longitude<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
||||
latitude<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
||||
longitude<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
||||
|
||||
<span class="token comment">/**
|
||||
* Distance between the minimum and the maximum latitude/longitude
|
||||
* to be displayed.
|
||||
*/</span>
|
||||
latitudeDelta<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
||||
longitudeDelta<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
||||
latitudeDelta<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
||||
longitudeDelta<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<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>
|
||||
|
||||
@@ -247,16 +247,16 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
|
||||
<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">var</span> region <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
latitude<span class="token operator">:</span> <span class="token number">37.48</span><span class="token punctuation">,</span>
|
||||
longitude<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">122.16</span><span class="token punctuation">,</span>
|
||||
latitudeDelta<span class="token operator">:</span> <span class="token number">0.1</span><span class="token punctuation">,</span>
|
||||
longitudeDelta<span class="token operator">:</span> <span class="token number">0.1</span><span class="token punctuation">,</span>
|
||||
latitude<span class="token punctuation">:</span> <span class="token number">37.48</span><span class="token punctuation">,</span>
|
||||
longitude<span class="token punctuation">:</span> <span class="token operator">-</span><span class="token number">122.16</span><span class="token punctuation">,</span>
|
||||
latitudeDelta<span class="token punctuation">:</span> <span class="token number">0.1</span><span class="token punctuation">,</span>
|
||||
longitudeDelta<span class="token punctuation">:</span> <span class="token number">0.1</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">MapView</span></span>
|
||||
<span class="token attr-name">region</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>region<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">zoomEnabled</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</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><span class="token punctuation">{</span> flex<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
@@ -264,7 +264,7 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
<p>Here you can see that the shape of the region is explicit in the JS documentation - ideally we could codegen some of this stuff, but that's not happening yet.</p>
|
||||
<p>Sometimes your native component will have some reserved properties that you don't want to be part of the API for the associated React component. For example, <code>Switch</code> has a custom <code>onChange</code> handler for the raw native event, and exposes an <code>onValueChange</code> handler property that is invoked with the boolean value rather than the raw event. Since you don't want these native only properties to be part of the API, you don't want to put them in <code>propTypes</code>, but if you don't you'll get an error. The solution is to add them to the <code>nativeOnly</code> option, e.g.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> RCTSwitch <span class="token operator">=</span> <span class="token function">requireNativeComponent</span><span class="token punctuation">(</span><span class="token string">'RCTSwitch'</span><span class="token punctuation">,</span> Switch<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
nativeOnly<span class="token operator">:</span> <span class="token punctuation">{</span> onChange<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
|
||||
nativeOnly<span class="token punctuation">:</span> <span class="token punctuation">{</span> onChange<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="events"></a><a href="#events" 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>Events</h2>
|
||||
@@ -366,7 +366,7 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
<span class="token comment">/**
|
||||
* Callback that is called continuously when the user is dragging the map.
|
||||
*/</span>
|
||||
onRegionChange<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">,</span>
|
||||
onRegionChange<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">,</span>
|
||||
<span class="token operator">...</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -379,10 +379,10 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
|
||||
<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">var</span> region <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
latitude<span class="token operator">:</span> <span class="token number">37.48</span><span class="token punctuation">,</span>
|
||||
longitude<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">122.16</span><span class="token punctuation">,</span>
|
||||
latitudeDelta<span class="token operator">:</span> <span class="token number">0.1</span><span class="token punctuation">,</span>
|
||||
longitudeDelta<span class="token operator">:</span> <span class="token number">0.1</span><span class="token punctuation">,</span>
|
||||
latitude<span class="token punctuation">:</span> <span class="token number">37.48</span><span class="token punctuation">,</span>
|
||||
longitude<span class="token punctuation">:</span> <span class="token operator">-</span><span class="token number">122.16</span><span class="token punctuation">,</span>
|
||||
latitudeDelta<span class="token punctuation">:</span> <span class="token number">0.1</span><span class="token punctuation">,</span>
|
||||
longitudeDelta<span class="token punctuation">:</span> <span class="token number">0.1</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">MapView</span></span>
|
||||
@@ -458,7 +458,7 @@ RCT_EXPORT_METHOD(callNativeMethod:(<span class="hljs-keyword">nonnull</span> <s
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> UIManager <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 keyword">var</span> RCTDatePickerIOSConsts <span class="token operator">=</span> UIManager<span class="token punctuation">.</span>RCTDatePicker<span class="token punctuation">.</span>Constants<span class="token punctuation">;</span>
|
||||
<span class="token operator">...</span>
|
||||
<span class="token function-variable function">render</span><span class="token operator">:</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 function-variable function">render</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">View</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><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>style<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">RCTDatePickerIOS</span></span>
|
||||
@@ -472,9 +472,9 @@ RCT_EXPORT_METHOD(callNativeMethod:(<span class="hljs-keyword">nonnull</span> <s
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</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>
|
||||
rkDatePickerIOS<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
height<span class="token operator">:</span> RCTDatePickerIOSConsts<span class="token punctuation">.</span>ComponentHeight<span class="token punctuation">,</span>
|
||||
width<span class="token operator">:</span> RCTDatePickerIOSConsts<span class="token punctuation">.</span>ComponentWidth<span class="token punctuation">,</span>
|
||||
rkDatePickerIOS<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
height<span class="token punctuation">:</span> RCTDatePickerIOSConsts<span class="token punctuation">.</span>ComponentHeight<span class="token punctuation">,</span>
|
||||
width<span class="token punctuation">:</span> RCTDatePickerIOSConsts<span class="token punctuation">.</span>ComponentWidth<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>
|
||||
</code></pre>
|
||||
|
||||
@@ -117,13 +117,13 @@ module<span class="token punctuation">.</span>exports <span class="token operato
|
||||
<span class="token operator">...</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MapView</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><span class="token punctuation">{</span> flex<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MapView</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><span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Make sure to use <code>RNTMap</code> here. We want to require the manager here, which will expose the view of our manager for use in Javascript.</p>
|
||||
<p><strong>Note:</strong> When rendering, don't forget to stretch the view, otherwise you'll be staring at a blank screen.</p>
|
||||
<pre><code class="hljs css language-jsx"> <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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MapView</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><span class="token punctuation">{</span>flex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MapView</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><span class="token punctuation">{</span>flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>This is now a fully-functioning native map view component in JavaScript, complete with pinch-zoom and other native gesture support. We can't really control it from JavaScript yet, though :(</p>
|
||||
@@ -135,7 +135,7 @@ RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, <span class="hljs-built_in">BOOL</span>)
|
||||
<p>Note that we explicitly specify the type as <code>BOOL</code> - React Native uses <code>RCTConvert</code> under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.</p>
|
||||
<p>Now to actually disable zooming, we set the property in JS:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token comment">// MyApp.js</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MapView</span></span> <span class="token attr-name">zoomEnabled</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</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><span class="token punctuation">{</span> flex<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MapView</span></span> <span class="token attr-name">zoomEnabled</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</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><span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
<p>To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React <code>PropTypes</code>:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token comment">// MapView.js</span>
|
||||
@@ -154,7 +154,7 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
* A Boolean value that determines whether the user may use pinch
|
||||
* gestures to zoom in and out of the map.
|
||||
*/</span>
|
||||
zoomEnabled<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>bool
|
||||
zoomEnabled<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>bool
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> RNTMap <span class="token operator">=</span> <span class="token function">requireNativeComponent</span><span class="token punctuation">(</span><span class="token string">'RNTMap'</span><span class="token punctuation">,</span> MapView<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -219,7 +219,7 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
* A Boolean value that determines whether the user may use pinch
|
||||
* gestures to zoom in and out of the map.
|
||||
*/</span>
|
||||
zoomEnabled<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>bool<span class="token punctuation">,</span>
|
||||
zoomEnabled<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>bool<span class="token punctuation">,</span>
|
||||
|
||||
<span class="token comment">/**
|
||||
* The region to be displayed by the map.
|
||||
@@ -227,19 +227,19 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
* The region is defined by the center coordinates and the span of
|
||||
* coordinates to display.
|
||||
*/</span>
|
||||
region<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span><span class="token function">shape</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
region<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span><span class="token function">shape</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token comment">/**
|
||||
* Coordinates for the center of the map.
|
||||
*/</span>
|
||||
latitude<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
||||
longitude<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
||||
latitude<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
||||
longitude<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
||||
|
||||
<span class="token comment">/**
|
||||
* Distance between the minimum and the maximum latitude/longitude
|
||||
* to be displayed.
|
||||
*/</span>
|
||||
latitudeDelta<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
||||
longitudeDelta<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
||||
latitudeDelta<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
|
||||
longitudeDelta<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<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>
|
||||
|
||||
@@ -247,16 +247,16 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
|
||||
<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">var</span> region <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
latitude<span class="token operator">:</span> <span class="token number">37.48</span><span class="token punctuation">,</span>
|
||||
longitude<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">122.16</span><span class="token punctuation">,</span>
|
||||
latitudeDelta<span class="token operator">:</span> <span class="token number">0.1</span><span class="token punctuation">,</span>
|
||||
longitudeDelta<span class="token operator">:</span> <span class="token number">0.1</span><span class="token punctuation">,</span>
|
||||
latitude<span class="token punctuation">:</span> <span class="token number">37.48</span><span class="token punctuation">,</span>
|
||||
longitude<span class="token punctuation">:</span> <span class="token operator">-</span><span class="token number">122.16</span><span class="token punctuation">,</span>
|
||||
latitudeDelta<span class="token punctuation">:</span> <span class="token number">0.1</span><span class="token punctuation">,</span>
|
||||
longitudeDelta<span class="token punctuation">:</span> <span class="token number">0.1</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">MapView</span></span>
|
||||
<span class="token attr-name">region</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>region<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">zoomEnabled</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</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><span class="token punctuation">{</span> flex<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
@@ -264,7 +264,7 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
<p>Here you can see that the shape of the region is explicit in the JS documentation - ideally we could codegen some of this stuff, but that's not happening yet.</p>
|
||||
<p>Sometimes your native component will have some reserved properties that you don't want to be part of the API for the associated React component. For example, <code>Switch</code> has a custom <code>onChange</code> handler for the raw native event, and exposes an <code>onValueChange</code> handler property that is invoked with the boolean value rather than the raw event. Since you don't want these native only properties to be part of the API, you don't want to put them in <code>propTypes</code>, but if you don't you'll get an error. The solution is to add them to the <code>nativeOnly</code> option, e.g.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> RCTSwitch <span class="token operator">=</span> <span class="token function">requireNativeComponent</span><span class="token punctuation">(</span><span class="token string">'RCTSwitch'</span><span class="token punctuation">,</span> Switch<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
nativeOnly<span class="token operator">:</span> <span class="token punctuation">{</span> onChange<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
|
||||
nativeOnly<span class="token punctuation">:</span> <span class="token punctuation">{</span> onChange<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="events"></a><a href="#events" 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>Events</h2>
|
||||
@@ -366,7 +366,7 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
<span class="token comment">/**
|
||||
* Callback that is called continuously when the user is dragging the map.
|
||||
*/</span>
|
||||
onRegionChange<span class="token operator">:</span> PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">,</span>
|
||||
onRegionChange<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">,</span>
|
||||
<span class="token operator">...</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -379,10 +379,10 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
|
||||
<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">var</span> region <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
latitude<span class="token operator">:</span> <span class="token number">37.48</span><span class="token punctuation">,</span>
|
||||
longitude<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">122.16</span><span class="token punctuation">,</span>
|
||||
latitudeDelta<span class="token operator">:</span> <span class="token number">0.1</span><span class="token punctuation">,</span>
|
||||
longitudeDelta<span class="token operator">:</span> <span class="token number">0.1</span><span class="token punctuation">,</span>
|
||||
latitude<span class="token punctuation">:</span> <span class="token number">37.48</span><span class="token punctuation">,</span>
|
||||
longitude<span class="token punctuation">:</span> <span class="token operator">-</span><span class="token number">122.16</span><span class="token punctuation">,</span>
|
||||
latitudeDelta<span class="token punctuation">:</span> <span class="token number">0.1</span><span class="token punctuation">,</span>
|
||||
longitudeDelta<span class="token punctuation">:</span> <span class="token number">0.1</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">MapView</span></span>
|
||||
@@ -458,7 +458,7 @@ RCT_EXPORT_METHOD(callNativeMethod:(<span class="hljs-keyword">nonnull</span> <s
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> UIManager <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 keyword">var</span> RCTDatePickerIOSConsts <span class="token operator">=</span> UIManager<span class="token punctuation">.</span>RCTDatePicker<span class="token punctuation">.</span>Constants<span class="token punctuation">;</span>
|
||||
<span class="token operator">...</span>
|
||||
<span class="token function-variable function">render</span><span class="token operator">:</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 function-variable function">render</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">View</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><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>style<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">RCTDatePickerIOS</span></span>
|
||||
@@ -472,9 +472,9 @@ RCT_EXPORT_METHOD(callNativeMethod:(<span class="hljs-keyword">nonnull</span> <s
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</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>
|
||||
rkDatePickerIOS<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
height<span class="token operator">:</span> RCTDatePickerIOSConsts<span class="token punctuation">.</span>ComponentHeight<span class="token punctuation">,</span>
|
||||
width<span class="token operator">:</span> RCTDatePickerIOSConsts<span class="token punctuation">.</span>ComponentWidth<span class="token punctuation">,</span>
|
||||
rkDatePickerIOS<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
height<span class="token punctuation">:</span> RCTDatePickerIOSConsts<span class="token punctuation">.</span>ComponentHeight<span class="token punctuation">,</span>
|
||||
width<span class="token punctuation">:</span> RCTDatePickerIOSConsts<span class="token punctuation">.</span>ComponentWidth<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>
|
||||
</code></pre>
|
||||
|
||||
@@ -82,16 +82,16 @@
|
||||
|
||||
<span class="token keyword">package</span> <span class="token namespace">com<span class="token punctuation">.</span>your</span><span class="token operator">-</span>app<span class="token operator">-</span>name<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">import</span> <span class="token namespace">android<span class="token punctuation">.</span>widget<span class="token punctuation">.</span></span><span class="token class-name">Toast</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">android<span class="token punctuation">.</span>widget</span><span class="token punctuation">.</span><span class="token class-name">Toast</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">NativeModule</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">ReactApplicationContext</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">ReactContext</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">ReactContextBaseJavaModule</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">ReactMethod</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">NativeModule</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">ReactApplicationContext</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">ReactContext</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">ReactContextBaseJavaModule</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">ReactMethod</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util<span class="token punctuation">.</span></span><span class="token class-name">Map</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util<span class="token punctuation">.</span></span><span class="token class-name">HashMap</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util</span><span class="token punctuation">.</span><span class="token class-name">Map</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util</span><span class="token punctuation">.</span><span class="token class-name">HashMap</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">ToastModule</span> <span class="token keyword">extends</span> <span class="token class-name">ReactContextBaseJavaModule</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token class-name">ReactApplicationContext</span> reactContext<span class="token punctuation">;</span>
|
||||
@@ -145,14 +145,14 @@ R<span class="hljs-function"><span class="hljs-title">eadableArray</span> -><
|
||||
|
||||
<span class="token keyword">package</span> <span class="token namespace">com<span class="token punctuation">.</span>your</span><span class="token operator">-</span>app<span class="token operator">-</span>name<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span></span><span class="token class-name">ReactPackage</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">NativeModule</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">ReactApplicationContext</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>uimanager<span class="token punctuation">.</span></span><span class="token class-name">ViewManager</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react</span><span class="token punctuation">.</span><span class="token class-name">ReactPackage</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">NativeModule</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">ReactApplicationContext</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>uimanager</span><span class="token punctuation">.</span><span class="token class-name">ViewManager</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util<span class="token punctuation">.</span></span><span class="token class-name">ArrayList</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util<span class="token punctuation">.</span></span><span class="token class-name">Collections</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util<span class="token punctuation">.</span></span><span class="token class-name">List</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util</span><span class="token punctuation">.</span><span class="token class-name">ArrayList</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util</span><span class="token punctuation">.</span><span class="token class-name">Collections</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util</span><span class="token punctuation">.</span><span class="token class-name">List</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">CustomToastPackage</span> <span class="token keyword">implements</span> <span class="token class-name">ReactPackage</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -211,7 +211,7 @@ ToastExample<span class="token punctuation">.</span><span class="token function"
|
||||
<h2><a class="anchor" aria-hidden="true" id="beyond-toasts"></a><a href="#beyond-toasts" 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>Beyond Toasts</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="callbacks"></a><a href="#callbacks" 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>Callbacks</h3>
|
||||
<p>Native modules also support a unique kind of argument - a callback. In most cases it is used to provide the function call result to JavaScript.</p>
|
||||
<pre><code class="hljs css language-java"><span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">Callback</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-java"><span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">Callback</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">UIManagerModule</span> <span class="token keyword">extends</span> <span class="token class-name">ReactContextBaseJavaModule</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -254,7 +254,7 @@ ToastExample<span class="token punctuation">.</span><span class="token function"
|
||||
<h3><a class="anchor" aria-hidden="true" id="promises"></a><a href="#promises" 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>Promises</h3>
|
||||
<p>Native modules can also fulfill a promise, which can simplify your JavaScript, especially when using ES2016's <code>async/await</code> syntax. When the last parameter of a bridged native method is a <code>Promise</code>, its corresponding JS method will return a JS Promise object.</p>
|
||||
<p>Refactoring the above code to use a promise instead of callbacks looks like this:</p>
|
||||
<pre><code class="hljs css language-java"><span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">Promise</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-java"><span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">Promise</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">UIManagerModule</span> <span class="token keyword">extends</span> <span class="token class-name">ReactContextBaseJavaModule</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -308,9 +308,9 @@ ToastExample<span class="token punctuation">.</span><span class="token function"
|
||||
<h3><a class="anchor" aria-hidden="true" id="sending-events-to-javascript"></a><a href="#sending-events-to-javascript" 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>Sending Events to JavaScript</h3>
|
||||
<p>Native modules can signal events to JavaScript without being invoked directly. The easiest way to do this is to use the <code>RCTDeviceEventEmitter</code> which can be obtained from the <code>ReactContext</code> as in the code snippet below.</p>
|
||||
<pre><code class="hljs css language-java"><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>modules<span class="token punctuation">.</span>core<span class="token punctuation">.</span></span><span class="token class-name">DeviceEventManagerModule</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">WritableMap</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">Arguments</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>modules<span class="token punctuation">.</span>core</span><span class="token punctuation">.</span><span class="token class-name">DeviceEventManagerModule</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">WritableMap</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">Arguments</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">private</span> <span class="token keyword">void</span> <span class="token function">sendEvent</span><span class="token punctuation">(</span><span class="token class-name">ReactContext</span> reactContext<span class="token punctuation">,</span>
|
||||
<span class="token class-name">String</span> eventName<span class="token punctuation">,</span>
|
||||
|
||||
@@ -82,16 +82,16 @@
|
||||
|
||||
<span class="token keyword">package</span> <span class="token namespace">com<span class="token punctuation">.</span>your</span><span class="token operator">-</span>app<span class="token operator">-</span>name<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">import</span> <span class="token namespace">android<span class="token punctuation">.</span>widget<span class="token punctuation">.</span></span><span class="token class-name">Toast</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">android<span class="token punctuation">.</span>widget</span><span class="token punctuation">.</span><span class="token class-name">Toast</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">NativeModule</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">ReactApplicationContext</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">ReactContext</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">ReactContextBaseJavaModule</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">ReactMethod</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">NativeModule</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">ReactApplicationContext</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">ReactContext</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">ReactContextBaseJavaModule</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">ReactMethod</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util<span class="token punctuation">.</span></span><span class="token class-name">Map</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util<span class="token punctuation">.</span></span><span class="token class-name">HashMap</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util</span><span class="token punctuation">.</span><span class="token class-name">Map</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util</span><span class="token punctuation">.</span><span class="token class-name">HashMap</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">ToastModule</span> <span class="token keyword">extends</span> <span class="token class-name">ReactContextBaseJavaModule</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token class-name">ReactApplicationContext</span> reactContext<span class="token punctuation">;</span>
|
||||
@@ -145,14 +145,14 @@ R<span class="hljs-function"><span class="hljs-title">eadableArray</span> -><
|
||||
|
||||
<span class="token keyword">package</span> <span class="token namespace">com<span class="token punctuation">.</span>your</span><span class="token operator">-</span>app<span class="token operator">-</span>name<span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span></span><span class="token class-name">ReactPackage</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">NativeModule</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">ReactApplicationContext</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>uimanager<span class="token punctuation">.</span></span><span class="token class-name">ViewManager</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react</span><span class="token punctuation">.</span><span class="token class-name">ReactPackage</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">NativeModule</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">ReactApplicationContext</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>uimanager</span><span class="token punctuation">.</span><span class="token class-name">ViewManager</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util<span class="token punctuation">.</span></span><span class="token class-name">ArrayList</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util<span class="token punctuation">.</span></span><span class="token class-name">Collections</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util<span class="token punctuation">.</span></span><span class="token class-name">List</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util</span><span class="token punctuation">.</span><span class="token class-name">ArrayList</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util</span><span class="token punctuation">.</span><span class="token class-name">Collections</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util</span><span class="token punctuation">.</span><span class="token class-name">List</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">CustomToastPackage</span> <span class="token keyword">implements</span> <span class="token class-name">ReactPackage</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -211,7 +211,7 @@ ToastExample<span class="token punctuation">.</span><span class="token function"
|
||||
<h2><a class="anchor" aria-hidden="true" id="beyond-toasts"></a><a href="#beyond-toasts" 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>Beyond Toasts</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="callbacks"></a><a href="#callbacks" 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>Callbacks</h3>
|
||||
<p>Native modules also support a unique kind of argument - a callback. In most cases it is used to provide the function call result to JavaScript.</p>
|
||||
<pre><code class="hljs css language-java"><span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">Callback</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-java"><span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">Callback</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">UIManagerModule</span> <span class="token keyword">extends</span> <span class="token class-name">ReactContextBaseJavaModule</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -254,7 +254,7 @@ ToastExample<span class="token punctuation">.</span><span class="token function"
|
||||
<h3><a class="anchor" aria-hidden="true" id="promises"></a><a href="#promises" 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>Promises</h3>
|
||||
<p>Native modules can also fulfill a promise, which can simplify your JavaScript, especially when using ES2016's <code>async/await</code> syntax. When the last parameter of a bridged native method is a <code>Promise</code>, its corresponding JS method will return a JS Promise object.</p>
|
||||
<p>Refactoring the above code to use a promise instead of callbacks looks like this:</p>
|
||||
<pre><code class="hljs css language-java"><span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">Promise</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-java"><span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">Promise</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">UIManagerModule</span> <span class="token keyword">extends</span> <span class="token class-name">ReactContextBaseJavaModule</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -308,9 +308,9 @@ ToastExample<span class="token punctuation">.</span><span class="token function"
|
||||
<h3><a class="anchor" aria-hidden="true" id="sending-events-to-javascript"></a><a href="#sending-events-to-javascript" 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>Sending Events to JavaScript</h3>
|
||||
<p>Native modules can signal events to JavaScript without being invoked directly. The easiest way to do this is to use the <code>RCTDeviceEventEmitter</code> which can be obtained from the <code>ReactContext</code> as in the code snippet below.</p>
|
||||
<pre><code class="hljs css language-java"><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>modules<span class="token punctuation">.</span>core<span class="token punctuation">.</span></span><span class="token class-name">DeviceEventManagerModule</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">WritableMap</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge<span class="token punctuation">.</span></span><span class="token class-name">Arguments</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>modules<span class="token punctuation">.</span>core</span><span class="token punctuation">.</span><span class="token class-name">DeviceEventManagerModule</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">WritableMap</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">Arguments</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">private</span> <span class="token keyword">void</span> <span class="token function">sendEvent</span><span class="token punctuation">(</span><span class="token class-name">ReactContext</span> reactContext<span class="token punctuation">,</span>
|
||||
<span class="token class-name">String</span> eventName<span class="token punctuation">,</span>
|
||||
|
||||
@@ -180,9 +180,9 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name d
|
||||
</code></pre>
|
||||
<p>and call it from JavaScript:</p>
|
||||
<pre><code class="hljs css language-jsx">CalendarManager<span class="token punctuation">.</span><span class="token function">addEvent</span><span class="token punctuation">(</span><span class="token string">'Birthday Party'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
location<span class="token operator">:</span> <span class="token string">'4 Privet Drive, Surrey'</span><span class="token punctuation">,</span>
|
||||
time<span class="token operator">:</span> date<span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
description<span class="token operator">:</span> <span class="token string">'...'</span>
|
||||
location<span class="token punctuation">:</span> <span class="token string">'4 Privet Drive, Surrey'</span><span class="token punctuation">,</span>
|
||||
time<span class="token punctuation">:</span> date<span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'...'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
@@ -206,7 +206,7 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name d
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">else</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> events<span class="token operator">:</span> events <span class="token punctuation">}</span><span class="token punctuation">)</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> events<span class="token punctuation">:</span> events <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>
|
||||
</code></pre>
|
||||
|
||||
@@ -180,9 +180,9 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name d
|
||||
</code></pre>
|
||||
<p>and call it from JavaScript:</p>
|
||||
<pre><code class="hljs css language-jsx">CalendarManager<span class="token punctuation">.</span><span class="token function">addEvent</span><span class="token punctuation">(</span><span class="token string">'Birthday Party'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
location<span class="token operator">:</span> <span class="token string">'4 Privet Drive, Surrey'</span><span class="token punctuation">,</span>
|
||||
time<span class="token operator">:</span> date<span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
description<span class="token operator">:</span> <span class="token string">'...'</span>
|
||||
location<span class="token punctuation">:</span> <span class="token string">'4 Privet Drive, Surrey'</span><span class="token punctuation">,</span>
|
||||
time<span class="token punctuation">:</span> date<span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
description<span class="token punctuation">:</span> <span class="token string">'...'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
@@ -206,7 +206,7 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name d
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">else</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> events<span class="token operator">:</span> events <span class="token punctuation">}</span><span class="token punctuation">)</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> events<span class="token punctuation">:</span> events <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>
|
||||
</code></pre>
|
||||
|
||||
@@ -124,11 +124,11 @@ pod <span class="token function">install</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">NavigationContainer</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">Stack.Navigator</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">Stack.Screen</span></span>
|
||||
<span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Home<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Home<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Home<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'Welcome'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Welcome'</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">Stack.Screen</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Profile<span class="token punctuation">"</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Profile<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">Stack.Screen</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Profile<span class="token punctuation">"</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Profile<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">Stack.Navigator</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">NavigationContainer</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -140,9 +140,9 @@ pod <span class="token function">install</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">function</span> <span class="token function">HomeScreen</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> navigation <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>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span>
|
||||
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Go to Jane<span class="token punctuation">'</span>s profile<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Go to Jane's profile<span class="token punctuation">"</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 punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
||||
navigation<span class="token punctuation">.</span><span class="token function">navigate</span><span class="token punctuation">(</span><span class="token string">'Profile'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Jane'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
navigation<span class="token punctuation">.</span><span class="token function">navigate</span><span class="token punctuation">(</span><span class="token string">'Profile'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'Jane'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -124,11 +124,11 @@ pod <span class="token function">install</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">NavigationContainer</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">Stack.Navigator</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">Stack.Screen</span></span>
|
||||
<span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Home<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Home<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Home<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'Welcome'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Welcome'</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">Stack.Screen</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Profile<span class="token punctuation">"</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Profile<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">Stack.Screen</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Profile<span class="token punctuation">"</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Profile<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">Stack.Navigator</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">NavigationContainer</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -140,9 +140,9 @@ pod <span class="token function">install</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">function</span> <span class="token function">HomeScreen</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> navigation <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>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span>
|
||||
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Go to Jane<span class="token punctuation">'</span>s profile<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Go to Jane's profile<span class="token punctuation">"</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 punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
||||
navigation<span class="token punctuation">.</span><span class="token function">navigate</span><span class="token punctuation">(</span><span class="token string">'Profile'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'Jane'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
navigation<span class="token punctuation">.</span><span class="token function">navigate</span><span class="token punctuation">(</span><span class="token string">'Profile'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'Jane'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
+26
-26
@@ -81,11 +81,11 @@
|
||||
<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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Navigator</span></span>
|
||||
<span class="token attr-name">initialRoute</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'Awesome Scene'</span><span class="token punctuation">,</span> index<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">initialRoute</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Awesome Scene'</span><span class="token punctuation">,</span> index<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">renderScene</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">route<span class="token punctuation">,</span> navigator</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hello </span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>title<span class="token punctuation">}</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">Text</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">}</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><span class="token punctuation">{</span> padding<span class="token operator">:</span> <span class="token number">100</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> padding<span class="token punctuation">:</span> <span class="token number">100</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
@@ -96,15 +96,15 @@
|
||||
<p>The first example demonstrated one scene. To set up multiple scenes, you pass the <code>initialRouteStack</code> prop to <code>Navigator</code>:</p>
|
||||
<pre><code class="hljs css language-jsx"><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">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>title<span class="token operator">:</span> <span class="token string">'First Scene'</span><span class="token punctuation">,</span> index<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>title<span class="token operator">:</span> <span class="token string">'Second Scene'</span><span class="token punctuation">,</span> index<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>title<span class="token punctuation">:</span> <span class="token string">'First Scene'</span><span class="token punctuation">,</span> index<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>title<span class="token punctuation">:</span> <span class="token string">'Second Scene'</span><span class="token punctuation">,</span> index<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 keyword">return</span> <span class="token punctuation">(</span>
|
||||
<span class="token operator"><</span>Navigator
|
||||
initialRoute<span class="token operator">=</span><span class="token punctuation">{</span>routes<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
|
||||
initialRouteStack<span class="token operator">=</span><span class="token punctuation">{</span>routes<span class="token punctuation">}</span>
|
||||
renderScene<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">route<span class="token punctuation">,</span> navigator</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TouchableHighlight</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 punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Navigator</span></span>
|
||||
<span class="token attr-name">initialRoute</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>routes<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">initialRouteStack</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>routes<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">renderScene</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">route<span class="token punctuation">,</span> navigator</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
||||
<span class="token operator"><</span>TouchableHighlight onPress<span class="token operator">=</span><span class="token punctuation">{</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">if</span> <span class="token punctuation">(</span>route<span class="token punctuation">.</span>index <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
navigator<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>routes<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 keyword">else</span> <span class="token punctuation">{</span>
|
||||
@@ -112,13 +112,13 @@
|
||||
<span class="token punctuation">}</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">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hello </span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>title<span class="token punctuation">}</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">Text</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">TouchableHighlight</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">}</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>padding<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">TouchableHighlight</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
}
|
||||
style=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>padding<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token plain-text">
|
||||
/>
|
||||
);
|
||||
}
|
||||
</span></code></pre>
|
||||
<p>In the above example, a routes variable is defined with two route objects representing two scenes. Each route has an index property that is used to manage the scene being rendered. The <code>renderScene</code> method is changed to either <code>push</code> or <code>pop</code> the navigator depending on the current route's index. Finally, the <code>Text</code> component in the scene is now wrapped in a <code>TouchableHighlight</code> component to help trigger the navigator transitions.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="navigation-bar"></a><a href="#navigation-bar" 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>Navigation Bar</h2>
|
||||
<p>You can optionally pass in your own navigation bar by returning a <code>Navigator.NavigationBar</code> component to the <code>navigationBar</code> prop in <code>Navigator</code>. You can configure the navigation bar properties, through the <code>routeMapper</code> prop. There you set up the left, right, and title properties of the navigation bar:</p>
|
||||
@@ -296,7 +296,7 @@
|
||||
<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>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="immediatelyresetroutestack"></a><a href="#immediatelyresetroutestack" 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>immediatelyResetRouteStack()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">immediatelyResetRouteStack</span><span class="token punctuation">(</span><span class="token punctuation">(</span>nextRouteStack<span class="token operator">:</span> RouteStack<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">immediatelyResetRouteStack</span><span class="token punctuation">(</span><span class="token punctuation">(</span>nextRouteStack<span class="token punctuation">:</span> RouteStack<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Reset every scene with an array of routes. All existing route stacks are destroyed and potentially recreated. There is no accompanying animation and this method immediately replaces and re-renders the navigation bar and the stack items.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -310,7 +310,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="jumpto"></a><a href="#jumpto" 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>jumpTo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">jumpTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">jumpTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Transition to an existing scene without unmounting.</p>
|
||||
<p>The specified route must be in the currently mounted set of routes defined in <code>routeStack</code>.</p>
|
||||
@@ -335,7 +335,7 @@
|
||||
<p>Jump backward without unmounting the current scene.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="push"></a><a href="#push" 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>push()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Navigate forward to a new scene, squashing any scenes that you could jump forward to.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -349,7 +349,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="popn"></a><a href="#popn" 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>popN()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popN</span><span class="token punctuation">(</span><span class="token punctuation">(</span>n<span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popN</span><span class="token punctuation">(</span><span class="token punctuation">(</span>n<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Go back N scenes at once. When N=1, behavior matches <code>pop()</code>. When N is invalid (negative or bigger than current routes count), do nothing.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -368,7 +368,7 @@
|
||||
<p>Transition back and unmount the current scene.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="replaceatindex"></a><a href="#replaceatindex" 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>replaceAtIndex()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replaceAtIndex</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>index<span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>cb<span class="token operator">:</span> Function<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replaceAtIndex</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>index<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>cb<span class="token punctuation">:</span> Function<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Replace a scene as specified by an index.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -384,7 +384,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="replace"></a><a href="#replace" 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>replace()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replace</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replace</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Replace the current scene with a new route.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -398,7 +398,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="replaceprevious"></a><a href="#replaceprevious" 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>replacePrevious()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replacePrevious</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replacePrevious</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Replace the previous scene.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -417,7 +417,7 @@
|
||||
<p>Get the first scene in the stack, unmounting every other scene.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="poptoroute"></a><a href="#poptoroute" 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>popToRoute()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popToRoute</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popToRoute</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Get a particular scene, as specified by its route. All scenes after it will be unmounted.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -431,7 +431,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="replacepreviousandpop"></a><a href="#replacepreviousandpop" 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>replacePreviousAndPop()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replacePreviousAndPop</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replacePreviousAndPop</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Replace the previous scene and get to it.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -445,7 +445,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="resetto"></a><a href="#resetto" 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>resetTo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">resetTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">resetTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Navigate to a new scene and reset route stack.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
|
||||
@@ -81,11 +81,11 @@
|
||||
<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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Navigator</span></span>
|
||||
<span class="token attr-name">initialRoute</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'Awesome Scene'</span><span class="token punctuation">,</span> index<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">initialRoute</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'Awesome Scene'</span><span class="token punctuation">,</span> index<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">renderScene</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">route<span class="token punctuation">,</span> navigator</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hello </span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>title<span class="token punctuation">}</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">Text</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">}</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><span class="token punctuation">{</span> padding<span class="token operator">:</span> <span class="token number">100</span> <span class="token punctuation">}</span><span class="token punctuation">}</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><span class="token punctuation">{</span> padding<span class="token punctuation">:</span> <span class="token number">100</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
@@ -96,15 +96,15 @@
|
||||
<p>The first example demonstrated one scene. To set up multiple scenes, you pass the <code>initialRouteStack</code> prop to <code>Navigator</code>:</p>
|
||||
<pre><code class="hljs css language-jsx"><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">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>title<span class="token operator">:</span> <span class="token string">'First Scene'</span><span class="token punctuation">,</span> index<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>title<span class="token operator">:</span> <span class="token string">'Second Scene'</span><span class="token punctuation">,</span> index<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>title<span class="token punctuation">:</span> <span class="token string">'First Scene'</span><span class="token punctuation">,</span> index<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>title<span class="token punctuation">:</span> <span class="token string">'Second Scene'</span><span class="token punctuation">,</span> index<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 keyword">return</span> <span class="token punctuation">(</span>
|
||||
<span class="token operator"><</span>Navigator
|
||||
initialRoute<span class="token operator">=</span><span class="token punctuation">{</span>routes<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
|
||||
initialRouteStack<span class="token operator">=</span><span class="token punctuation">{</span>routes<span class="token punctuation">}</span>
|
||||
renderScene<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">route<span class="token punctuation">,</span> navigator</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TouchableHighlight</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 punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Navigator</span></span>
|
||||
<span class="token attr-name">initialRoute</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>routes<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">initialRouteStack</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>routes<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">renderScene</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">route<span class="token punctuation">,</span> navigator</span><span class="token punctuation">)</span> <span class="token operator">=></span>
|
||||
<span class="token operator"><</span>TouchableHighlight onPress<span class="token operator">=</span><span class="token punctuation">{</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">if</span> <span class="token punctuation">(</span>route<span class="token punctuation">.</span>index <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
navigator<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>routes<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 keyword">else</span> <span class="token punctuation">{</span>
|
||||
@@ -112,13 +112,13 @@
|
||||
<span class="token punctuation">}</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">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hello </span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>title<span class="token punctuation">}</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">Text</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">TouchableHighlight</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">}</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>padding<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">TouchableHighlight</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
}
|
||||
style=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>padding<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token plain-text">
|
||||
/>
|
||||
);
|
||||
}
|
||||
</span></code></pre>
|
||||
<p>In the above example, a routes variable is defined with two route objects representing two scenes. Each route has an index property that is used to manage the scene being rendered. The <code>renderScene</code> method is changed to either <code>push</code> or <code>pop</code> the navigator depending on the current route's index. Finally, the <code>Text</code> component in the scene is now wrapped in a <code>TouchableHighlight</code> component to help trigger the navigator transitions.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="navigation-bar"></a><a href="#navigation-bar" 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>Navigation Bar</h2>
|
||||
<p>You can optionally pass in your own navigation bar by returning a <code>Navigator.NavigationBar</code> component to the <code>navigationBar</code> prop in <code>Navigator</code>. You can configure the navigation bar properties, through the <code>routeMapper</code> prop. There you set up the left, right, and title properties of the navigation bar:</p>
|
||||
@@ -296,7 +296,7 @@
|
||||
<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>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="immediatelyresetroutestack"></a><a href="#immediatelyresetroutestack" 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>immediatelyResetRouteStack()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">immediatelyResetRouteStack</span><span class="token punctuation">(</span><span class="token punctuation">(</span>nextRouteStack<span class="token operator">:</span> RouteStack<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">immediatelyResetRouteStack</span><span class="token punctuation">(</span><span class="token punctuation">(</span>nextRouteStack<span class="token punctuation">:</span> RouteStack<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Reset every scene with an array of routes. All existing route stacks are destroyed and potentially recreated. There is no accompanying animation and this method immediately replaces and re-renders the navigation bar and the stack items.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -310,7 +310,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="jumpto"></a><a href="#jumpto" 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>jumpTo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">jumpTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">jumpTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Transition to an existing scene without unmounting.</p>
|
||||
<p>The specified route must be in the currently mounted set of routes defined in <code>routeStack</code>.</p>
|
||||
@@ -335,7 +335,7 @@
|
||||
<p>Jump backward without unmounting the current scene.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="push"></a><a href="#push" 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>push()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Navigate forward to a new scene, squashing any scenes that you could jump forward to.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -349,7 +349,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="popn"></a><a href="#popn" 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>popN()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popN</span><span class="token punctuation">(</span><span class="token punctuation">(</span>n<span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popN</span><span class="token punctuation">(</span><span class="token punctuation">(</span>n<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Go back N scenes at once. When N=1, behavior matches <code>pop()</code>. When N is invalid (negative or bigger than current routes count), do nothing.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -368,7 +368,7 @@
|
||||
<p>Transition back and unmount the current scene.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="replaceatindex"></a><a href="#replaceatindex" 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>replaceAtIndex()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replaceAtIndex</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>index<span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>cb<span class="token operator">:</span> Function<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replaceAtIndex</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>index<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>cb<span class="token punctuation">:</span> Function<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Replace a scene as specified by an index.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -384,7 +384,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="replace"></a><a href="#replace" 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>replace()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replace</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replace</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Replace the current scene with a new route.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -398,7 +398,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="replaceprevious"></a><a href="#replaceprevious" 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>replacePrevious()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replacePrevious</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replacePrevious</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Replace the previous scene.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -417,7 +417,7 @@
|
||||
<p>Get the first scene in the stack, unmounting every other scene.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="poptoroute"></a><a href="#poptoroute" 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>popToRoute()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popToRoute</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popToRoute</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Get a particular scene, as specified by its route. All scenes after it will be unmounted.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -431,7 +431,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="replacepreviousandpop"></a><a href="#replacepreviousandpop" 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>replacePreviousAndPop()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replacePreviousAndPop</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replacePreviousAndPop</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Replace the previous scene and get to it.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -445,7 +445,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="resetto"></a><a href="#resetto" 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>resetTo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">resetTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">resetTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Navigate to a new scene and reset route stack.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
|
||||
@@ -240,11 +240,11 @@
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="push"></a><a href="#push" 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>push()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="popn"></a><a href="#popn" 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>popN()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popN</span><span class="token punctuation">(</span><span class="token punctuation">(</span>n<span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popN</span><span class="token punctuation">(</span><span class="token punctuation">(</span>n<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="pop"></a><a href="#pop" 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>pop()</code></h3>
|
||||
@@ -252,18 +252,18 @@
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="replaceatindex"></a><a href="#replaceatindex" 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>replaceAtIndex()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replaceAtIndex</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>index<span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replaceAtIndex</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>index<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Replace a route in the navigation stack.</p>
|
||||
<p><code>index</code> specifies the route in the stack that should be replaced. If it's negative, it counts from the back.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="replace"></a><a href="#replace" 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>replace()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replace</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replace</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Replaces the top of the navigation stack.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="replaceprevious"></a><a href="#replaceprevious" 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>replacePrevious()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replacePrevious</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replacePrevious</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Replace the current route's parent.</p>
|
||||
<hr>
|
||||
@@ -272,19 +272,19 @@
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="poptoroute"></a><a href="#poptoroute" 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>popToRoute()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popToRoute</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popToRoute</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="replacepreviousandpop"></a><a href="#replacepreviousandpop" 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>replacePreviousAndPop()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replacePreviousAndPop</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replacePreviousAndPop</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="resetto"></a><a href="#resetto" 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>resetTo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">resetTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">resetTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="handlenavigationcomplete"></a><a href="#handlenavigationcomplete" 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>handleNavigationComplete()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleNavigationComplete</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token operator">:</span> Event<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleNavigationComplete</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">:</span> Event<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="rendernavigationstackitems"></a><a href="#rendernavigationstackitems" 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>renderNavigationStackItems()</code></h3>
|
||||
|
||||
@@ -240,11 +240,11 @@
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="push"></a><a href="#push" 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>push()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="popn"></a><a href="#popn" 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>popN()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popN</span><span class="token punctuation">(</span><span class="token punctuation">(</span>n<span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popN</span><span class="token punctuation">(</span><span class="token punctuation">(</span>n<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="pop"></a><a href="#pop" 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>pop()</code></h3>
|
||||
@@ -252,18 +252,18 @@
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="replaceatindex"></a><a href="#replaceatindex" 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>replaceAtIndex()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replaceAtIndex</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>index<span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replaceAtIndex</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>index<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Replace a route in the navigation stack.</p>
|
||||
<p><code>index</code> specifies the route in the stack that should be replaced. If it's negative, it counts from the back.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="replace"></a><a href="#replace" 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>replace()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replace</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replace</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Replaces the top of the navigation stack.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="replaceprevious"></a><a href="#replaceprevious" 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>replacePrevious()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replacePrevious</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replacePrevious</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Replace the current route's parent.</p>
|
||||
<hr>
|
||||
@@ -272,19 +272,19 @@
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="poptoroute"></a><a href="#poptoroute" 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>popToRoute()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popToRoute</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">popToRoute</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="replacepreviousandpop"></a><a href="#replacepreviousandpop" 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>replacePreviousAndPop()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replacePreviousAndPop</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">replacePreviousAndPop</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="resetto"></a><a href="#resetto" 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>resetTo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">resetTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">resetTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="handlenavigationcomplete"></a><a href="#handlenavigationcomplete" 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>handleNavigationComplete()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleNavigationComplete</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token operator">:</span> Event<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleNavigationComplete</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">:</span> Event<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="rendernavigationstackitems"></a><a href="#rendernavigationstackitems" 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>renderNavigationStackItems()</code></h3>
|
||||
|
||||
@@ -77,14 +77,14 @@
|
||||
</code></pre>
|
||||
<p>Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'https://mywebsite.com/endpoint/'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
method<span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
|
||||
headers<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
Accept<span class="token operator">:</span> <span class="token string">'application/json'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'Content-Type'</span><span class="token operator">:</span> <span class="token string">'application/json'</span>
|
||||
method<span class="token punctuation">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
|
||||
headers<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
Accept<span class="token punctuation">:</span> <span class="token string">'application/json'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'Content-Type'</span><span class="token punctuation">:</span> <span class="token string">'application/json'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
body<span class="token operator">:</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
firstParam<span class="token operator">:</span> <span class="token string">'yourValue'</span><span class="token punctuation">,</span>
|
||||
secondParam<span class="token operator">:</span> <span class="token string">'yourOtherValue'</span>
|
||||
body<span class="token punctuation">:</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
firstParam<span class="token punctuation">:</span> <span class="token string">'yourValue'</span><span class="token punctuation">,</span>
|
||||
secondParam<span class="token punctuation">:</span> <span class="token string">'yourOtherValue'</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>
|
||||
</code></pre>
|
||||
|
||||
@@ -77,14 +77,14 @@
|
||||
</code></pre>
|
||||
<p>Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'https://mywebsite.com/endpoint/'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
method<span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
|
||||
headers<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
Accept<span class="token operator">:</span> <span class="token string">'application/json'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'Content-Type'</span><span class="token operator">:</span> <span class="token string">'application/json'</span>
|
||||
method<span class="token punctuation">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
|
||||
headers<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
Accept<span class="token punctuation">:</span> <span class="token string">'application/json'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'Content-Type'</span><span class="token punctuation">:</span> <span class="token string">'application/json'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
body<span class="token operator">:</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
firstParam<span class="token operator">:</span> <span class="token string">'yourValue'</span><span class="token punctuation">,</span>
|
||||
secondParam<span class="token operator">:</span> <span class="token string">'yourOtherValue'</span>
|
||||
body<span class="token punctuation">:</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
firstParam<span class="token punctuation">:</span> <span class="token string">'yourValue'</span><span class="token punctuation">,</span>
|
||||
secondParam<span class="token punctuation">:</span> <span class="token string">'yourOtherValue'</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>
|
||||
</code></pre>
|
||||
|
||||
@@ -33,8 +33,8 @@
|
||||
<span class="token keyword">const</span> granted <span class="token operator">=</span> <span class="token keyword">await</span> PermissionsAndroid<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span>
|
||||
PermissionsAndroid<span class="token punctuation">.</span><span class="token constant">PERMISSIONS</span><span class="token punctuation">.</span><span class="token constant">CAMERA</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
title<span class="token operator">:</span> <span class="token string">'Cool Photo App Camera Permission'</span><span class="token punctuation">,</span>
|
||||
message<span class="token operator">:</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Cool Photo App Camera Permission'</span><span class="token punctuation">,</span>
|
||||
message<span class="token punctuation">:</span>
|
||||
<span class="token string">'Cool Photo App needs access to your camera '</span> <span class="token operator">+</span>
|
||||
<span class="token string">'so you can take awesome pictures.'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
@@ -33,8 +33,8 @@
|
||||
<span class="token keyword">const</span> granted <span class="token operator">=</span> <span class="token keyword">await</span> PermissionsAndroid<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span>
|
||||
PermissionsAndroid<span class="token punctuation">.</span><span class="token constant">PERMISSIONS</span><span class="token punctuation">.</span><span class="token constant">CAMERA</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
title<span class="token operator">:</span> <span class="token string">'Cool Photo App Camera Permission'</span><span class="token punctuation">,</span>
|
||||
message<span class="token operator">:</span>
|
||||
title<span class="token punctuation">:</span> <span class="token string">'Cool Photo App Camera Permission'</span><span class="token punctuation">,</span>
|
||||
message<span class="token punctuation">:</span>
|
||||
<span class="token string">'Cool Photo App needs access to your camera '</span> <span class="token operator">+</span>
|
||||
<span class="token string">'so you can take awesome pictures.'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" 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>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" 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>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>Returns the device pixel density. Some examples:</p>
|
||||
<ul>
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" 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>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" 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>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>Returns the device pixel density. Some examples:</p>
|
||||
<ul>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Platform<span class="token punctuation">,</span> StyleSheet <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 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>
|
||||
height<span class="token operator">:</span> Platform<span class="token punctuation">.</span><span class="token constant">OS</span> <span class="token operator">===</span> <span class="token string">'ios'</span> <span class="token operator">?</span> <span class="token number">200</span> <span class="token operator">:</span> <span class="token number">100</span>
|
||||
height<span class="token punctuation">:</span> Platform<span class="token punctuation">.</span><span class="token constant">OS</span> <span class="token operator">===</span> <span class="token string">'ios'</span> <span class="token operator">?</span> <span class="token number">200</span> <span class="token punctuation">:</span> <span class="token number">100</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p><code>Platform.OS</code> will be <code>ios</code> when running on iOS and <code>android</code> when running on Android.</p>
|
||||
@@ -88,14 +88,14 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Platform<span class="token punctuation">,</span> StyleSheet <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 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 operator">:</span> <span class="token punctuation">{</span>
|
||||
flex<span class="token operator">:</span> <span class="token number">1</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>
|
||||
<span class="token operator">...</span>Platform<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
ios<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
backgroundColor<span class="token operator">:</span> <span class="token string">'red'</span>
|
||||
ios<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'red'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
android<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
backgroundColor<span class="token operator">:</span> <span class="token string">'blue'</span>
|
||||
android<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'blue'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
@@ -104,8 +104,8 @@
|
||||
<p>This will result in a container having <code>flex: 1</code> on both platforms, a red background color on iOS, and a blue background color on Android.</p>
|
||||
<p>Since it accepts <code>any</code> value, you can also use it to return platform specific component, like below:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> Component <span class="token operator">=</span> Platform<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token function-variable function">ios</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'ComponentIOS'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">android</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'ComponentAndroid'</span><span class="token punctuation">)</span>
|
||||
<span class="token function-variable function">ios</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'ComponentIOS'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">android</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'ComponentAndroid'</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Component</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Platform<span class="token punctuation">,</span> StyleSheet <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 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>
|
||||
height<span class="token operator">:</span> Platform<span class="token punctuation">.</span><span class="token constant">OS</span> <span class="token operator">===</span> <span class="token string">'ios'</span> <span class="token operator">?</span> <span class="token number">200</span> <span class="token operator">:</span> <span class="token number">100</span>
|
||||
height<span class="token punctuation">:</span> Platform<span class="token punctuation">.</span><span class="token constant">OS</span> <span class="token operator">===</span> <span class="token string">'ios'</span> <span class="token operator">?</span> <span class="token number">200</span> <span class="token punctuation">:</span> <span class="token number">100</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p><code>Platform.OS</code> will be <code>ios</code> when running on iOS and <code>android</code> when running on Android.</p>
|
||||
@@ -88,14 +88,14 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Platform<span class="token punctuation">,</span> StyleSheet <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 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 operator">:</span> <span class="token punctuation">{</span>
|
||||
flex<span class="token operator">:</span> <span class="token number">1</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>
|
||||
<span class="token operator">...</span>Platform<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
ios<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
backgroundColor<span class="token operator">:</span> <span class="token string">'red'</span>
|
||||
ios<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'red'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
android<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
backgroundColor<span class="token operator">:</span> <span class="token string">'blue'</span>
|
||||
android<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'blue'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
@@ -104,8 +104,8 @@
|
||||
<p>This will result in a container having <code>flex: 1</code> on both platforms, a red background color on iOS, and a blue background color on Android.</p>
|
||||
<p>Since it accepts <code>any</code> value, you can also use it to return platform specific component, like below:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> Component <span class="token operator">=</span> Platform<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token function-variable function">ios</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'ComponentIOS'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">android</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'ComponentAndroid'</span><span class="token punctuation">)</span>
|
||||
<span class="token function-variable function">ios</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'ComponentIOS'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">android</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'ComponentAndroid'</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Component</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -18,14 +18,14 @@
|
||||
<span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><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 punctuation">;</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
refreshing<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
refreshing<span class="token punctuation">:</span> <span class="token boolean">false</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">_onRefresh</span><span class="token punctuation">(</span><span class="token punctuation">)</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>refreshing<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</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>refreshing<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token function">fetchData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</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>refreshing<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span><span class="token punctuation">)</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>refreshing<span class="token punctuation">:</span> <span class="token boolean">false</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>
|
||||
|
||||
|
||||
@@ -18,14 +18,14 @@
|
||||
<span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><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 punctuation">;</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
refreshing<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
refreshing<span class="token punctuation">:</span> <span class="token boolean">false</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">_onRefresh</span><span class="token punctuation">(</span><span class="token punctuation">)</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>refreshing<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</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>refreshing<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token function">fetchData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</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>refreshing<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span><span class="token punctuation">)</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>refreshing<span class="token punctuation">:</span> <span class="token boolean">false</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>
|
||||
|
||||
|
||||
@@ -476,15 +476,15 @@
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="scrollto"></a><a href="#scrollto" 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>scrollTo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">[</span>destY<span class="token punctuation">]</span><span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">[</span>destX<span class="token punctuation">]</span><span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">[</span>destY<span class="token punctuation">]</span><span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">[</span>destX<span class="token punctuation">]</span><span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="scrollwithoutanimationto"></a><a href="#scrollwithoutanimationto" 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>scrollWithoutAnimationTo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollWithoutAnimationTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">[</span>destY<span class="token punctuation">]</span><span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">[</span>destX<span class="token punctuation">]</span><span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollWithoutAnimationTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">[</span>destY<span class="token punctuation">]</span><span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">[</span>destX<span class="token punctuation">]</span><span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="handlescroll"></a><a href="#handlescroll" 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>handleScroll()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleScroll</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token operator">:</span> Event<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleScroll</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">:</span> Event<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/0.10/progressviewios"><span class="arrow-prev">← </span><span class="function-name-prevnext">🚧 ProgressViewIOS</span></a><a class="docs-next button" href="/docs/0.10/segmentedcontrolios"><span class="function-name-prevnext">🚧 SegmentedControlIOS</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#props-1">Props</a><ul class="toc-headings"><li><a href="#contentinset"><code>contentInset</code></a></li><li><a href="#contentcontainerstyle"><code>contentContainerStyle</code></a></li><li><a href="#keyboarddismissmode"><code>keyboardDismissMode</code></a></li><li><a href="#onscroll"><code>onScroll</code></a></li><li><a href="#removeclippedsubviews"><code>removeClippedSubviews</code></a></li><li><a href="#showshorizontalscrollindicator"><code>showsHorizontalScrollIndicator</code></a></li><li><a href="#showsverticalscrollindicator"><code>showsVerticalScrollIndicator</code></a></li><li><a href="#style"><code>style</code></a></li><li><a href="#alwaysbouncehorizontal"><code>alwaysBounceHorizontal</code></a></li><li><a href="#alwaysbouncevertical"><code>alwaysBounceVertical</code></a></li><li><a href="#automaticallyadjustcontentinsets"><code>automaticallyAdjustContentInsets</code></a></li><li><a href="#bounces"><code>bounces</code></a></li><li><a href="#bounceszoom"><code>bouncesZoom</code></a></li><li><a href="#cancancelcontenttouches"><code>canCancelContentTouches</code></a></li><li><a href="#centercontent"><code>centerContent</code></a></li><li><a href="#horizontal"><code>horizontal</code></a></li><li><a href="#contentoffset"><code>contentOffset</code></a></li><li><a href="#decelerationrate"><code>decelerationRate</code></a></li><li><a href="#directionallockenabled"><code>directionalLockEnabled</code></a></li><li><a href="#keyboardshouldpersisttaps"><code>keyboardShouldPersistTaps</code></a></li><li><a href="#maximumzoomscale"><code>maximumZoomScale</code></a></li><li><a href="#minimumzoomscale"><code>minimumZoomScale</code></a></li><li><a href="#onscrollanimationend"><code>onScrollAnimationEnd</code></a></li><li><a href="#pagingenabled"><code>pagingEnabled</code></a></li><li><a href="#scrollenabled"><code>scrollEnabled</code></a></li><li><a href="#scrolleventthrottle"><code>scrollEventThrottle</code></a></li><li><a href="#scrollindicatorinsets"><code>scrollIndicatorInsets</code></a></li><li><a href="#scrollstotop"><code>scrollsToTop</code></a></li><li><a href="#stickyheaderindices"><code>stickyHeaderIndices</code></a></li><li><a href="#zoomscale"><code>zoomScale</code></a></li></ul></li><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#scrollto"><code>scrollTo()</code></a></li><li><a href="#scrollwithoutanimationto"><code>scrollWithoutAnimationTo()</code></a></li><li><a href="#handlescroll"><code>handleScroll()</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">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://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="https://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>
|
||||
|
||||
@@ -476,15 +476,15 @@
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="scrollto"></a><a href="#scrollto" 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>scrollTo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">[</span>destY<span class="token punctuation">]</span><span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">[</span>destX<span class="token punctuation">]</span><span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">[</span>destY<span class="token punctuation">]</span><span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">[</span>destX<span class="token punctuation">]</span><span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="scrollwithoutanimationto"></a><a href="#scrollwithoutanimationto" 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>scrollWithoutAnimationTo()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollWithoutAnimationTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">[</span>destY<span class="token punctuation">]</span><span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">[</span>destX<span class="token punctuation">]</span><span class="token operator">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollWithoutAnimationTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">[</span>destY<span class="token punctuation">]</span><span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">[</span>destX<span class="token punctuation">]</span><span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="handlescroll"></a><a href="#handlescroll" 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>handleScroll()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleScroll</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token operator">:</span> Event<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleScroll</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">:</span> Event<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/0.10/progressviewios"><span class="arrow-prev">← </span><span class="function-name-prevnext">🚧 ProgressViewIOS</span></a><a class="docs-next button" href="/docs/0.10/segmentedcontrolios"><span class="function-name-prevnext">🚧 SegmentedControlIOS</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#props-1">Props</a><ul class="toc-headings"><li><a href="#contentinset"><code>contentInset</code></a></li><li><a href="#contentcontainerstyle"><code>contentContainerStyle</code></a></li><li><a href="#keyboarddismissmode"><code>keyboardDismissMode</code></a></li><li><a href="#onscroll"><code>onScroll</code></a></li><li><a href="#removeclippedsubviews"><code>removeClippedSubviews</code></a></li><li><a href="#showshorizontalscrollindicator"><code>showsHorizontalScrollIndicator</code></a></li><li><a href="#showsverticalscrollindicator"><code>showsVerticalScrollIndicator</code></a></li><li><a href="#style"><code>style</code></a></li><li><a href="#alwaysbouncehorizontal"><code>alwaysBounceHorizontal</code></a></li><li><a href="#alwaysbouncevertical"><code>alwaysBounceVertical</code></a></li><li><a href="#automaticallyadjustcontentinsets"><code>automaticallyAdjustContentInsets</code></a></li><li><a href="#bounces"><code>bounces</code></a></li><li><a href="#bounceszoom"><code>bouncesZoom</code></a></li><li><a href="#cancancelcontenttouches"><code>canCancelContentTouches</code></a></li><li><a href="#centercontent"><code>centerContent</code></a></li><li><a href="#horizontal"><code>horizontal</code></a></li><li><a href="#contentoffset"><code>contentOffset</code></a></li><li><a href="#decelerationrate"><code>decelerationRate</code></a></li><li><a href="#directionallockenabled"><code>directionalLockEnabled</code></a></li><li><a href="#keyboardshouldpersisttaps"><code>keyboardShouldPersistTaps</code></a></li><li><a href="#maximumzoomscale"><code>maximumZoomScale</code></a></li><li><a href="#minimumzoomscale"><code>minimumZoomScale</code></a></li><li><a href="#onscrollanimationend"><code>onScrollAnimationEnd</code></a></li><li><a href="#pagingenabled"><code>pagingEnabled</code></a></li><li><a href="#scrollenabled"><code>scrollEnabled</code></a></li><li><a href="#scrolleventthrottle"><code>scrollEventThrottle</code></a></li><li><a href="#scrollindicatorinsets"><code>scrollIndicatorInsets</code></a></li><li><a href="#scrollstotop"><code>scrollsToTop</code></a></li><li><a href="#stickyheaderindices"><code>stickyHeaderIndices</code></a></li><li><a href="#zoomscale"><code>zoomScale</code></a></li></ul></li><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#scrollto"><code>scrollTo()</code></a></li><li><a href="#scrollwithoutanimationto"><code>scrollWithoutAnimationTo()</code></a></li><li><a href="#handlescroll"><code>handleScroll()</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">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://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="https://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>
|
||||
|
||||
+13
-13
@@ -31,17 +31,17 @@
|
||||
<span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ListItem</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">renderSectionHeader</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>section<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Header</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>section<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">sections</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span> <span class="token comment">// homogeneous rendering between sections</span>
|
||||
<span class="token punctuation">{</span>data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> title<span class="token operator">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> title<span class="token operator">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> title<span class="token operator">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <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></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SectionList</span></span>
|
||||
<span class="token attr-name">sections</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span> <span class="token comment">// heterogeneous rendering between sections</span>
|
||||
<span class="token punctuation">{</span>data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> renderItem<span class="token operator">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> renderItem<span class="token operator">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> renderItem<span class="token operator">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> renderItem<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> renderItem<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> renderItem<span class="token punctuation">:</span> <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></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
@@ -109,7 +109,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="renderitem"></a><a href="#renderitem" 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>renderItem</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">renderItem</span><span class="token punctuation">(</span><span class="token punctuation">{</span> item<span class="token operator">:</span> object<span class="token punctuation">,</span> index<span class="token operator">:</span> number<span class="token punctuation">,</span> section<span class="token operator">:</span> object<span class="token punctuation">,</span> separators<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function-variable function">highlight</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">,</span> <span class="token function-variable function">unhighlight</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">,</span> <span class="token function-variable function">updateProps</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">select<span class="token operator">:</span> string<span class="token punctuation">,</span> newProps<span class="token operator">:</span> object</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">[</span>element<span class="token punctuation">]</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">renderItem</span><span class="token punctuation">(</span><span class="token punctuation">{</span> item<span class="token punctuation">:</span> object<span class="token punctuation">,</span> index<span class="token punctuation">:</span> number<span class="token punctuation">,</span> section<span class="token punctuation">:</span> object<span class="token punctuation">,</span> separators<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token function-variable function">highlight</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">,</span> <span class="token function-variable function">unhighlight</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">,</span> <span class="token function-variable function">updateProps</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">select<span class="token punctuation">:</span> string<span class="token punctuation">,</span> newProps<span class="token punctuation">:</span> object</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>element<span class="token punctuation">]</span>
|
||||
</code></pre>
|
||||
<p>Default renderer for every item in every section. Can be over-ridden on a per-section basis.</p>
|
||||
<p>Provides additional metadata like <code>index</code> if you need it, as well as a more generic <code>separators.updateProps</code> function which let's you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common <code>highlight</code> and <code>unhighlight</code> (which set the <code>highlighted: boolean</code> prop) are insufficient for your use case.</p>
|
||||
@@ -211,7 +211,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="keyextractor"></a><a href="#keyextractor" 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>keyExtractor</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">item<span class="token operator">:</span> object<span class="token punctuation">,</span> index<span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token operator">=></span> string<span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">:</span> object<span class="token punctuation">,</span> index<span class="token punctuation">:</span> number</span><span class="token punctuation">)</span> <span class="token operator">=></span> string<span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks <code>item.key</code>, then falls back to using the index, like react does. Note that this sets keys for each item, but each overall section still needs its own key.</p>
|
||||
<table>
|
||||
@@ -224,7 +224,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onendreached"></a><a href="#onendreached" 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>onEndReached</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">info<span class="token operator">:</span> <span class="token punctuation">{</span>distanceFromEnd<span class="token operator">:</span> number<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">info<span class="token punctuation">:</span> <span class="token punctuation">{</span>distanceFromEnd<span class="token punctuation">:</span> number<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span>
|
||||
</code></pre>
|
||||
<p>Called once when the scroll position gets within <code>onEndReachedThreshold</code> of the rendered content.</p>
|
||||
<table>
|
||||
@@ -261,9 +261,9 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onviewableitemschanged"></a><a href="#onviewableitemschanged" 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>onViewableItemsChanged</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">info<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
viewableItems<span class="token operator">:</span> array<span class="token punctuation">,</span>
|
||||
changed<span class="token operator">:</span> array<span class="token punctuation">,</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">info<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
viewableItems<span class="token punctuation">:</span> array<span class="token punctuation">,</span>
|
||||
changed<span class="token punctuation">:</span> array<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span>
|
||||
</code></pre>
|
||||
<p>Called when the viewability of rows changes, as defined by the <code>viewabilityConfig</code> prop.</p>
|
||||
@@ -339,7 +339,7 @@
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="scrolltolocation"></a><a href="#scrolltolocation" 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>scrollToLocation()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToLocation</span><span class="token punctuation">(</span><span class="token punctuation">(</span>params<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToLocation</span><span class="token punctuation">(</span><span class="token punctuation">(</span>params<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Scrolls to the item at the specified <code>sectionIndex</code> and <code>itemIndex</code> (within the section) positioned in the viewable area such that <code>viewPosition</code> 0 places it at the top (and may be covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle. <code>viewOffset</code> is a fixed number of pixels to offset the final target position, e.g. to compensate for sticky headers.</p>
|
||||
<p>Note: cannot scroll to locations outside the render window without specifying the <code>getItemLayout</code> prop.</p>
|
||||
|
||||
@@ -31,17 +31,17 @@
|
||||
<span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ListItem</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">renderSectionHeader</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>section<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Header</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>section<span class="token punctuation">.</span>title<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">sections</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span> <span class="token comment">// homogeneous rendering between sections</span>
|
||||
<span class="token punctuation">{</span>data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> title<span class="token operator">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> title<span class="token operator">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> title<span class="token operator">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <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></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SectionList</span></span>
|
||||
<span class="token attr-name">sections</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span> <span class="token comment">// heterogeneous rendering between sections</span>
|
||||
<span class="token punctuation">{</span>data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> renderItem<span class="token operator">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> renderItem<span class="token operator">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> renderItem<span class="token operator">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> renderItem<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> renderItem<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> renderItem<span class="token punctuation">:</span> <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></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
</code></pre>
|
||||
@@ -109,7 +109,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="renderitem"></a><a href="#renderitem" 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>renderItem</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">renderItem</span><span class="token punctuation">(</span><span class="token punctuation">{</span> item<span class="token operator">:</span> object<span class="token punctuation">,</span> index<span class="token operator">:</span> number<span class="token punctuation">,</span> section<span class="token operator">:</span> object<span class="token punctuation">,</span> separators<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function-variable function">highlight</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">,</span> <span class="token function-variable function">unhighlight</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">,</span> <span class="token function-variable function">updateProps</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">select<span class="token operator">:</span> string<span class="token punctuation">,</span> newProps<span class="token operator">:</span> object</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">[</span>element<span class="token punctuation">]</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">renderItem</span><span class="token punctuation">(</span><span class="token punctuation">{</span> item<span class="token punctuation">:</span> object<span class="token punctuation">,</span> index<span class="token punctuation">:</span> number<span class="token punctuation">,</span> section<span class="token punctuation">:</span> object<span class="token punctuation">,</span> separators<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token function-variable function">highlight</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">,</span> <span class="token function-variable function">unhighlight</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">,</span> <span class="token function-variable function">updateProps</span><span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">select<span class="token punctuation">:</span> string<span class="token punctuation">,</span> newProps<span class="token punctuation">:</span> object</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>element<span class="token punctuation">]</span>
|
||||
</code></pre>
|
||||
<p>Default renderer for every item in every section. Can be over-ridden on a per-section basis.</p>
|
||||
<p>Provides additional metadata like <code>index</code> if you need it, as well as a more generic <code>separators.updateProps</code> function which let's you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common <code>highlight</code> and <code>unhighlight</code> (which set the <code>highlighted: boolean</code> prop) are insufficient for your use case.</p>
|
||||
@@ -211,7 +211,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="keyextractor"></a><a href="#keyextractor" 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>keyExtractor</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">item<span class="token operator">:</span> object<span class="token punctuation">,</span> index<span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token operator">=></span> string<span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">:</span> object<span class="token punctuation">,</span> index<span class="token punctuation">:</span> number</span><span class="token punctuation">)</span> <span class="token operator">=></span> string<span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks <code>item.key</code>, then falls back to using the index, like react does. Note that this sets keys for each item, but each overall section still needs its own key.</p>
|
||||
<table>
|
||||
@@ -224,7 +224,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onendreached"></a><a href="#onendreached" 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>onEndReached</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">info<span class="token operator">:</span> <span class="token punctuation">{</span>distanceFromEnd<span class="token operator">:</span> number<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">info<span class="token punctuation">:</span> <span class="token punctuation">{</span>distanceFromEnd<span class="token punctuation">:</span> number<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span>
|
||||
</code></pre>
|
||||
<p>Called once when the scroll position gets within <code>onEndReachedThreshold</code> of the rendered content.</p>
|
||||
<table>
|
||||
@@ -261,9 +261,9 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onviewableitemschanged"></a><a href="#onviewableitemschanged" 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>onViewableItemsChanged</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">info<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
viewableItems<span class="token operator">:</span> array<span class="token punctuation">,</span>
|
||||
changed<span class="token operator">:</span> array<span class="token punctuation">,</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token punctuation">(</span><span class="token parameter">info<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
viewableItems<span class="token punctuation">:</span> array<span class="token punctuation">,</span>
|
||||
changed<span class="token punctuation">:</span> array<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span>
|
||||
</code></pre>
|
||||
<p>Called when the viewability of rows changes, as defined by the <code>viewabilityConfig</code> prop.</p>
|
||||
@@ -339,7 +339,7 @@
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="scrolltolocation"></a><a href="#scrolltolocation" 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>scrollToLocation()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToLocation</span><span class="token punctuation">(</span><span class="token punctuation">(</span>params<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">scrollToLocation</span><span class="token punctuation">(</span><span class="token punctuation">(</span>params<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Scrolls to the item at the specified <code>sectionIndex</code> and <code>itemIndex</code> (within the section) positioned in the viewable area such that <code>viewPosition</code> 0 places it at the top (and may be covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle. <code>viewOffset</code> is a fixed number of pixels to offset the final target position, e.g. to compensate for sticky headers.</p>
|
||||
<p>Note: cannot scroll to locations outside the render window without specifying the <code>getItemLayout</code> prop.</p>
|
||||
|
||||
@@ -80,12 +80,12 @@
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" 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>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" 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>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">get</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>Get the current value for a key in <code>NSUserDefaults</code>.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="set"></a><a href="#set" 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>set()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">set</span><span class="token punctuation">(</span>settings<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>settings<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>Set one or more values in <code>NSUserDefaults</code>.</p>
|
||||
<hr>
|
||||
|
||||
@@ -80,12 +80,12 @@
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" 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>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" 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>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">get</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>Get the current value for a key in <code>NSUserDefaults</code>.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="set"></a><a href="#set" 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>set()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">set</span><span class="token punctuation">(</span>settings<span class="token punctuation">)</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>settings<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>Set one or more values in <code>NSUserDefaults</code>.</p>
|
||||
<hr>
|
||||
|
||||
@@ -22,14 +22,14 @@
|
||||
<span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><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 punctuation">;</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
value<span class="token operator">:</span> <span class="token number">50</span>
|
||||
value<span class="token punctuation">:</span> <span class="token number">50</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token function">change</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</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><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
value<span class="token operator">:</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
|
||||
value<span class="token punctuation">:</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span>value<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>
|
||||
@@ -51,14 +51,14 @@
|
||||
<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 operator">:</span> <span class="token punctuation">{</span>
|
||||
flex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
flexDirection<span class="token operator">:</span> <span class="token string">'column'</span><span class="token punctuation">,</span>
|
||||
justifyContent<span class="token operator">:</span> <span class="token string">'center'</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>
|
||||
flexDirection<span class="token punctuation">:</span> <span class="token string">'column'</span><span class="token punctuation">,</span>
|
||||
justifyContent<span class="token punctuation">:</span> <span class="token string">'center'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
text<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
fontSize<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
|
||||
textAlign<span class="token operator">:</span> <span class="token string">'center'</span>
|
||||
text<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
fontSize<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
|
||||
textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
|
||||
@@ -22,14 +22,14 @@
|
||||
<span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><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 punctuation">;</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
value<span class="token operator">:</span> <span class="token number">50</span>
|
||||
value<span class="token punctuation">:</span> <span class="token number">50</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token function">change</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</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><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
value<span class="token operator">:</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
|
||||
value<span class="token punctuation">:</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span>value<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>
|
||||
@@ -51,14 +51,14 @@
|
||||
<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 operator">:</span> <span class="token punctuation">{</span>
|
||||
flex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
flexDirection<span class="token operator">:</span> <span class="token string">'column'</span><span class="token punctuation">,</span>
|
||||
justifyContent<span class="token operator">:</span> <span class="token string">'center'</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>
|
||||
flexDirection<span class="token punctuation">:</span> <span class="token string">'column'</span><span class="token punctuation">,</span>
|
||||
justifyContent<span class="token punctuation">:</span> <span class="token string">'center'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
text<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
fontSize<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
|
||||
textAlign<span class="token operator">:</span> <span class="token string">'center'</span>
|
||||
text<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||||
fontSize<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
|
||||
textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
|
||||
@@ -140,8 +140,8 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="sethidden"></a><a href="#sethidden" 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>setHidden()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">StatusBar<span class="token punctuation">.</span><span class="token function">setHidden</span><span class="token punctuation">(</span>
|
||||
<span class="token punctuation">(</span>hidden<span class="token operator">:</span> boolean<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span><span class="token punctuation">[</span>animation<span class="token punctuation">]</span><span class="token operator">:</span> StatusBarAnimation<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">(</span>hidden<span class="token punctuation">:</span> boolean<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span><span class="token punctuation">[</span>animation<span class="token punctuation">]</span><span class="token punctuation">:</span> StatusBarAnimation<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Show or hide the status bar.</p>
|
||||
@@ -158,8 +158,8 @@
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="setbarstyle"></a><a href="#setbarstyle" 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>setBarStyle()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">StatusBar<span class="token punctuation">.</span><span class="token function">setBarStyle</span><span class="token punctuation">(</span>
|
||||
<span class="token punctuation">(</span>style<span class="token operator">:</span> StatusBarStyle<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span><span class="token punctuation">[</span>animated<span class="token punctuation">]</span><span class="token operator">:</span> boolean<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">(</span>style<span class="token punctuation">:</span> StatusBarStyle<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span><span class="token punctuation">[</span>animated<span class="token punctuation">]</span><span class="token punctuation">:</span> boolean<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Set the status bar style.</p>
|
||||
@@ -175,7 +175,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="setnetworkactivityindicatorvisible"></a><a href="#setnetworkactivityindicatorvisible" 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>setNetworkActivityIndicatorVisible()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">StatusBar<span class="token punctuation">.</span><span class="token function">setNetworkActivityIndicatorVisible</span><span class="token punctuation">(</span><span class="token punctuation">(</span>visible<span class="token operator">:</span> boolean<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx">StatusBar<span class="token punctuation">.</span><span class="token function">setNetworkActivityIndicatorVisible</span><span class="token punctuation">(</span><span class="token punctuation">(</span>visible<span class="token punctuation">:</span> boolean<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Control the visibility of the network activity indicator.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -190,8 +190,8 @@
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="setbackgroundcolor"></a><a href="#setbackgroundcolor" 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>setBackgroundColor()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">StatusBar<span class="token punctuation">.</span><span class="token function">setBackgroundColor</span><span class="token punctuation">(</span>
|
||||
<span class="token punctuation">(</span>color<span class="token operator">:</span> string<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span><span class="token punctuation">[</span>animated<span class="token punctuation">]</span><span class="token operator">:</span> boolean<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">(</span>color<span class="token punctuation">:</span> string<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span><span class="token punctuation">[</span>animated<span class="token punctuation">]</span><span class="token punctuation">:</span> boolean<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Set the background color for the status bar.</p>
|
||||
@@ -207,7 +207,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="settranslucent"></a><a href="#settranslucent" 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>setTranslucent()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">StatusBar<span class="token punctuation">.</span><span class="token function">setTranslucent</span><span class="token punctuation">(</span><span class="token punctuation">(</span>translucent<span class="token operator">:</span> boolean<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx">StatusBar<span class="token punctuation">.</span><span class="token function">setTranslucent</span><span class="token punctuation">(</span><span class="token punctuation">(</span>translucent<span class="token punctuation">:</span> boolean<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Control the translucency of the status bar.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
|
||||
@@ -140,8 +140,8 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="sethidden"></a><a href="#sethidden" 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>setHidden()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">StatusBar<span class="token punctuation">.</span><span class="token function">setHidden</span><span class="token punctuation">(</span>
|
||||
<span class="token punctuation">(</span>hidden<span class="token operator">:</span> boolean<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span><span class="token punctuation">[</span>animation<span class="token punctuation">]</span><span class="token operator">:</span> StatusBarAnimation<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">(</span>hidden<span class="token punctuation">:</span> boolean<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span><span class="token punctuation">[</span>animation<span class="token punctuation">]</span><span class="token punctuation">:</span> StatusBarAnimation<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Show or hide the status bar.</p>
|
||||
@@ -158,8 +158,8 @@
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="setbarstyle"></a><a href="#setbarstyle" 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>setBarStyle()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">StatusBar<span class="token punctuation">.</span><span class="token function">setBarStyle</span><span class="token punctuation">(</span>
|
||||
<span class="token punctuation">(</span>style<span class="token operator">:</span> StatusBarStyle<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span><span class="token punctuation">[</span>animated<span class="token punctuation">]</span><span class="token operator">:</span> boolean<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">(</span>style<span class="token punctuation">:</span> StatusBarStyle<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span><span class="token punctuation">[</span>animated<span class="token punctuation">]</span><span class="token punctuation">:</span> boolean<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Set the status bar style.</p>
|
||||
@@ -175,7 +175,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="setnetworkactivityindicatorvisible"></a><a href="#setnetworkactivityindicatorvisible" 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>setNetworkActivityIndicatorVisible()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">StatusBar<span class="token punctuation">.</span><span class="token function">setNetworkActivityIndicatorVisible</span><span class="token punctuation">(</span><span class="token punctuation">(</span>visible<span class="token operator">:</span> boolean<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx">StatusBar<span class="token punctuation">.</span><span class="token function">setNetworkActivityIndicatorVisible</span><span class="token punctuation">(</span><span class="token punctuation">(</span>visible<span class="token punctuation">:</span> boolean<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Control the visibility of the network activity indicator.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -190,8 +190,8 @@
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="setbackgroundcolor"></a><a href="#setbackgroundcolor" 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>setBackgroundColor()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">StatusBar<span class="token punctuation">.</span><span class="token function">setBackgroundColor</span><span class="token punctuation">(</span>
|
||||
<span class="token punctuation">(</span>color<span class="token operator">:</span> string<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span><span class="token punctuation">[</span>animated<span class="token punctuation">]</span><span class="token operator">:</span> boolean<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">(</span>color<span class="token punctuation">:</span> string<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span><span class="token punctuation">[</span>animated<span class="token punctuation">]</span><span class="token punctuation">:</span> boolean<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Set the background color for the status bar.</p>
|
||||
@@ -207,7 +207,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="settranslucent"></a><a href="#settranslucent" 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>setTranslucent()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">StatusBar<span class="token punctuation">.</span><span class="token function">setTranslucent</span><span class="token punctuation">(</span><span class="token punctuation">(</span>translucent<span class="token operator">:</span> boolean<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx">StatusBar<span class="token punctuation">.</span><span class="token function">setTranslucent</span><span class="token punctuation">(</span><span class="token punctuation">(</span>translucent<span class="token punctuation">:</span> boolean<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Control the translucency of the status bar.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
|
||||
+6
-6
@@ -209,27 +209,27 @@ var styles = StyleSheet.create({
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onstartshouldsetresponder"></a><a href="#onstartshouldsetresponder" 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>onStartShouldSetResponder()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">onStartShouldSetResponder</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">onStartShouldSetResponder</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="handleresponderterminationrequest"></a><a href="#handleresponderterminationrequest" 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>handleResponderTerminationRequest()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleResponderTerminationRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleResponderTerminationRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="handlerespondergrant"></a><a href="#handlerespondergrant" 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>handleResponderGrant()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleResponderGrant</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token operator">:</span> SyntheticEvent<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>dispatchID<span class="token operator">:</span> string<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleResponderGrant</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">:</span> SyntheticEvent<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>dispatchID<span class="token punctuation">:</span> string<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="handlerespondermove"></a><a href="#handlerespondermove" 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>handleResponderMove()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleResponderMove</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token operator">:</span> SyntheticEvent<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleResponderMove</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">:</span> SyntheticEvent<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="handleresponderrelease"></a><a href="#handleresponderrelease" 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>handleResponderRelease()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleResponderRelease</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token operator">:</span> SyntheticEvent<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleResponderRelease</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">:</span> SyntheticEvent<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="handleresponderterminate"></a><a href="#handleresponderterminate" 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>handleResponderTerminate()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleResponderTerminate</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token operator">:</span> SyntheticEvent<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleResponderTerminate</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">:</span> SyntheticEvent<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/0.10/tabbarios-item"><span class="arrow-prev">← </span><span>Previous</span></a><a class="docs-next button" href="/docs/0.10/textinput"><span class="function-name-prevnext">TextInput</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#props-1">Props</a><ul class="toc-headings"><li><a href="#allowfontscaling"><code>allowFontScaling</code></a></li><li><a href="#numberoflines"><code>numberOfLines</code></a></li><li><a href="#onlayout"><code>onLayout</code></a></li><li><a href="#onpress"><code>onPress</code></a></li><li><a href="#style"><code>style</code></a></li><li><a href="#testid"><code>testID</code></a></li><li><a href="#suppresshighlighting"><code>suppressHighlighting</code></a></li></ul></li><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#onstartshouldsetresponder"><code>onStartShouldSetResponder()</code></a></li><li><a href="#handleresponderterminationrequest"><code>handleResponderTerminationRequest()</code></a></li><li><a href="#handlerespondergrant"><code>handleResponderGrant()</code></a></li><li><a href="#handlerespondermove"><code>handleResponderMove()</code></a></li><li><a href="#handleresponderrelease"><code>handleResponderRelease()</code></a></li><li><a href="#handleresponderterminate"><code>handleResponderTerminate()</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">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://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="https://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>
|
||||
|
||||
@@ -209,27 +209,27 @@ var styles = StyleSheet.create({
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onstartshouldsetresponder"></a><a href="#onstartshouldsetresponder" 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>onStartShouldSetResponder()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">onStartShouldSetResponder</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">onStartShouldSetResponder</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="handleresponderterminationrequest"></a><a href="#handleresponderterminationrequest" 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>handleResponderTerminationRequest()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleResponderTerminationRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleResponderTerminationRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="handlerespondergrant"></a><a href="#handlerespondergrant" 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>handleResponderGrant()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleResponderGrant</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token operator">:</span> SyntheticEvent<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>dispatchID<span class="token operator">:</span> string<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleResponderGrant</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">:</span> SyntheticEvent<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>dispatchID<span class="token punctuation">:</span> string<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="handlerespondermove"></a><a href="#handlerespondermove" 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>handleResponderMove()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleResponderMove</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token operator">:</span> SyntheticEvent<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleResponderMove</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">:</span> SyntheticEvent<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="handleresponderrelease"></a><a href="#handleresponderrelease" 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>handleResponderRelease()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleResponderRelease</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token operator">:</span> SyntheticEvent<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleResponderRelease</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">:</span> SyntheticEvent<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="handleresponderterminate"></a><a href="#handleresponderterminate" 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>handleResponderTerminate()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleResponderTerminate</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token operator">:</span> SyntheticEvent<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">handleResponderTerminate</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">:</span> SyntheticEvent<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/0.10/tabbarios-item"><span class="arrow-prev">← </span><span>Previous</span></a><a class="docs-next button" href="/docs/0.10/textinput"><span class="function-name-prevnext">TextInput</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#props-1">Props</a><ul class="toc-headings"><li><a href="#allowfontscaling"><code>allowFontScaling</code></a></li><li><a href="#numberoflines"><code>numberOfLines</code></a></li><li><a href="#onlayout"><code>onLayout</code></a></li><li><a href="#onpress"><code>onPress</code></a></li><li><a href="#style"><code>style</code></a></li><li><a href="#testid"><code>testID</code></a></li><li><a href="#suppresshighlighting"><code>suppressHighlighting</code></a></li></ul></li><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#onstartshouldsetresponder"><code>onStartShouldSetResponder()</code></a></li><li><a href="#handleresponderterminationrequest"><code>handleResponderTerminationRequest()</code></a></li><li><a href="#handlerespondergrant"><code>handleResponderGrant()</code></a></li><li><a href="#handlerespondermove"><code>handleResponderMove()</code></a></li><li><a href="#handleresponderrelease"><code>handleResponderRelease()</code></a></li><li><a href="#handleresponderterminate"><code>handleResponderTerminate()</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">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://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="https://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>
|
||||
|
||||
@@ -463,7 +463,7 @@
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isfocused"></a><a href="#isfocused" 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>isFocused()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">isFocused</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">isFocused</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="clear"></a><a href="#clear" 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>clear()</code></h3>
|
||||
|
||||
@@ -463,7 +463,7 @@
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="isfocused"></a><a href="#isfocused" 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>isFocused()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">isFocused</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">isFocused</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="clear"></a><a href="#clear" 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>clear()</code></h3>
|
||||
|
||||
@@ -81,8 +81,8 @@
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="ripple"></a><a href="#ripple" 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>Ripple()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">TouchableNativeFeedback<span class="token punctuation">.</span><span class="token function">Ripple</span><span class="token punctuation">(</span>
|
||||
<span class="token punctuation">(</span>color<span class="token operator">:</span> string<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span>borderless<span class="token operator">:</span> boolean<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">(</span>color<span class="token punctuation">:</span> string<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span>borderless<span class="token punctuation">:</span> boolean<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Creates an object that represents ripple drawable with specified color (as a string). If property <code>borderless</code> evaluates to true the ripple will render outside of the view bounds (see native actionbar buttons as an example of that behavior). This background type is available on Android API level 21+.</p>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user