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 36278a6e166fdb72756ed51a5cdc9adedb7268fe
This commit is contained in:
Website Deployment Script
@@ -199,12 +199,12 @@
|
||||
|
||||
<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 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>
|
||||
<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>
|
||||
<span class="token string">'All examples in this app will be affected. '</span> <span class="token operator">+</span>
|
||||
<span class="token string">'Check them out to see what they look like in RTL layout.'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'Check them out to see what they look like in RTL layout.'</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
|
||||
@@ -199,12 +199,12 @@
|
||||
|
||||
<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 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>
|
||||
<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>
|
||||
<span class="token string">'All examples in this app will be affected. '</span> <span class="token operator">+</span>
|
||||
<span class="token string">'Check them out to see what they look like in RTL layout.'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'Check them out to see what they look like in RTL layout.'</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
|
||||
@@ -77,12 +77,14 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Next, register your task in on <code>AppRegistry</code>:</p>
|
||||
<pre><code class="hljs css language-jsx">AppRegistry<span class="token punctuation">.</span><span class="token function">registerHeadlessTask</span><span class="token punctuation">(</span><span class="token string">'SomeTaskName'</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">'SomeTaskName'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx">AppRegistry<span class="token punctuation">.</span><span class="token function">registerHeadlessTask</span><span class="token punctuation">(</span><span class="token string">'SomeTaskName'</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">'SomeTaskName'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Using Headless JS does require some native Java code to be written in order to allow you to start up the service when needed. Take a look at our new <a href="/docs/headless-js-android">Headless JS docs</a> to learn more!</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="the-keyboard-api"></a><a href="#the-keyboard-api" 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>The Keyboard API</h2>
|
||||
<p>Working with the on-screen keyboard is now easier with <a href="/docs/keyboard"><code>Keyboard</code></a>. You can now listen for native keyboard events and react to them. For example, to dismiss the active keyboard, simply call <code>Keyboard.dismiss()</code>:</p>
|
||||
<pre><code class="hljs css language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span>Keyboard<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> Keyboard <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 comment">// Hide that keyboard!</span>
|
||||
Keyboard<span class="token punctuation">.</span><span class="token function">dismiss</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -77,12 +77,14 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Next, register your task in on <code>AppRegistry</code>:</p>
|
||||
<pre><code class="hljs css language-jsx">AppRegistry<span class="token punctuation">.</span><span class="token function">registerHeadlessTask</span><span class="token punctuation">(</span><span class="token string">'SomeTaskName'</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">'SomeTaskName'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx">AppRegistry<span class="token punctuation">.</span><span class="token function">registerHeadlessTask</span><span class="token punctuation">(</span><span class="token string">'SomeTaskName'</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">'SomeTaskName'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Using Headless JS does require some native Java code to be written in order to allow you to start up the service when needed. Take a look at our new <a href="/docs/headless-js-android">Headless JS docs</a> to learn more!</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="the-keyboard-api"></a><a href="#the-keyboard-api" 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>The Keyboard API</h2>
|
||||
<p>Working with the on-screen keyboard is now easier with <a href="/docs/keyboard"><code>Keyboard</code></a>. You can now listen for native keyboard events and react to them. For example, to dismiss the active keyboard, simply call <code>Keyboard.dismiss()</code>:</p>
|
||||
<pre><code class="hljs css language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span>Keyboard<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> Keyboard <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 comment">// Hide that keyboard!</span>
|
||||
Keyboard<span class="token punctuation">.</span><span class="token function">dismiss</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -116,7 +116,7 @@
|
||||
<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 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 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>
|
||||
@@ -124,8 +124,8 @@
|
||||
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 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 punctuation">,</span> <span class="token comment">// toggle</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</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>
|
||||
<span class="token attr-name">selected</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>
|
||||
|
||||
@@ -116,7 +116,7 @@
|
||||
<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 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 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>
|
||||
@@ -124,8 +124,8 @@
|
||||
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 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 punctuation">,</span> <span class="token comment">// toggle</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</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>
|
||||
<span class="token attr-name">selected</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>
|
||||
|
||||
@@ -103,10 +103,10 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="now-for-the-react-native"></a><a href="#now-for-the-react-native" 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>Now, for the React Native</h2>
|
||||
<p>Alrighty. Now that we know what we are building and how the animation works, we can get down to the code — the reason you are really here.</p>
|
||||
<p>The main piece of this puzzle is <a href="/docs/maskedviewios.html">MaskedViewIOS</a>, a core React Native component.</p>
|
||||
<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>
|
||||
<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 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">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 punctuation">:</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 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">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 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>
|
||||
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 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 comment">// This is important!</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>
|
||||
@@ -171,9 +171,9 @@
|
||||
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 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 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>
|
||||
@@ -181,10 +181,10 @@
|
||||
<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 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>
|
||||
@@ -192,21 +192,25 @@
|
||||
<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>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</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>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Now that we have these style objects, we can use them when rendering the snippet of the view from earlier in the post. Note that only <code>Animated.View</code>, <code>Animated.Text</code>, and <code>Animated.Image</code> are able to use style objects that use <code>Animated.Value</code>.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> fullScreenBlueLayer <span class="token operator">=</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>fullScreenBlueLayer<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> fullScreenWhiteLayer <span class="token operator">=</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>fullScreenWhiteLayer<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></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 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>fullScreenBlueLayer<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 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>fullScreenWhiteLayer<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">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>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 punctuation">:</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>
|
||||
@@ -216,7 +220,8 @@
|
||||
</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">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 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">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 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">
|
||||
@@ -229,10 +234,10 @@
|
||||
<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 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>
|
||||
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 punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</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>
|
||||
|
||||
+27
-22
@@ -103,10 +103,10 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="now-for-the-react-native"></a><a href="#now-for-the-react-native" 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>Now, for the React Native</h2>
|
||||
<p>Alrighty. Now that we know what we are building and how the animation works, we can get down to the code — the reason you are really here.</p>
|
||||
<p>The main piece of this puzzle is <a href="/docs/maskedviewios.html">MaskedViewIOS</a>, a core React Native component.</p>
|
||||
<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>
|
||||
<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 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">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 punctuation">:</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 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">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 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>
|
||||
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 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 comment">// This is important!</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>
|
||||
@@ -171,9 +171,9 @@
|
||||
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 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 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>
|
||||
@@ -181,10 +181,10 @@
|
||||
<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 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>
|
||||
@@ -192,21 +192,25 @@
|
||||
<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>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</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>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Now that we have these style objects, we can use them when rendering the snippet of the view from earlier in the post. Note that only <code>Animated.View</code>, <code>Animated.Text</code>, and <code>Animated.Image</code> are able to use style objects that use <code>Animated.Value</code>.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> fullScreenBlueLayer <span class="token operator">=</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>fullScreenBlueLayer<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> fullScreenWhiteLayer <span class="token operator">=</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>fullScreenWhiteLayer<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></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 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>fullScreenBlueLayer<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 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>fullScreenWhiteLayer<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">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>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 punctuation">:</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>
|
||||
@@ -216,7 +220,8 @@
|
||||
</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">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 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">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 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">
|
||||
@@ -229,10 +234,10 @@
|
||||
<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 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>
|
||||
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 punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</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>
|
||||
|
||||
@@ -109,10 +109,13 @@
|
||||
<hr style="clear: both; margin-bottom: 20px"/>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example-usage"></a><a href="#example-usage" 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>Example Usage</h2>
|
||||
<p>Here's an example which builds a keyboard toolbar button to reset <code><TextInput></code> state.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">TextInputAccessoryViewExample</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><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 operator">></span> <span class="token punctuation">{</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">TextInputAccessoryViewExample</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><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 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 punctuation">:</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>
|
||||
@@ -122,13 +125,15 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TextInput</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>default<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">inputAccessoryViewID</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 attr-name">onChangeText</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">text</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 punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">onChangeText</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">text</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 punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||||
<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 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">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 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">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 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">=</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">
|
||||
|
||||
@@ -109,10 +109,13 @@
|
||||
<hr style="clear: both; margin-bottom: 20px"/>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example-usage"></a><a href="#example-usage" 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>Example Usage</h2>
|
||||
<p>Here's an example which builds a keyboard toolbar button to reset <code><TextInput></code> state.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">TextInputAccessoryViewExample</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><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 operator">></span> <span class="token punctuation">{</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">TextInputAccessoryViewExample</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><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 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 punctuation">:</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>
|
||||
@@ -122,13 +125,15 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TextInput</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>default<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">inputAccessoryViewID</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 attr-name">onChangeText</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">text</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 punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">onChangeText</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">text</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 punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||||
<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 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">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 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">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 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">=</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">
|
||||
|
||||
@@ -112,7 +112,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token function">getSourceExts</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 string">'ts'</span><span class="token punctuation">,</span> <span class="token string">'tsx'</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>
|
||||
<h2><a class="anchor" aria-hidden="true" id="migrating-to-typescript"></a><a href="#migrating-to-typescript" 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>Migrating to TypeScript</h2>
|
||||
@@ -175,7 +175,7 @@
|
||||
<p>Create a <code>components</code> directory and add the following example.</p>
|
||||
<pre><code class="hljs css language-ts">// components/Hello.tsx
|
||||
import React from 'react';
|
||||
import {Button, StyleSheet, Text, View} from 'react-native';
|
||||
import { Button, StyleSheet, Text, View } from 'react-native';
|
||||
|
||||
export interface Props {
|
||||
name: string;
|
||||
@@ -191,19 +191,26 @@ export class Hello extends React.Component<Props, State> {
|
||||
super(props);
|
||||
|
||||
if ((props.enthusiasmLevel || 0) <= 0) {
|
||||
throw new Error('You could be a little more enthusiastic. :D');
|
||||
throw new Error(
|
||||
'You could be a little more enthusiastic. :D'
|
||||
);
|
||||
}
|
||||
|
||||
this.state = {
|
||||
enthusiasmLevel: props.enthusiasmLevel || 1,
|
||||
enthusiasmLevel: props.enthusiasmLevel || 1
|
||||
};
|
||||
}
|
||||
|
||||
onIncrement = () =>
|
||||
this.setState({enthusiasmLevel: this.state.enthusiasmLevel + 1});
|
||||
this.setState({
|
||||
enthusiasmLevel: this.state.enthusiasmLevel + 1
|
||||
});
|
||||
onDecrement = () =>
|
||||
this.setState({enthusiasmLevel: this.state.enthusiasmLevel - 1});
|
||||
getExclamationMarks = (numChars: number) => Array(numChars + 1).join('!');
|
||||
this.setState({
|
||||
enthusiasmLevel: this.state.enthusiasmLevel - 1
|
||||
});
|
||||
getExclamationMarks = (numChars: number) =>
|
||||
Array(numChars + 1).join('!');
|
||||
|
||||
render() {
|
||||
return (
|
||||
@@ -242,23 +249,23 @@ export class Hello extends React.Component<Props, State> {
|
||||
const styles = StyleSheet.create({
|
||||
root: {
|
||||
alignItems: 'center',
|
||||
alignSelf: 'center',
|
||||
alignSelf: 'center'
|
||||
},
|
||||
buttons: {
|
||||
flexDirection: 'row',
|
||||
minHeight: 70,
|
||||
alignItems: 'stretch',
|
||||
alignSelf: 'center',
|
||||
borderWidth: 5,
|
||||
borderWidth: 5
|
||||
},
|
||||
button: {
|
||||
flex: 1,
|
||||
paddingVertical: 0,
|
||||
paddingVertical: 0
|
||||
},
|
||||
greeting: {
|
||||
color: '#999',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
<p>Whoa! That's a lot, but let's break it down:</p>
|
||||
@@ -276,7 +283,7 @@ const styles = StyleSheet.create({
|
||||
<span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> renderer <span class="hljs-keyword">from</span> <span class="hljs-string">'react-test-renderer'</span>;
|
||||
|
||||
<span class="hljs-keyword">import</span> {Hello} <span class="hljs-keyword">from</span> <span class="hljs-string">'../Hello'</span>;
|
||||
<span class="hljs-keyword">import</span> { Hello } <span class="hljs-keyword">from</span> <span class="hljs-string">'../Hello'</span>;
|
||||
|
||||
it(<span class="hljs-string">'renders correctly with defaults'</span>, <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">const</span> button = renderer
|
||||
|
||||
@@ -112,7 +112,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token function">getSourceExts</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 string">'ts'</span><span class="token punctuation">,</span> <span class="token string">'tsx'</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>
|
||||
<h2><a class="anchor" aria-hidden="true" id="migrating-to-typescript"></a><a href="#migrating-to-typescript" 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>Migrating to TypeScript</h2>
|
||||
@@ -175,7 +175,7 @@
|
||||
<p>Create a <code>components</code> directory and add the following example.</p>
|
||||
<pre><code class="hljs css language-ts">// components/Hello.tsx
|
||||
import React from 'react';
|
||||
import {Button, StyleSheet, Text, View} from 'react-native';
|
||||
import { Button, StyleSheet, Text, View } from 'react-native';
|
||||
|
||||
export interface Props {
|
||||
name: string;
|
||||
@@ -191,19 +191,26 @@ export class Hello extends React.Component<Props, State> {
|
||||
super(props);
|
||||
|
||||
if ((props.enthusiasmLevel || 0) <= 0) {
|
||||
throw new Error('You could be a little more enthusiastic. :D');
|
||||
throw new Error(
|
||||
'You could be a little more enthusiastic. :D'
|
||||
);
|
||||
}
|
||||
|
||||
this.state = {
|
||||
enthusiasmLevel: props.enthusiasmLevel || 1,
|
||||
enthusiasmLevel: props.enthusiasmLevel || 1
|
||||
};
|
||||
}
|
||||
|
||||
onIncrement = () =>
|
||||
this.setState({enthusiasmLevel: this.state.enthusiasmLevel + 1});
|
||||
this.setState({
|
||||
enthusiasmLevel: this.state.enthusiasmLevel + 1
|
||||
});
|
||||
onDecrement = () =>
|
||||
this.setState({enthusiasmLevel: this.state.enthusiasmLevel - 1});
|
||||
getExclamationMarks = (numChars: number) => Array(numChars + 1).join('!');
|
||||
this.setState({
|
||||
enthusiasmLevel: this.state.enthusiasmLevel - 1
|
||||
});
|
||||
getExclamationMarks = (numChars: number) =>
|
||||
Array(numChars + 1).join('!');
|
||||
|
||||
render() {
|
||||
return (
|
||||
@@ -242,23 +249,23 @@ export class Hello extends React.Component<Props, State> {
|
||||
const styles = StyleSheet.create({
|
||||
root: {
|
||||
alignItems: 'center',
|
||||
alignSelf: 'center',
|
||||
alignSelf: 'center'
|
||||
},
|
||||
buttons: {
|
||||
flexDirection: 'row',
|
||||
minHeight: 70,
|
||||
alignItems: 'stretch',
|
||||
alignSelf: 'center',
|
||||
borderWidth: 5,
|
||||
borderWidth: 5
|
||||
},
|
||||
button: {
|
||||
flex: 1,
|
||||
paddingVertical: 0,
|
||||
paddingVertical: 0
|
||||
},
|
||||
greeting: {
|
||||
color: '#999',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
<p>Whoa! That's a lot, but let's break it down:</p>
|
||||
@@ -276,7 +283,7 @@ const styles = StyleSheet.create({
|
||||
<span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> renderer <span class="hljs-keyword">from</span> <span class="hljs-string">'react-test-renderer'</span>;
|
||||
|
||||
<span class="hljs-keyword">import</span> {Hello} <span class="hljs-keyword">from</span> <span class="hljs-string">'../Hello'</span>;
|
||||
<span class="hljs-keyword">import</span> { Hello } <span class="hljs-keyword">from</span> <span class="hljs-string">'../Hello'</span>;
|
||||
|
||||
it(<span class="hljs-string">'renders correctly with defaults'</span>, <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">const</span> button = renderer
|
||||
|
||||
@@ -71,7 +71,10 @@
|
||||
</script></nav></div><div class="container mainContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/blog/2018/08/27/wkwebview">Introducing new iOS WebViews</a></h1><p class="post-meta">August 27, 2018</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/rsnara" target="_blank" rel="noreferrer noopener">Ramanpreet Nara</a>Software Engineer at Facebook</p></div></header><div><span><p>For a long time now, Apple has discouraged using UIWebViews in favor of WKWebView. In iOS 12, which will be released in the upcoming months, <a href="https://developer.apple.com/videos/play/wwdc2018/234/?time=104">UIWebViews will be formally deprecated</a>. React Native's iOS WebView implementation relies heavily on the UIWebView class. Therefore, in light of these developments, we've built a new native iOS backend to the WebView React Native component that uses WKWebView.</p>
|
||||
<p>The tail end of these changes were landed in <a href="https://github.com/facebook/react-native/commit/33b353c97c31190439a22febbd3d2a9ead49d3c9">this commit</a>, and will become available in the 0.57 release.</p>
|
||||
<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 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>
|
||||
<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 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>
|
||||
<p><code>UIWebView</code> had no legitimate way to facilitate communication between the JavaScript running in the WebView, and React Native. When messages were sent from the WebView, we relied on a hack to deliver them to React Native. Succinctly, we encoded the message data into a url with a special scheme, and navigated the WebView to it. On the native side, we intercepted and cancelled this navigation, parsed the data from the url, and finally called into React Native. This implementation was error prone and insecure. I'm glad to announce that we've leveraged <code>WKWebView</code> features to completely replace it.</p>
|
||||
|
||||
@@ -71,7 +71,10 @@
|
||||
</script></nav></div><div class="container mainContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/blog/2018/08/27/wkwebview">Introducing new iOS WebViews</a></h1><p class="post-meta">August 27, 2018</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/rsnara" target="_blank" rel="noreferrer noopener">Ramanpreet Nara</a>Software Engineer at Facebook</p></div></header><div><span><p>For a long time now, Apple has discouraged using UIWebViews in favor of WKWebView. In iOS 12, which will be released in the upcoming months, <a href="https://developer.apple.com/videos/play/wwdc2018/234/?time=104">UIWebViews will be formally deprecated</a>. React Native's iOS WebView implementation relies heavily on the UIWebView class. Therefore, in light of these developments, we've built a new native iOS backend to the WebView React Native component that uses WKWebView.</p>
|
||||
<p>The tail end of these changes were landed in <a href="https://github.com/facebook/react-native/commit/33b353c97c31190439a22febbd3d2a9ead49d3c9">this commit</a>, and will become available in the 0.57 release.</p>
|
||||
<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 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>
|
||||
<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 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>
|
||||
<p><code>UIWebView</code> had no legitimate way to facilitate communication between the JavaScript running in the WebView, and React Native. When messages were sent from the WebView, we relied on a hack to deliver them to React Native. Succinctly, we encoded the message data into a url with a special scheme, and navigated the WebView to it. On the native side, we intercepted and cancelled this navigation, parsed the data from the url, and finally called into React Native. This implementation was error prone and insecure. I'm glad to announce that we've leveraged <code>WKWebView</code> features to completely replace it.</p>
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>We’ve also added a hook to subscribe to state updates to the users preferences:</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> useColorScheme<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Text<span class="token punctuation">,</span> useColorScheme <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> <span class="token function-variable function">MyComponent</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 keyword">const</span> colorScheme <span class="token operator">=</span> <span class="token function">useColorScheme</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>We’ve also added a hook to subscribe to state updates to the users preferences:</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> useColorScheme<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Text<span class="token punctuation">,</span> useColorScheme <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> <span class="token function-variable function">MyComponent</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 keyword">const</span> colorScheme <span class="token operator">=</span> <span class="token function">useColorScheme</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
+1
-1
@@ -93,7 +93,7 @@
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>We’ve also added a hook to subscribe to state updates to the users preferences:</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> useColorScheme<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Text<span class="token punctuation">,</span> useColorScheme <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> <span class="token function-variable function">MyComponent</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 keyword">const</span> colorScheme <span class="token operator">=</span> <span class="token function">useColorScheme</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
+61
-41
@@ -112,7 +112,10 @@
|
||||
</span></div></article></div><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/blog/2018/08/27/wkwebview">Introducing new iOS WebViews</a></h1><p class="post-meta">August 27, 2018</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/rsnara" target="_blank" rel="noreferrer noopener">Ramanpreet Nara</a>Software Engineer at Facebook</p></div></header><article class="post-content"><div><span><p>For a long time now, Apple has discouraged using UIWebViews in favor of WKWebView. In iOS 12, which will be released in the upcoming months, <a href="https://developer.apple.com/videos/play/wwdc2018/234/?time=104">UIWebViews will be formally deprecated</a>. React Native's iOS WebView implementation relies heavily on the UIWebView class. Therefore, in light of these developments, we've built a new native iOS backend to the WebView React Native component that uses WKWebView.</p>
|
||||
<p>The tail end of these changes were landed in <a href="https://github.com/facebook/react-native/commit/33b353c97c31190439a22febbd3d2a9ead49d3c9">this commit</a>, and will become available in the 0.57 release.</p>
|
||||
<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 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>
|
||||
<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 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>
|
||||
<p><code>UIWebView</code> had no legitimate way to facilitate communication between the JavaScript running in the WebView, and React Native. When messages were sent from the WebView, we relied on a hack to deliver them to React Native. Succinctly, we encoded the message data into a url with a special scheme, and navigated the WebView to it. On the native side, we intercepted and cancelled this navigation, parsed the data from the url, and finally called into React Native. This implementation was error prone and insecure. I'm glad to announce that we've leveraged <code>WKWebView</code> features to completely replace it.</p>
|
||||
@@ -297,7 +300,7 @@ accessibilityStates={[“selected”]}
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token function">getSourceExts</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 string">'ts'</span><span class="token punctuation">,</span> <span class="token string">'tsx'</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>
|
||||
<h2><a class="anchor" aria-hidden="true" id="migrating-to-typescript"></a><a href="#migrating-to-typescript" 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>Migrating to TypeScript</h2>
|
||||
@@ -360,7 +363,7 @@ accessibilityStates={[“selected”]}
|
||||
<p>Create a <code>components</code> directory and add the following example.</p>
|
||||
<pre><code class="hljs css language-ts">// components/Hello.tsx
|
||||
import React from 'react';
|
||||
import {Button, StyleSheet, Text, View} from 'react-native';
|
||||
import { Button, StyleSheet, Text, View } from 'react-native';
|
||||
|
||||
export interface Props {
|
||||
name: string;
|
||||
@@ -376,19 +379,26 @@ export class Hello extends React.Component<Props, State> {
|
||||
super(props);
|
||||
|
||||
if ((props.enthusiasmLevel || 0) <= 0) {
|
||||
throw new Error('You could be a little more enthusiastic. :D');
|
||||
throw new Error(
|
||||
'You could be a little more enthusiastic. :D'
|
||||
);
|
||||
}
|
||||
|
||||
this.state = {
|
||||
enthusiasmLevel: props.enthusiasmLevel || 1,
|
||||
enthusiasmLevel: props.enthusiasmLevel || 1
|
||||
};
|
||||
}
|
||||
|
||||
onIncrement = () =>
|
||||
this.setState({enthusiasmLevel: this.state.enthusiasmLevel + 1});
|
||||
this.setState({
|
||||
enthusiasmLevel: this.state.enthusiasmLevel + 1
|
||||
});
|
||||
onDecrement = () =>
|
||||
this.setState({enthusiasmLevel: this.state.enthusiasmLevel - 1});
|
||||
getExclamationMarks = (numChars: number) => Array(numChars + 1).join('!');
|
||||
this.setState({
|
||||
enthusiasmLevel: this.state.enthusiasmLevel - 1
|
||||
});
|
||||
getExclamationMarks = (numChars: number) =>
|
||||
Array(numChars + 1).join('!');
|
||||
|
||||
render() {
|
||||
return (
|
||||
@@ -427,23 +437,23 @@ export class Hello extends React.Component<Props, State> {
|
||||
const styles = StyleSheet.create({
|
||||
root: {
|
||||
alignItems: 'center',
|
||||
alignSelf: 'center',
|
||||
alignSelf: 'center'
|
||||
},
|
||||
buttons: {
|
||||
flexDirection: 'row',
|
||||
minHeight: 70,
|
||||
alignItems: 'stretch',
|
||||
alignSelf: 'center',
|
||||
borderWidth: 5,
|
||||
borderWidth: 5
|
||||
},
|
||||
button: {
|
||||
flex: 1,
|
||||
paddingVertical: 0,
|
||||
paddingVertical: 0
|
||||
},
|
||||
greeting: {
|
||||
color: '#999',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
<p>Whoa! That's a lot, but let's break it down:</p>
|
||||
@@ -461,7 +471,7 @@ const styles = StyleSheet.create({
|
||||
<span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> renderer <span class="hljs-keyword">from</span> <span class="hljs-string">'react-test-renderer'</span>;
|
||||
|
||||
<span class="hljs-keyword">import</span> {Hello} <span class="hljs-keyword">from</span> <span class="hljs-string">'../Hello'</span>;
|
||||
<span class="hljs-keyword">import</span> { Hello } <span class="hljs-keyword">from</span> <span class="hljs-string">'../Hello'</span>;
|
||||
|
||||
it(<span class="hljs-string">'renders correctly with defaults'</span>, <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">const</span> button = renderer
|
||||
@@ -568,10 +578,13 @@ it(<span class="hljs-string">'renders correctly with defaults'</span>, <span cla
|
||||
<hr style="clear: both; margin-bottom: 20px"/>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example-usage"></a><a href="#example-usage" 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>Example Usage</h2>
|
||||
<p>Here's an example which builds a keyboard toolbar button to reset <code><TextInput></code> state.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">TextInputAccessoryViewExample</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><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 operator">></span> <span class="token punctuation">{</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">TextInputAccessoryViewExample</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><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 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 punctuation">:</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>
|
||||
@@ -581,13 +594,15 @@ it(<span class="hljs-string">'renders correctly with defaults'</span>, <span cla
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TextInput</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>default<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">inputAccessoryViewID</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 attr-name">onChangeText</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">text</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 punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">onChangeText</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">text</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 punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||||
<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 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">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 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">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 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">=</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">
|
||||
@@ -754,10 +769,10 @@ const<span class="hljs-built_in"> client </span>= new AWSAppSyncClient({
|
||||
<h2><a class="anchor" aria-hidden="true" id="now-for-the-react-native"></a><a href="#now-for-the-react-native" 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>Now, for the React Native</h2>
|
||||
<p>Alrighty. Now that we know what we are building and how the animation works, we can get down to the code — the reason you are really here.</p>
|
||||
<p>The main piece of this puzzle is <a href="/docs/maskedviewios.html">MaskedViewIOS</a>, a core React Native component.</p>
|
||||
<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>
|
||||
<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 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">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>
|
||||
@@ -766,14 +781,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 punctuation">:</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 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">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>
|
||||
@@ -799,14 +814,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 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>
|
||||
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 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 comment">// This is important!</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>
|
||||
@@ -822,9 +837,9 @@ const<span class="hljs-built_in"> client </span>= new AWSAppSyncClient({
|
||||
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 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 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>
|
||||
@@ -832,10 +847,10 @@ const<span class="hljs-built_in"> client </span>= new AWSAppSyncClient({
|
||||
<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 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>
|
||||
@@ -843,21 +858,25 @@ const<span class="hljs-built_in"> client </span>= new AWSAppSyncClient({
|
||||
<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>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</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>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Now that we have these style objects, we can use them when rendering the snippet of the view from earlier in the post. Note that only <code>Animated.View</code>, <code>Animated.Text</code>, and <code>Animated.Image</code> are able to use style objects that use <code>Animated.Value</code>.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">const</span> fullScreenBlueLayer <span class="token operator">=</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>fullScreenBlueLayer<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> fullScreenWhiteLayer <span class="token operator">=</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>fullScreenWhiteLayer<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></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 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>fullScreenBlueLayer<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 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>fullScreenWhiteLayer<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">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>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 punctuation">:</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>
|
||||
@@ -867,7 +886,8 @@ const<span class="hljs-built_in"> client </span>= new AWSAppSyncClient({
|
||||
</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">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 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">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 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">
|
||||
@@ -880,10 +900,10 @@ const<span class="hljs-built_in"> client </span>= new AWSAppSyncClient({
|
||||
<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 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>
|
||||
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 punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</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>
|
||||
|
||||
@@ -540,7 +540,7 @@ $ <span class="token function">npm</span> start
|
||||
<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 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 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>
|
||||
@@ -548,8 +548,8 @@ $ <span class="token function">npm</span> start
|
||||
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 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 punctuation">,</span> <span class="token comment">// toggle</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</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>
|
||||
<span class="token attr-name">selected</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>
|
||||
|
||||
@@ -306,12 +306,14 @@ index e98ebb0.<span class="hljs-number">.2</span>fb6a11 <span class="hljs-number
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Next, register your task in on <code>AppRegistry</code>:</p>
|
||||
<pre><code class="hljs css language-jsx">AppRegistry<span class="token punctuation">.</span><span class="token function">registerHeadlessTask</span><span class="token punctuation">(</span><span class="token string">'SomeTaskName'</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">'SomeTaskName'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx">AppRegistry<span class="token punctuation">.</span><span class="token function">registerHeadlessTask</span><span class="token punctuation">(</span><span class="token string">'SomeTaskName'</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">'SomeTaskName'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Using Headless JS does require some native Java code to be written in order to allow you to start up the service when needed. Take a look at our new <a href="/docs/headless-js-android">Headless JS docs</a> to learn more!</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="the-keyboard-api"></a><a href="#the-keyboard-api" 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>The Keyboard API</h2>
|
||||
<p>Working with the on-screen keyboard is now easier with <a href="/docs/keyboard"><code>Keyboard</code></a>. You can now listen for native keyboard events and react to them. For example, to dismiss the active keyboard, simply call <code>Keyboard.dismiss()</code>:</p>
|
||||
<pre><code class="hljs css language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span>Keyboard<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> Keyboard <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 comment">// Hide that keyboard!</span>
|
||||
Keyboard<span class="token punctuation">.</span><span class="token function">dismiss</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -477,12 +479,12 @@ $ 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 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>
|
||||
<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>
|
||||
<span class="token string">'All examples in this app will be affected. '</span> <span class="token operator">+</span>
|
||||
<span class="token string">'Check them out to see what they look like in RTL layout.'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'Check them out to see what they look like in RTL layout.'</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
|
||||
@@ -255,9 +255,9 @@
|
||||
<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 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> 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>
|
||||
|
||||
@@ -255,9 +255,9 @@
|
||||
<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 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> 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>
|
||||
|
||||
@@ -16,17 +16,17 @@
|
||||
<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 punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</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>
|
||||
AccessibilityInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleScreenReaderToggled<span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleScreenReaderToggled
|
||||
<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 punctuation">:</span> isEnabled<span class="token punctuation">,</span>
|
||||
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>
|
||||
@@ -34,13 +34,13 @@
|
||||
<span class="token function">componentWillUnmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
AccessibilityInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleScreenReaderToggled<span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleScreenReaderToggled
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<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 punctuation">:</span> isEnabled<span class="token punctuation">,</span>
|
||||
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>
|
||||
|
||||
@@ -49,7 +49,10 @@
|
||||
<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 punctuation">></span></span><span class="token plain-text">
|
||||
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 punctuation">:</span> <span class="token string">'disabled'</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 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>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -16,17 +16,17 @@
|
||||
<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 punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</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>
|
||||
AccessibilityInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleScreenReaderToggled<span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleScreenReaderToggled
|
||||
<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 punctuation">:</span> isEnabled<span class="token punctuation">,</span>
|
||||
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>
|
||||
@@ -34,13 +34,13 @@
|
||||
<span class="token function">componentWillUnmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
AccessibilityInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleScreenReaderToggled<span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleScreenReaderToggled
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<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 punctuation">:</span> isEnabled<span class="token punctuation">,</span>
|
||||
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>
|
||||
|
||||
@@ -49,7 +49,10 @@
|
||||
<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 punctuation">></span></span><span class="token plain-text">
|
||||
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 punctuation">:</span> <span class="token string">'disabled'</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 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>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
+11
-10
@@ -35,13 +35,13 @@
|
||||
<span class="token punctuation">{</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>
|
||||
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 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><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>
|
||||
</code></pre>
|
||||
<p>Example with custom buttons:</p>
|
||||
@@ -52,14 +52,15 @@
|
||||
<span class="token punctuation">{</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>
|
||||
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 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>
|
||||
<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>
|
||||
<span class="token string">'secure-text'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'secure-text'</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Example with the default button and a custom callback:</p>
|
||||
@@ -68,7 +69,7 @@
|
||||
<span class="token keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span><span class="token parameter">text</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">'Your username is '</span> <span class="token operator">+</span> text<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'default'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'default'</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><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</h3>
|
||||
@@ -109,7 +110,7 @@
|
||||
<span class="token punctuation">[</span>callbackOrButtons<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>type<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>defaultValue<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>keyboardType<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>keyboardType<span class="token punctuation">]</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Create and display a prompt to enter some text.</p>
|
||||
|
||||
@@ -35,13 +35,13 @@
|
||||
<span class="token punctuation">{</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>
|
||||
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 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><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>
|
||||
</code></pre>
|
||||
<p>Example with custom buttons:</p>
|
||||
@@ -52,14 +52,15 @@
|
||||
<span class="token punctuation">{</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>
|
||||
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 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>
|
||||
<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>
|
||||
<span class="token string">'secure-text'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'secure-text'</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Example with the default button and a custom callback:</p>
|
||||
@@ -68,7 +69,7 @@
|
||||
<span class="token keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span><span class="token parameter">text</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">'Your username is '</span> <span class="token operator">+</span> text<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'default'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'default'</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><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</h3>
|
||||
@@ -109,7 +110,7 @@
|
||||
<span class="token punctuation">[</span>callbackOrButtons<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>type<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>defaultValue<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>keyboardType<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>keyboardType<span class="token punctuation">]</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Create and display a prompt to enter some text.</p>
|
||||
|
||||
@@ -18,8 +18,8 @@
|
||||
<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 punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// Animate to final value of 1</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</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>
|
||||
<p>Refer to the <a href="/docs/0.10/animations#animated-api">Animations</a> guide to see additional examples of <code>Animated</code> in action.</p>
|
||||
@@ -40,7 +40,7 @@
|
||||
<p>In most cases, you will be using <code>timing()</code>. By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="working-with-animations"></a><a href="#working-with-animations" 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>Working with animations</h3>
|
||||
<p>Animations are started by calling <code>start()</code> on your animation. <code>start()</code> takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with <code>{finished: true}</code>. If the animation is done because <code>stop()</code> was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive <code>{finished: false}</code>.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">this</span><span class="token punctuation">.</span>animateValue<span class="token punctuation">.</span><span class="token function">spring</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 parameter"><span class="token punctuation">{</span>finished<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">this</span><span class="token punctuation">.</span>animateValue<span class="token punctuation">.</span><span class="token function">spring</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 parameter"><span class="token punctuation">{</span> finished <span class="token punctuation">}</span></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>finished<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">'Animation was completed'</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>
|
||||
|
||||
@@ -18,8 +18,8 @@
|
||||
<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 punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// Animate to final value of 1</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</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>
|
||||
<p>Refer to the <a href="/docs/0.10/animations#animated-api">Animations</a> guide to see additional examples of <code>Animated</code> in action.</p>
|
||||
@@ -40,7 +40,7 @@
|
||||
<p>In most cases, you will be using <code>timing()</code>. By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="working-with-animations"></a><a href="#working-with-animations" 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>Working with animations</h3>
|
||||
<p>Animations are started by calling <code>start()</code> on your animation. <code>start()</code> takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with <code>{finished: true}</code>. If the animation is done because <code>stop()</code> was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive <code>{finished: false}</code>.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">this</span><span class="token punctuation">.</span>animateValue<span class="token punctuation">.</span><span class="token function">spring</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 parameter"><span class="token punctuation">{</span>finished<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">this</span><span class="token punctuation">.</span>animateValue<span class="token punctuation">.</span><span class="token function">spring</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 parameter"><span class="token punctuation">{</span> finished <span class="token punctuation">}</span></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>finished<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">'Animation was completed'</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>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<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 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 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 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>
|
||||
@@ -27,15 +27,15 @@
|
||||
<span class="token keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
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>
|
||||
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 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 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 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><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>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<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 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 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 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>
|
||||
@@ -27,15 +27,15 @@
|
||||
<span class="token keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
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>
|
||||
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 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 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 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><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>
|
||||
|
||||
+23
-23
@@ -138,7 +138,7 @@
|
||||
<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 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>
|
||||
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,19 +149,19 @@
|
||||
<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 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>
|
||||
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 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">// 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 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>
|
||||
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>
|
||||
</code></pre>
|
||||
<p>If one animation is stopped or interrupted, then all other animations in the group are also stopped. <code>Animated.parallel</code> has a <code>stopTogether</code> option that can be set to <code>false</code> to disable this.</p>
|
||||
@@ -173,7 +173,7 @@
|
||||
<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 punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</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>
|
||||
@@ -181,7 +181,7 @@ Animated<span class="token punctuation">.</span><span class="token function">spr
|
||||
<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 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>
|
||||
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>
|
||||
@@ -198,7 +198,7 @@ Animated<span class="token punctuation">.</span><span class="token function">spr
|
||||
<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 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>
|
||||
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>
|
||||
@@ -218,18 +218,18 @@ Animated<span class="token punctuation">.</span><span class="token function">spr
|
||||
<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 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>
|
||||
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 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>
|
||||
<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 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>
|
||||
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>
|
||||
<p>The <code>leader</code> and <code>follower</code> animated values would be implemented using <code>Animated.ValueXY()</code>. <code>ValueXY</code> is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two <code>Animated.Value</code> instances and some helper functions that call through to them, making <code>ValueXY</code> a drop-in replacement for <code>Value</code> in many cases. It allows us to track both x and y values in the example above.</p>
|
||||
@@ -267,7 +267,7 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<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 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 punctuation">,</span> <span class="token comment">// <-- Add this</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>
|
||||
@@ -278,11 +278,11 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<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>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>
|
||||
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 punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</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>
|
||||
@@ -296,10 +296,10 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<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 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 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> 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>
|
||||
</code></pre>
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
<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 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>
|
||||
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,19 +149,19 @@
|
||||
<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 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>
|
||||
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 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">// 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 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>
|
||||
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>
|
||||
</code></pre>
|
||||
<p>If one animation is stopped or interrupted, then all other animations in the group are also stopped. <code>Animated.parallel</code> has a <code>stopTogether</code> option that can be set to <code>false</code> to disable this.</p>
|
||||
@@ -173,7 +173,7 @@
|
||||
<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 punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</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>
|
||||
@@ -181,7 +181,7 @@ Animated<span class="token punctuation">.</span><span class="token function">spr
|
||||
<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 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>
|
||||
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>
|
||||
@@ -198,7 +198,7 @@ Animated<span class="token punctuation">.</span><span class="token function">spr
|
||||
<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 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>
|
||||
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>
|
||||
@@ -218,18 +218,18 @@ Animated<span class="token punctuation">.</span><span class="token function">spr
|
||||
<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 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>
|
||||
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 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>
|
||||
<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 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>
|
||||
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>
|
||||
<p>The <code>leader</code> and <code>follower</code> animated values would be implemented using <code>Animated.ValueXY()</code>. <code>ValueXY</code> is a handy way to deal with 2D interactions, such as panning or dragging. It is a wrapper that contains two <code>Animated.Value</code> instances and some helper functions that call through to them, making <code>ValueXY</code> a drop-in replacement for <code>Value</code> in many cases. It allows us to track both x and y values in the example above.</p>
|
||||
@@ -267,7 +267,7 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<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 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 punctuation">,</span> <span class="token comment">// <-- Add this</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>
|
||||
@@ -278,11 +278,11 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<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>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>
|
||||
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 punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</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>
|
||||
@@ -296,10 +296,10 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<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 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 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> 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>
|
||||
</code></pre>
|
||||
|
||||
@@ -43,7 +43,9 @@
|
||||
<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="registercomponent"></a><a href="#registercomponent" 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>registerComponent()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span>appKey<span class="token punctuation">,</span> componentProvider<span class="token punctuation">,</span> <span class="token punctuation">[</span>section<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx">AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span>appKey<span class="token punctuation">,</span> componentProvider<span class="token punctuation">,</span> <span class="token punctuation">[</span>
|
||||
section
|
||||
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Registers an app's root component.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
|
||||
@@ -43,7 +43,9 @@
|
||||
<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="registercomponent"></a><a href="#registercomponent" 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>registerComponent()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span>appKey<span class="token punctuation">,</span> componentProvider<span class="token punctuation">,</span> <span class="token punctuation">[</span>section<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx">AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span>appKey<span class="token punctuation">,</span> componentProvider<span class="token punctuation">,</span> <span class="token punctuation">[</span>
|
||||
section
|
||||
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Registers an app's root component.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
|
||||
+12
-6
@@ -23,20 +23,26 @@
|
||||
<p>For more information, see <a href="https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html">Apple's documentation</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="basic-usage"></a><a href="#basic-usage" 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>Basic Usage</h3>
|
||||
<p>To see the current state, you can check <code>AppState.currentState</code>, which will be kept up-to-date. However, <code>currentState</code> will be null at launch while <code>AppState</code> retrieves it over the bridge.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>AppState<span class="token punctuation">,</span> Text<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> AppState<span class="token punctuation">,</span> Text <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">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 punctuation">:</span> AppState<span class="token punctuation">.</span>currentState<span class="token punctuation">,</span>
|
||||
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>
|
||||
AppState<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'change'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_handleAppStateChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
AppState<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleAppStateChange
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token function">componentWillUnmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
AppState<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'change'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_handleAppStateChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
AppState<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleAppStateChange
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token function-variable function">_handleAppStateChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">nextAppState</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
@@ -46,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 punctuation">:</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>
|
||||
|
||||
@@ -23,20 +23,26 @@
|
||||
<p>For more information, see <a href="https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html">Apple's documentation</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="basic-usage"></a><a href="#basic-usage" 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>Basic Usage</h3>
|
||||
<p>To see the current state, you can check <code>AppState.currentState</code>, which will be kept up-to-date. However, <code>currentState</code> will be null at launch while <code>AppState</code> retrieves it over the bridge.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>AppState<span class="token punctuation">,</span> Text<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> AppState<span class="token punctuation">,</span> Text <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">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 punctuation">:</span> AppState<span class="token punctuation">.</span>currentState<span class="token punctuation">,</span>
|
||||
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>
|
||||
AppState<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'change'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_handleAppStateChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
AppState<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleAppStateChange
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token function">componentWillUnmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
AppState<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'change'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_handleAppStateChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
AppState<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleAppStateChange
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token function-variable function">_handleAppStateChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">nextAppState</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
@@ -46,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 punctuation">:</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>
|
||||
|
||||
+27
-16
@@ -18,7 +18,10 @@
|
||||
<p>The <code>AsyncStorage</code> JavaScript code is a facade that provides a clear JavaScript API, real <code>Error</code> objects, and non-multi functions. Each method in the API returns a <code>Promise</code> object.</p>
|
||||
<p>Persisting data:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">try</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">await</span> AsyncStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'@MySuperStore:key'</span><span class="token punctuation">,</span> <span class="token string">'I like to save it.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">await</span> AsyncStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'@MySuperStore:key'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'I like to save it.'</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// Error saving data</span>
|
||||
<span class="token punctuation">}</span>
|
||||
@@ -38,21 +41,29 @@
|
||||
<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 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>
|
||||
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 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>
|
||||
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><span class="token string">'UID123'</span><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>UID123_object<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>
|
||||
AsyncStorage<span class="token punctuation">.</span><span class="token function">mergeItem</span><span class="token punctuation">(</span><span class="token string">'UID123'</span><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>UID123_delta<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>
|
||||
AsyncStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'UID123'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> result</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token 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>
|
||||
<span class="token string">'UID123'</span><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>UID123_object<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>
|
||||
AsyncStorage<span class="token punctuation">.</span><span class="token function">mergeItem</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'UID123'</span><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>UID123_delta<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>
|
||||
AsyncStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'UID123'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> result</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// Console log result:</span>
|
||||
<span class="token comment">// => {'name':'Chris','age':31,'traits':</span>
|
||||
@@ -63,35 +74,35 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<span class="token keyword">let</span> UID234_object <span class="token operator">=</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>
|
||||
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 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>
|
||||
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 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>
|
||||
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 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>
|
||||
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>
|
||||
<span class="token punctuation">[</span><span class="token string">'UID234'</span><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>UID234_object<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span><span class="token string">'UID345'</span><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>UID345_object<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span><span class="token string">'UID345'</span><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>UID345_object<span class="token punctuation">)</span><span class="token punctuation">]</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">let</span> multi_merge_pairs <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">[</span><span class="token string">'UID234'</span><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>UID234_delta<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span><span class="token string">'UID345'</span><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>UID345_delta<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span><span class="token string">'UID345'</span><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>UID345_delta<span class="token punctuation">)</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">multiSet</span><span class="token punctuation">(</span>multi_set_pairs<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -18,7 +18,10 @@
|
||||
<p>The <code>AsyncStorage</code> JavaScript code is a facade that provides a clear JavaScript API, real <code>Error</code> objects, and non-multi functions. Each method in the API returns a <code>Promise</code> object.</p>
|
||||
<p>Persisting data:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">try</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">await</span> AsyncStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'@MySuperStore:key'</span><span class="token punctuation">,</span> <span class="token string">'I like to save it.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">await</span> AsyncStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'@MySuperStore:key'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'I like to save it.'</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// Error saving data</span>
|
||||
<span class="token punctuation">}</span>
|
||||
@@ -38,21 +41,29 @@
|
||||
<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 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>
|
||||
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 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>
|
||||
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><span class="token string">'UID123'</span><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>UID123_object<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>
|
||||
AsyncStorage<span class="token punctuation">.</span><span class="token function">mergeItem</span><span class="token punctuation">(</span><span class="token string">'UID123'</span><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>UID123_delta<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>
|
||||
AsyncStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'UID123'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> result</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token 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>
|
||||
<span class="token string">'UID123'</span><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>UID123_object<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>
|
||||
AsyncStorage<span class="token punctuation">.</span><span class="token function">mergeItem</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'UID123'</span><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>UID123_delta<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>
|
||||
AsyncStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'UID123'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> result</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// Console log result:</span>
|
||||
<span class="token comment">// => {'name':'Chris','age':31,'traits':</span>
|
||||
@@ -63,35 +74,35 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<span class="token keyword">let</span> UID234_object <span class="token operator">=</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>
|
||||
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 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>
|
||||
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 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>
|
||||
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 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>
|
||||
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>
|
||||
<span class="token punctuation">[</span><span class="token string">'UID234'</span><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>UID234_object<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span><span class="token string">'UID345'</span><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>UID345_object<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span><span class="token string">'UID345'</span><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>UID345_object<span class="token punctuation">)</span><span class="token punctuation">]</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">let</span> multi_merge_pairs <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">[</span><span class="token string">'UID234'</span><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>UID234_delta<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span><span class="token string">'UID345'</span><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>UID345_delta<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span><span class="token string">'UID345'</span><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>UID345_delta<span class="token punctuation">)</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">multiSet</span><span class="token punctuation">(</span>multi_set_pairs<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -87,11 +87,11 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
|
||||
initialProperties:props];
|
||||
</code></pre>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>View<span class="token punctuation">,</span> Image<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">import</span> <span class="token punctuation">{</span> View<span class="token punctuation">,</span> Image <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">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 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 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>
|
||||
|
||||
@@ -87,11 +87,11 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
|
||||
initialProperties:props];
|
||||
</code></pre>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>View<span class="token punctuation">,</span> Image<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">import</span> <span class="token punctuation">{</span> View<span class="token punctuation">,</span> Image <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">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 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 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>
|
||||
|
||||
@@ -164,15 +164,18 @@
|
||||
<li>Return a <code>WebView</code> component with the prop <code>nativeConfig.component</code> set to your native component (see below)</li>
|
||||
</ul>
|
||||
<p>To get your native component, you must use <code>requireNativeComponent</code>: the same as for regular custom components. However, you must pass in an extra third argument, <code>WebView.extraNativeComponentConfig</code>. This third argument contains prop types that are only required for native code.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">,</span> PropTypes<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>WebView<span class="token punctuation">,</span> requireNativeComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component<span class="token punctuation">,</span> PropTypes <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> WebView<span class="token punctuation">,</span> requireNativeComponent <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">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> WebView<span class="token punctuation">.</span>propTypes<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">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 punctuation">:</span> RCTCustomWebView<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">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 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>
|
||||
<span class="token punctuation">}</span>
|
||||
@@ -180,7 +183,7 @@
|
||||
<span class="token keyword">const</span> RCTCustomWebView <span class="token operator">=</span> <span class="token function">requireNativeComponent</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'RCTCustomWebView'</span><span class="token punctuation">,</span>
|
||||
CustomWebView<span class="token punctuation">,</span>
|
||||
WebView<span class="token punctuation">.</span>extraNativeComponentConfig<span class="token punctuation">,</span>
|
||||
WebView<span class="token punctuation">.</span>extraNativeComponentConfig
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>If you want to add custom props to your native component, you can use <code>nativeConfig.props</code> on the web view.</p>
|
||||
@@ -190,15 +193,15 @@
|
||||
<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 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>
|
||||
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 punctuation">:</span> <span class="token string">'about:blank'</span><span class="token punctuation">,</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>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span>onNavigationCompleted<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>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span> onNavigationCompleted <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>
|
||||
onNavigationCompleted <span class="token operator">&&</span> <span class="token function">onNavigationCompleted</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 punctuation">;</span>
|
||||
|
||||
@@ -210,8 +213,8 @@
|
||||
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>
|
||||
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>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -227,9 +230,9 @@
|
||||
<span class="token operator">...</span>WebView<span class="token punctuation">.</span>extraNativeComponentConfig<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 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>
|
||||
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>
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-code">Native Code</a><ul class="toc-headings"><li><a href="#adding-new-properties">Adding New Properties</a></li><li><a href="#adding-new-events">Adding New Events</a></li></ul></li><li><a href="#javascript-interface">JavaScript Interface</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who's using React Native?</a><a href="http://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'));
|
||||
|
||||
@@ -164,15 +164,18 @@
|
||||
<li>Return a <code>WebView</code> component with the prop <code>nativeConfig.component</code> set to your native component (see below)</li>
|
||||
</ul>
|
||||
<p>To get your native component, you must use <code>requireNativeComponent</code>: the same as for regular custom components. However, you must pass in an extra third argument, <code>WebView.extraNativeComponentConfig</code>. This third argument contains prop types that are only required for native code.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">,</span> PropTypes<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>WebView<span class="token punctuation">,</span> requireNativeComponent<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component<span class="token punctuation">,</span> PropTypes <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> WebView<span class="token punctuation">,</span> requireNativeComponent <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">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> WebView<span class="token punctuation">.</span>propTypes<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">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 punctuation">:</span> RCTCustomWebView<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">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 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>
|
||||
<span class="token punctuation">}</span>
|
||||
@@ -180,7 +183,7 @@
|
||||
<span class="token keyword">const</span> RCTCustomWebView <span class="token operator">=</span> <span class="token function">requireNativeComponent</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'RCTCustomWebView'</span><span class="token punctuation">,</span>
|
||||
CustomWebView<span class="token punctuation">,</span>
|
||||
WebView<span class="token punctuation">.</span>extraNativeComponentConfig<span class="token punctuation">,</span>
|
||||
WebView<span class="token punctuation">.</span>extraNativeComponentConfig
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>If you want to add custom props to your native component, you can use <code>nativeConfig.props</code> on the web view.</p>
|
||||
@@ -190,15 +193,15 @@
|
||||
<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 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>
|
||||
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 punctuation">:</span> <span class="token string">'about:blank'</span><span class="token punctuation">,</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>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span>onNavigationCompleted<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>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span> onNavigationCompleted <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>
|
||||
onNavigationCompleted <span class="token operator">&&</span> <span class="token function">onNavigationCompleted</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 punctuation">;</span>
|
||||
|
||||
@@ -210,8 +213,8 @@
|
||||
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>
|
||||
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>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -227,9 +230,9 @@
|
||||
<span class="token operator">...</span>WebView<span class="token punctuation">.</span>extraNativeComponentConfig<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 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>
|
||||
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>
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-code">Native Code</a><ul class="toc-headings"><li><a href="#adding-new-properties">Adding New Properties</a></li><li><a href="#adding-new-events">Adding New Events</a></li></ul></li><li><a href="#javascript-interface">JavaScript Interface</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who's using React Native?</a><a href="http://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'));
|
||||
|
||||
@@ -127,9 +127,13 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
<li>Return a <code>WebView</code> component with the prop <code>nativeConfig.component</code> set to your native component (see below)</li>
|
||||
</ul>
|
||||
<p>To get your native component, you must use <code>requireNativeComponent</code>: the same as for regular custom components. However, you must pass in an extra third argument, <code>WebView.extraNativeComponentConfig</code>. This third argument contains prop types that are only required for native code.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">,</span> PropTypes<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>WebView<span class="token punctuation">,</span> requireNativeComponent<span class="token punctuation">,</span> NativeModules<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> <span class="token punctuation">{</span>CustomWebViewManager<span class="token punctuation">}</span> <span class="token operator">=</span> NativeModules<span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component<span class="token punctuation">,</span> PropTypes <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>
|
||||
WebView<span class="token punctuation">,</span>
|
||||
requireNativeComponent<span class="token punctuation">,</span>
|
||||
NativeModules
|
||||
<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> <span class="token punctuation">{</span> CustomWebViewManager <span class="token punctuation">}</span> <span class="token operator">=</span> NativeModules<span class="token punctuation">;</span>
|
||||
|
||||
<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> WebView<span class="token punctuation">.</span>propTypes<span class="token punctuation">;</span>
|
||||
@@ -140,7 +144,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</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 punctuation">:</span> RCTCustomWebView<span class="token punctuation">,</span>
|
||||
viewManager<span class="token punctuation">:</span> CustomWebViewManager<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>
|
||||
@@ -150,7 +154,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
<span class="token keyword">const</span> RCTCustomWebView <span class="token operator">=</span> <span class="token function">requireNativeComponent</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'RCTCustomWebView'</span><span class="token punctuation">,</span>
|
||||
CustomWebView<span class="token punctuation">,</span>
|
||||
WebView<span class="token punctuation">.</span>extraNativeComponentConfig<span class="token punctuation">,</span>
|
||||
WebView<span class="token punctuation">.</span>extraNativeComponentConfig
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>If you want to add custom props to your native component, you can use <code>nativeConfig.props</code> on the web view. For iOS, you should also set the <code>nativeConfig.viewManager</code> prop with your custom WebView ViewManager as in the example above.</p>
|
||||
@@ -160,15 +164,15 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</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 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>
|
||||
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 punctuation">:</span> <span class="token string">'about:blank'</span><span class="token punctuation">,</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>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span>onNavigationCompleted<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>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span> onNavigationCompleted <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>
|
||||
onNavigationCompleted <span class="token operator">&&</span> <span class="token function">onNavigationCompleted</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 punctuation">;</span>
|
||||
|
||||
@@ -180,9 +184,9 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
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>
|
||||
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 punctuation">:</span> CustomWebViewManager<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>
|
||||
@@ -198,9 +202,9 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
<span class="token operator">...</span>WebView<span class="token punctuation">.</span>extraNativeComponentConfig<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 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>
|
||||
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>
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-code">Native Code</a><ul class="toc-headings"><li><a href="#adding-new-events-and-properties">Adding New Events and Properties</a></li><li><a href="#extending-existing-events">Extending Existing Events</a></li></ul></li><li><a href="#javascript-interface">JavaScript Interface</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who's using React Native?</a><a href="http://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'));
|
||||
|
||||
@@ -127,9 +127,13 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
<li>Return a <code>WebView</code> component with the prop <code>nativeConfig.component</code> set to your native component (see below)</li>
|
||||
</ul>
|
||||
<p>To get your native component, you must use <code>requireNativeComponent</code>: the same as for regular custom components. However, you must pass in an extra third argument, <code>WebView.extraNativeComponentConfig</code>. This third argument contains prop types that are only required for native code.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">,</span> PropTypes<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>WebView<span class="token punctuation">,</span> requireNativeComponent<span class="token punctuation">,</span> NativeModules<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> <span class="token punctuation">{</span>CustomWebViewManager<span class="token punctuation">}</span> <span class="token operator">=</span> NativeModules<span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component<span class="token punctuation">,</span> PropTypes <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>
|
||||
WebView<span class="token punctuation">,</span>
|
||||
requireNativeComponent<span class="token punctuation">,</span>
|
||||
NativeModules
|
||||
<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> <span class="token punctuation">{</span> CustomWebViewManager <span class="token punctuation">}</span> <span class="token operator">=</span> NativeModules<span class="token punctuation">;</span>
|
||||
|
||||
<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> WebView<span class="token punctuation">.</span>propTypes<span class="token punctuation">;</span>
|
||||
@@ -140,7 +144,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</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 punctuation">:</span> RCTCustomWebView<span class="token punctuation">,</span>
|
||||
viewManager<span class="token punctuation">:</span> CustomWebViewManager<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>
|
||||
@@ -150,7 +154,7 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
<span class="token keyword">const</span> RCTCustomWebView <span class="token operator">=</span> <span class="token function">requireNativeComponent</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'RCTCustomWebView'</span><span class="token punctuation">,</span>
|
||||
CustomWebView<span class="token punctuation">,</span>
|
||||
WebView<span class="token punctuation">.</span>extraNativeComponentConfig<span class="token punctuation">,</span>
|
||||
WebView<span class="token punctuation">.</span>extraNativeComponentConfig
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>If you want to add custom props to your native component, you can use <code>nativeConfig.props</code> on the web view. For iOS, you should also set the <code>nativeConfig.viewManager</code> prop with your custom WebView ViewManager as in the example above.</p>
|
||||
@@ -160,15 +164,15 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</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 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>
|
||||
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 punctuation">:</span> <span class="token string">'about:blank'</span><span class="token punctuation">,</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>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span>onNavigationCompleted<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>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span> onNavigationCompleted <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>
|
||||
onNavigationCompleted <span class="token operator">&&</span> <span class="token function">onNavigationCompleted</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 punctuation">;</span>
|
||||
|
||||
@@ -180,9 +184,9 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
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>
|
||||
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 punctuation">:</span> CustomWebViewManager<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>
|
||||
@@ -198,9 +202,9 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
<span class="token operator">...</span>WebView<span class="token punctuation">.</span>extraNativeComponentConfig<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 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>
|
||||
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>
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-code">Native Code</a><ul class="toc-headings"><li><a href="#adding-new-events-and-properties">Adding New Events and Properties</a></li><li><a href="#extending-existing-events">Extending Existing Events</a></li></ul></li><li><a href="#javascript-interface">JavaScript Interface</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who's using React Native?</a><a href="http://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'));
|
||||
|
||||
@@ -97,7 +97,7 @@
|
||||
<p>Warnings will be displayed on screen with a yellow background. These alerts are known as YellowBoxes. Click on the alerts to show more information or to dismiss them.</p>
|
||||
<p>As with a RedBox, you can use <code>console.warn()</code> to trigger a YellowBox.</p>
|
||||
<p>YellowBoxes can be disabled during development by using <code>console.disableYellowBox = true;</code>. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span>YellowBox<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> YellowBox <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
YellowBox<span class="token punctuation">.</span><span class="token function">ignoreWarnings</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'Warning: ...'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>In CI/Xcode, YellowBoxes can also be disabled by setting the <code>IS_TESTING</code> environment variable.</p>
|
||||
|
||||
@@ -97,7 +97,7 @@
|
||||
<p>Warnings will be displayed on screen with a yellow background. These alerts are known as YellowBoxes. Click on the alerts to show more information or to dismiss them.</p>
|
||||
<p>As with a RedBox, you can use <code>console.warn()</code> to trigger a YellowBox.</p>
|
||||
<p>YellowBoxes can be disabled during development by using <code>console.disableYellowBox = true;</code>. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span>YellowBox<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> YellowBox <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
YellowBox<span class="token punctuation">.</span><span class="token function">ignoreWarnings</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'Warning: ...'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>In CI/Xcode, YellowBoxes can also be disabled by setting the <code>IS_TESTING</code> environment variable.</p>
|
||||
|
||||
@@ -260,7 +260,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="measurelayoutrelativetonativenode-onsuccess-onfail"></a><a href="#measurelayoutrelativetonativenode-onsuccess-onfail" 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>measureLayout(relativeToNativeNode, onSuccess, onFail)</h3>
|
||||
<p>Like <code>measure()</code>, but measures the view relative to an ancestor, specified as <code>relativeToNativeNode</code>. This means that the returned x, y are relative to the origin x, y of the ancestor view.</p>
|
||||
<p>As always, to obtain a native node handle for a component, you can use <code>findNodeHandle(component)</code>.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span>findNodeHandle<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> findNodeHandle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="focus"></a><a href="#focus" 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>focus()</h3>
|
||||
<p>Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view.</p>
|
||||
|
||||
@@ -260,7 +260,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="measurelayoutrelativetonativenode-onsuccess-onfail"></a><a href="#measurelayoutrelativetonativenode-onsuccess-onfail" 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>measureLayout(relativeToNativeNode, onSuccess, onFail)</h3>
|
||||
<p>Like <code>measure()</code>, but measures the view relative to an ancestor, specified as <code>relativeToNativeNode</code>. This means that the returned x, y are relative to the origin x, y of the ancestor view.</p>
|
||||
<p>As always, to obtain a native node handle for a component, you can use <code>findNodeHandle(component)</code>.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span>findNodeHandle<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> findNodeHandle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="focus"></a><a href="#focus" 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>focus()</h3>
|
||||
<p>Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view.</p>
|
||||
|
||||
@@ -27,8 +27,8 @@
|
||||
<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 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 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>
|
||||
<p>More complex, multi-select example demonstrating <code>PureComponent</code> usage for perf optimization and avoiding bugs.</p>
|
||||
@@ -47,7 +47,9 @@
|
||||
<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 punctuation">:</span> textColor<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">this</span><span class="token punctuation">.</span>props<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">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">
|
||||
</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>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -55,7 +57,7 @@
|
||||
<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 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>
|
||||
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>
|
||||
|
||||
@@ -65,11 +67,11 @@
|
||||
<span class="token comment">// copy the map rather than modifying state.</span>
|
||||
<span class="token keyword">const</span> selected <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>selected<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
selected<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span> <span class="token operator">!</span>selected<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// toggle</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>selected<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span> selected <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-variable function">_renderItem</span> <span class="token operator">=</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 function-variable function">_renderItem</span> <span class="token operator">=</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">MyListItem</span></span>
|
||||
<span class="token attr-name">id</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>id<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">onPressItem</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>_onPressItem<span class="token punctuation">}</span></span>
|
||||
|
||||
@@ -27,8 +27,8 @@
|
||||
<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 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 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>
|
||||
<p>More complex, multi-select example demonstrating <code>PureComponent</code> usage for perf optimization and avoiding bugs.</p>
|
||||
@@ -47,7 +47,9 @@
|
||||
<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 punctuation">:</span> textColor<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">this</span><span class="token punctuation">.</span>props<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">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">
|
||||
</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>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -55,7 +57,7 @@
|
||||
<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 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>
|
||||
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>
|
||||
|
||||
@@ -65,11 +67,11 @@
|
||||
<span class="token comment">// copy the map rather than modifying state.</span>
|
||||
<span class="token keyword">const</span> selected <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>selected<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
selected<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span> <span class="token operator">!</span>selected<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// toggle</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>selected<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span> selected <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-variable function">_renderItem</span> <span class="token operator">=</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 function-variable function">_renderItem</span> <span class="token operator">=</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">MyListItem</span></span>
|
||||
<span class="token attr-name">id</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>id<span class="token punctuation">}</span></span>
|
||||
<span class="token attr-name">onPressItem</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>_onPressItem<span class="token punctuation">}</span></span>
|
||||
|
||||
@@ -71,7 +71,9 @@
|
||||
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/headless-js-android.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">Headless JS</h1></header><article><div><span><p>Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="the-js-api"></a><a href="#the-js-api" 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>The JS API</h2>
|
||||
<p>A task is an async function that you register on <code>AppRegistry</code>, similar to registering React applications:</p>
|
||||
<pre><code class="hljs css language-jsx">AppRegistry<span class="token punctuation">.</span><span class="token function">registerHeadlessTask</span><span class="token punctuation">(</span><span class="token string">'SomeTaskName'</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">'SomeTaskName'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx">AppRegistry<span class="token punctuation">.</span><span class="token function">registerHeadlessTask</span><span class="token punctuation">(</span><span class="token string">'SomeTaskName'</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">'SomeTaskName'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Then, in <code>SomeTaskName.js</code>:</p>
|
||||
<pre><code class="hljs css language-jsx">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">taskData</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -71,7 +71,9 @@
|
||||
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/headless-js-android.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">Headless JS</h1></header><article><div><span><p>Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="the-js-api"></a><a href="#the-js-api" 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>The JS API</h2>
|
||||
<p>A task is an async function that you register on <code>AppRegistry</code>, similar to registering React applications:</p>
|
||||
<pre><code class="hljs css language-jsx">AppRegistry<span class="token punctuation">.</span><span class="token function">registerHeadlessTask</span><span class="token punctuation">(</span><span class="token string">'SomeTaskName'</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">'SomeTaskName'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx">AppRegistry<span class="token punctuation">.</span><span class="token function">registerHeadlessTask</span><span class="token punctuation">(</span><span class="token string">'SomeTaskName'</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">'SomeTaskName'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Then, in <code>SomeTaskName.js</code>:</p>
|
||||
<pre><code class="hljs css language-jsx">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">taskData</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -31,11 +31,19 @@
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="opencameradialog"></a><a href="#opencameradialog" 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>openCameraDialog()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">ImagePickerIOS<span class="token punctuation">.</span><span class="token function">openCameraDialog</span><span class="token punctuation">(</span>config<span class="token punctuation">,</span> successCallback<span class="token punctuation">,</span> cancelCallback<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx">ImagePickerIOS<span class="token punctuation">.</span><span class="token function">openCameraDialog</span><span class="token punctuation">(</span>
|
||||
config<span class="token punctuation">,</span>
|
||||
successCallback<span class="token punctuation">,</span>
|
||||
cancelCallback
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="openselectdialog"></a><a href="#openselectdialog" 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>openSelectDialog()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">ImagePickerIOS<span class="token punctuation">.</span><span class="token function">openSelectDialog</span><span class="token punctuation">(</span>config<span class="token punctuation">,</span> successCallback<span class="token punctuation">,</span> cancelCallback<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx">ImagePickerIOS<span class="token punctuation">.</span><span class="token function">openSelectDialog</span><span class="token punctuation">(</span>
|
||||
config<span class="token punctuation">,</span>
|
||||
successCallback<span class="token punctuation">,</span>
|
||||
cancelCallback
|
||||
<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="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#canrecordvideos"><code>canRecordVideos()</code></a></li><li><a href="#canusecamera"><code>canUseCamera()</code></a></li><li><a href="#opencameradialog"><code>openCameraDialog()</code></a></li><li><a href="#openselectdialog"><code>openSelectDialog()</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.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who's using React Native?</a><a href="http://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>
|
||||
|
||||
@@ -31,11 +31,19 @@
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="opencameradialog"></a><a href="#opencameradialog" 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>openCameraDialog()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">ImagePickerIOS<span class="token punctuation">.</span><span class="token function">openCameraDialog</span><span class="token punctuation">(</span>config<span class="token punctuation">,</span> successCallback<span class="token punctuation">,</span> cancelCallback<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx">ImagePickerIOS<span class="token punctuation">.</span><span class="token function">openCameraDialog</span><span class="token punctuation">(</span>
|
||||
config<span class="token punctuation">,</span>
|
||||
successCallback<span class="token punctuation">,</span>
|
||||
cancelCallback
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="openselectdialog"></a><a href="#openselectdialog" 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>openSelectDialog()</code></h3>
|
||||
<pre><code class="hljs css language-jsx">ImagePickerIOS<span class="token punctuation">.</span><span class="token function">openSelectDialog</span><span class="token punctuation">(</span>config<span class="token punctuation">,</span> successCallback<span class="token punctuation">,</span> cancelCallback<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx">ImagePickerIOS<span class="token punctuation">.</span><span class="token function">openSelectDialog</span><span class="token punctuation">(</span>
|
||||
config<span class="token punctuation">,</span>
|
||||
successCallback<span class="token punctuation">,</span>
|
||||
cancelCallback
|
||||
<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="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#canrecordvideos"><code>canRecordVideos()</code></a></li><li><a href="#canusecamera"><code>canUseCamera()</code></a></li><li><a href="#opencameradialog"><code>openCameraDialog()</code></a></li><li><a href="#openselectdialog"><code>openSelectDialog()</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.html">Getting Started</a><a href="/docs/tutorial.html">Tutorial</a><a href="/docs/components-and-apis.html">Components and APIs</a><a href="/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/help.html">The React Native Community</a><a href="/showcase.html">Who's using React Native?</a><a href="http://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>
|
||||
|
||||
+19
-11
@@ -101,7 +101,9 @@
|
||||
<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">'./my-icon.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">// 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 punctuation">:</span> <span class="token string">'my-icon-inactive'</span><span class="token punctuation">;</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 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>
|
||||
@@ -118,10 +120,16 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="images-from-hybrid-apps-resources"></a><a href="#images-from-hybrid-apps-resources" 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>Images From Hybrid App's Resources</h2>
|
||||
<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 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>
|
||||
<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">'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 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>
|
||||
<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">'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>
|
||||
@@ -140,11 +148,11 @@
|
||||
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>
|
||||
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 punctuation">:</span> <span class="token string">'Your Body goes here'</span><span class="token punctuation">,</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 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 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>
|
||||
@@ -157,11 +165,11 @@
|
||||
<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">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>
|
||||
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 punctuation">:</span>
|
||||
<span class="token string">'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='</span><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>
|
||||
</code></pre>
|
||||
@@ -176,9 +184,9 @@
|
||||
<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">'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>
|
||||
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 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 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>
|
||||
@@ -193,7 +201,7 @@
|
||||
</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 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>
|
||||
<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>
|
||||
|
||||
+19
-11
@@ -101,7 +101,9 @@
|
||||
<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">'./my-icon.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">// 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 punctuation">:</span> <span class="token string">'my-icon-inactive'</span><span class="token punctuation">;</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 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>
|
||||
@@ -118,10 +120,16 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="images-from-hybrid-apps-resources"></a><a href="#images-from-hybrid-apps-resources" 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>Images From Hybrid App's Resources</h2>
|
||||
<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 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>
|
||||
<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">'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 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>
|
||||
<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">'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>
|
||||
@@ -140,11 +148,11 @@
|
||||
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>
|
||||
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 punctuation">:</span> <span class="token string">'Your Body goes here'</span><span class="token punctuation">,</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 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 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>
|
||||
@@ -157,11 +165,11 @@
|
||||
<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">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>
|
||||
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 punctuation">:</span>
|
||||
<span class="token string">'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='</span><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>
|
||||
</code></pre>
|
||||
@@ -176,9 +184,9 @@
|
||||
<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">'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>
|
||||
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 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 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>
|
||||
@@ -193,7 +201,7 @@
|
||||
</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 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>
|
||||
<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>
|
||||
|
||||
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies <span class="hljs-keyword">f
|
||||
<h5><a class="anchor" aria-hidden="true" id="2-add-your-react-native-code"></a><a href="#2-add-your-react-native-code" 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>2. Add your React Native code</h5>
|
||||
<p>In your <code>index.js</code>, create your component. In our sample here, we will add a <code><Text></code> component within a styled <code><View></code></p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>AppRegistry<span class="token punctuation">,</span> StyleSheet<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View<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">import</span> <span class="token punctuation">{</span>
|
||||
AppRegistry<span class="token punctuation">,</span>
|
||||
StyleSheet<span class="token punctuation">,</span>
|
||||
Text<span class="token punctuation">,</span>
|
||||
View
|
||||
<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">class</span> <span class="token class-name">RNHighScores</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">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies <span class="hljs-keyword">f
|
||||
<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>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">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>highScoresTitle<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">2048 High Scores!</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">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>highScoresTitle<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
2048 High Scores!
|
||||
</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">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>scores<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>contents<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 punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies <span class="hljs-keyword">f
|
||||
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>
|
||||
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 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>
|
||||
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 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>
|
||||
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>
|
||||
|
||||
<span class="token comment">// Module name</span>
|
||||
@@ -499,7 +506,12 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios</spa
|
||||
<h5><a class="anchor" aria-hidden="true" id="2-add-your-react-native-code-1"></a><a href="#2-add-your-react-native-code-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>2. Add your React Native code</h5>
|
||||
<p>In your <code>index.js</code>, create your component. In our sample here, we will add a <code><Text></code> component within a styled <code><View></code>:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>AppRegistry<span class="token punctuation">,</span> StyleSheet<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View<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">import</span> <span class="token punctuation">{</span>
|
||||
AppRegistry<span class="token punctuation">,</span>
|
||||
StyleSheet<span class="token punctuation">,</span>
|
||||
Text<span class="token punctuation">,</span>
|
||||
View
|
||||
<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">class</span> <span class="token class-name">HelloWorld</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">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -513,16 +525,19 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios</spa
|
||||
<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 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>
|
||||
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 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>
|
||||
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>
|
||||
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span><span class="token string">'MyReactNativeApp'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> HelloWorld<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'MyReactNativeApp'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> HelloWorld
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h5><a class="anchor" aria-hidden="true" id="3-configure-permissions-for-development-error-overlay"></a><a href="#3-configure-permissions-for-development-error-overlay" 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>3. Configure permissions for development error overlay</h5>
|
||||
<p>If your app is targeting the Android <code>API level 23</code> or greater, make sure you have the permission <code>android.permission.SYSTEM_ALERT_WINDOW</code> enabled for the development build. You can check this with <code>Settings.canDrawOverlays(this);</code>. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in <code>onCreate()</code> method.</p>
|
||||
|
||||
@@ -262,7 +262,12 @@ Pod installation complete! There are 3 dependencies <span class="hljs-keyword">f
|
||||
<h5><a class="anchor" aria-hidden="true" id="2-add-your-react-native-code"></a><a href="#2-add-your-react-native-code" 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>2. Add your React Native code</h5>
|
||||
<p>In your <code>index.js</code>, create your component. In our sample here, we will add a <code><Text></code> component within a styled <code><View></code></p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>AppRegistry<span class="token punctuation">,</span> StyleSheet<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View<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">import</span> <span class="token punctuation">{</span>
|
||||
AppRegistry<span class="token punctuation">,</span>
|
||||
StyleSheet<span class="token punctuation">,</span>
|
||||
Text<span class="token punctuation">,</span>
|
||||
View
|
||||
<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">class</span> <span class="token class-name">RNHighScores</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">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -274,7 +279,9 @@ Pod installation complete! There are 3 dependencies <span class="hljs-keyword">f
|
||||
<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>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">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>highScoresTitle<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">2048 High Scores!</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">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>highScoresTitle<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
2048 High Scores!
|
||||
</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">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>scores<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>contents<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 punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -286,18 +293,18 @@ Pod installation complete! There are 3 dependencies <span class="hljs-keyword">f
|
||||
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>
|
||||
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 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>
|
||||
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 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>
|
||||
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>
|
||||
|
||||
<span class="token comment">// Module name</span>
|
||||
@@ -499,7 +506,12 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios</spa
|
||||
<h5><a class="anchor" aria-hidden="true" id="2-add-your-react-native-code-1"></a><a href="#2-add-your-react-native-code-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>2. Add your React Native code</h5>
|
||||
<p>In your <code>index.js</code>, create your component. In our sample here, we will add a <code><Text></code> component within a styled <code><View></code>:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>AppRegistry<span class="token punctuation">,</span> StyleSheet<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View<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">import</span> <span class="token punctuation">{</span>
|
||||
AppRegistry<span class="token punctuation">,</span>
|
||||
StyleSheet<span class="token punctuation">,</span>
|
||||
Text<span class="token punctuation">,</span>
|
||||
View
|
||||
<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">class</span> <span class="token class-name">HelloWorld</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">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -513,16 +525,19 @@ $ react-native <span class="hljs-keyword">run</span><span class="bash">-ios</spa
|
||||
<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 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>
|
||||
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 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>
|
||||
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>
|
||||
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span><span class="token string">'MyReactNativeApp'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> HelloWorld<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'MyReactNativeApp'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> HelloWorld
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h5><a class="anchor" aria-hidden="true" id="3-configure-permissions-for-development-error-overlay"></a><a href="#3-configure-permissions-for-development-error-overlay" 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>3. Configure permissions for development error overlay</h5>
|
||||
<p>If your app is targeting the Android <code>API level 23</code> or greater, make sure you have the permission <code>android.permission.SYSTEM_ALERT_WINDOW</code> enabled for the development build. You can check this with <code>Settings.canDrawOverlays(this);</code>. This is required in dev builds because React Native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23 (Android M), the user needs to approve it. This can be achieved by adding the following code to your Activity's in <code>onCreate()</code> method.</p>
|
||||
|
||||
@@ -73,7 +73,11 @@ _onDataArrived(newData) {
|
||||
<p>Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="clonewithrowsandsections"></a><a href="#clonewithrowsandsections" 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>cloneWithRowsAndSections()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRowsAndSections</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> sectionIdentities<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRowsAndSections</span><span class="token punctuation">(</span>
|
||||
dataBlob<span class="token punctuation">,</span>
|
||||
sectionIdentities<span class="token punctuation">,</span>
|
||||
rowIdentities
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>This performs the same function as the <code>cloneWithRows</code> function but here you also specify what your <code>sectionIdentities</code> are. If you don't care about sections you should safely be able to use <code>cloneWithRows</code>.</p>
|
||||
<p><code>sectionIdentities</code> is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.</p>
|
||||
|
||||
@@ -73,7 +73,11 @@ _onDataArrived(newData) {
|
||||
<p>Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="clonewithrowsandsections"></a><a href="#clonewithrowsandsections" 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>cloneWithRowsAndSections()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRowsAndSections</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> sectionIdentities<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRowsAndSections</span><span class="token punctuation">(</span>
|
||||
dataBlob<span class="token punctuation">,</span>
|
||||
sectionIdentities<span class="token punctuation">,</span>
|
||||
rowIdentities
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>This performs the same function as the <code>cloneWithRows</code> function but here you also specify what your <code>sectionIdentities</code> are. If you don't care about sections you should safely be able to use <code>cloneWithRows</code>.</p>
|
||||
<p><code>sectionIdentities</code> is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.</p>
|
||||
|
||||
@@ -139,7 +139,7 @@
|
||||
<p>The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token comment">// ImageView.js</span>
|
||||
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>requireNativeComponent<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">import</span> <span class="token punctuation">{</span> requireNativeComponent <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 comment">/**
|
||||
* Composes `View`.
|
||||
|
||||
@@ -139,7 +139,7 @@
|
||||
<p>The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token comment">// ImageView.js</span>
|
||||
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>requireNativeComponent<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">import</span> <span class="token punctuation">{</span> requireNativeComponent <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 comment">/**
|
||||
* Composes `View`.
|
||||
|
||||
@@ -135,13 +135,13 @@ 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 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 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>
|
||||
<span class="token keyword">import</span> PropTypes <span class="token keyword">from</span> <span class="token string">'prop-types'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>requireNativeComponent<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">import</span> <span class="token punctuation">{</span> requireNativeComponent <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">class</span> <span class="token class-name">MapView</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">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</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 punctuation">:</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 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>
|
||||
@@ -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 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>
|
||||
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>
|
||||
@@ -418,7 +418,7 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
ReactNative<span class="token punctuation">.</span><span class="token function">findNodeHandle</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
UIManager<span class="token punctuation">.</span><span class="token function">getViewManagerConfig</span><span class="token punctuation">(</span><span class="token string">'RNCMyNativeView'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>Commands
|
||||
<span class="token punctuation">.</span>callNativeMethod<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span><span class="token punctuation">]</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
|
||||
@@ -135,13 +135,13 @@ 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 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 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>
|
||||
<span class="token keyword">import</span> PropTypes <span class="token keyword">from</span> <span class="token string">'prop-types'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>requireNativeComponent<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">import</span> <span class="token punctuation">{</span> requireNativeComponent <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">class</span> <span class="token class-name">MapView</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">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</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 punctuation">:</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 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>
|
||||
@@ -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 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>
|
||||
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>
|
||||
@@ -418,7 +418,7 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
ReactNative<span class="token punctuation">.</span><span class="token function">findNodeHandle</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
UIManager<span class="token punctuation">.</span><span class="token function">getViewManagerConfig</span><span class="token punctuation">(</span><span class="token string">'RNCMyNativeView'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>Commands
|
||||
<span class="token punctuation">.</span>callNativeMethod<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span><span class="token punctuation">]</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
|
||||
@@ -199,7 +199,7 @@ R<span class="hljs-function"><span class="hljs-title">eadableArray</span> -><
|
||||
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
|
||||
* ToastExample.LONG
|
||||
*/</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>NativeModules<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">import</span> <span class="token punctuation">{</span> NativeModules <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> NativeModules<span class="token punctuation">.</span>ToastExample<span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Now, from your other JavaScript file you can call the method like this:</p>
|
||||
@@ -246,7 +246,7 @@ ToastExample<span class="token punctuation">.</span><span class="token function"
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> width<span class="token punctuation">,</span> height</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> y <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> width <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> height<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 native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.</p>
|
||||
@@ -286,12 +286,16 @@ ToastExample<span class="token punctuation">.</span><span class="token function"
|
||||
<p>The JavaScript counterpart of this method returns a Promise. This means you can use the <code>await</code> keyword within an async function to call it and wait for its result:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">measureLayout</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">try</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> <span class="token punctuation">{</span>relativeX<span class="token punctuation">,</span> relativeY<span class="token punctuation">,</span> width<span class="token punctuation">,</span> height<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> UIManager<span class="token punctuation">.</span><span class="token function">measureLayout</span><span class="token punctuation">(</span>
|
||||
<span class="token number">100</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 keyword">var</span> <span class="token punctuation">{</span>
|
||||
relativeX<span class="token punctuation">,</span>
|
||||
relativeY<span class="token punctuation">,</span>
|
||||
width<span class="token punctuation">,</span>
|
||||
height
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> UIManager<span class="token punctuation">.</span><span class="token function">measureLayout</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">100</span><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>relativeX <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> relativeY <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> width <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> height<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>
|
||||
relativeX <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> relativeY <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> width <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> height
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<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>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
@@ -199,7 +199,7 @@ R<span class="hljs-function"><span class="hljs-title">eadableArray</span> -><
|
||||
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
|
||||
* ToastExample.LONG
|
||||
*/</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>NativeModules<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">import</span> <span class="token punctuation">{</span> NativeModules <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> NativeModules<span class="token punctuation">.</span>ToastExample<span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Now, from your other JavaScript file you can call the method like this:</p>
|
||||
@@ -246,7 +246,7 @@ ToastExample<span class="token punctuation">.</span><span class="token function"
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> width<span class="token punctuation">,</span> height</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> y <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> width <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> height<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 native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.</p>
|
||||
@@ -286,12 +286,16 @@ ToastExample<span class="token punctuation">.</span><span class="token function"
|
||||
<p>The JavaScript counterpart of this method returns a Promise. This means you can use the <code>await</code> keyword within an async function to call it and wait for its result:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">measureLayout</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">try</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> <span class="token punctuation">{</span>relativeX<span class="token punctuation">,</span> relativeY<span class="token punctuation">,</span> width<span class="token punctuation">,</span> height<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> UIManager<span class="token punctuation">.</span><span class="token function">measureLayout</span><span class="token punctuation">(</span>
|
||||
<span class="token number">100</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 keyword">var</span> <span class="token punctuation">{</span>
|
||||
relativeX<span class="token punctuation">,</span>
|
||||
relativeY<span class="token punctuation">,</span>
|
||||
width<span class="token punctuation">,</span>
|
||||
height
|
||||
<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> UIManager<span class="token punctuation">.</span><span class="token function">measureLayout</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">100</span><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>relativeX <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> relativeY <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> width <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> height<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>
|
||||
relativeX <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> relativeY <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> width <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> height
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<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>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
@@ -112,9 +112,12 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name l
|
||||
<span class="hljs-keyword">@end</span>
|
||||
</code></pre>
|
||||
<p>Now, from your JavaScript file you can call the method like this:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span>NativeModules<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> NativeModules <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> CalendarManager <span class="token operator">=</span> NativeModules<span class="token punctuation">.</span>CalendarManager<span class="token punctuation">;</span>
|
||||
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 string">'4 Privet Drive, Surrey'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
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 string">'4 Privet Drive, Surrey'</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p><strong>NOTE</strong>: JavaScript method names</p>
|
||||
@@ -154,14 +157,14 @@ CalendarManager<span class="token punctuation">.</span><span class="token functi
|
||||
<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 string">'4 Privet Drive, Surrey'</span><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>
|
||||
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><span class="token punctuation">;</span> <span class="token comment">// passing date as number of milliseconds since Unix epoch</span>
|
||||
</code></pre>
|
||||
<p>or</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 string">'4 Privet Drive, Surrey'</span><span class="token punctuation">,</span>
|
||||
date<span class="token punctuation">.</span><span class="token function">toISOString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
date<span class="token punctuation">.</span><span class="token function">toISOString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// passing date as ISO-8601 string</span>
|
||||
</code></pre>
|
||||
<p>And both values would get converted correctly to the native <code>NSDate</code>. A bad value, like an <code>Array</code>, would generate a helpful "RedBox" error message.</p>
|
||||
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name d
|
||||
<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 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>
|
||||
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>
|
||||
@@ -203,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 punctuation">:</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>
|
||||
@@ -230,7 +233,7 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name d
|
||||
<span class="token keyword">try</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> events <span class="token operator">=</span> <span class="token keyword">await</span> CalendarManager<span class="token punctuation">.</span><span class="token function">findEvents</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>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><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<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>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
@@ -112,9 +112,12 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name l
|
||||
<span class="hljs-keyword">@end</span>
|
||||
</code></pre>
|
||||
<p>Now, from your JavaScript file you can call the method like this:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span>NativeModules<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> NativeModules <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> CalendarManager <span class="token operator">=</span> NativeModules<span class="token punctuation">.</span>CalendarManager<span class="token punctuation">;</span>
|
||||
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 string">'4 Privet Drive, Surrey'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
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 string">'4 Privet Drive, Surrey'</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p><strong>NOTE</strong>: JavaScript method names</p>
|
||||
@@ -154,14 +157,14 @@ CalendarManager<span class="token punctuation">.</span><span class="token functi
|
||||
<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 string">'4 Privet Drive, Surrey'</span><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>
|
||||
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><span class="token punctuation">;</span> <span class="token comment">// passing date as number of milliseconds since Unix epoch</span>
|
||||
</code></pre>
|
||||
<p>or</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 string">'4 Privet Drive, Surrey'</span><span class="token punctuation">,</span>
|
||||
date<span class="token punctuation">.</span><span class="token function">toISOString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
date<span class="token punctuation">.</span><span class="token function">toISOString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// passing date as ISO-8601 string</span>
|
||||
</code></pre>
|
||||
<p>And both values would get converted correctly to the native <code>NSDate</code>. A bad value, like an <code>Array</code>, would generate a helpful "RedBox" error message.</p>
|
||||
@@ -179,7 +182,7 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name d
|
||||
<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 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>
|
||||
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>
|
||||
@@ -203,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 punctuation">:</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>
|
||||
@@ -230,7 +233,7 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name d
|
||||
<span class="token keyword">try</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> events <span class="token operator">=</span> <span class="token keyword">await</span> CalendarManager<span class="token punctuation">.</span><span class="token function">findEvents</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>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><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<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>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
@@ -100,7 +100,7 @@ pod <span class="token function">install</span>
|
||||
<p>Now, you need to wrap the whole app in <code>NavigationContainer</code>. Usually you'd do this in your entry file, such as <code>index.js</code> or <code>App.js</code>:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token string">'react-native-gesture-handler'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>NavigationContainer<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/native'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> NavigationContainer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/native'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</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>
|
||||
@@ -114,8 +114,8 @@ pod <span class="token function">install</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="usage"></a><a href="#usage" 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>Usage</h3>
|
||||
<p>Now you can create an app with a home screen and a profile screen:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>NavigationContainer<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/native'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>createStackNavigator<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/stack'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> NavigationContainer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/native'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> createStackNavigator <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/stack'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> Stack <span class="token operator">=</span> <span class="token function">createStackNavigator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -126,7 +126,7 @@ pod <span class="token function">install</span>
|
||||
</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>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 punctuation">:</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">=</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">
|
||||
@@ -137,11 +137,13 @@ pod <span class="token function">install</span>
|
||||
<p>In this example, there are 2 screens (<code>Home</code> and <code>Profile</code>) defined using the <code>Stack.Screen</code> component. Similarly, you can define as many screens as you like.</p>
|
||||
<p>You can set options such as the screen title for each screen in the <code>options</code> prop of <code>Stack.Screen</code>.</p>
|
||||
<p>Each screen takes a <code>component</code> prop that is a React component. Those components receive a prop called <code>navigation</code> which has various methods to link to other screens. For example, you can use <code>navigation.navigate</code> to go to the <code>Profile</code> screen:</p>
|
||||
<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>
|
||||
<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">=</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 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 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 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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
@@ -100,7 +100,7 @@ pod <span class="token function">install</span>
|
||||
<p>Now, you need to wrap the whole app in <code>NavigationContainer</code>. Usually you'd do this in your entry file, such as <code>index.js</code> or <code>App.js</code>:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token string">'react-native-gesture-handler'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>NavigationContainer<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/native'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> NavigationContainer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/native'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</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>
|
||||
@@ -114,8 +114,8 @@ pod <span class="token function">install</span>
|
||||
<h3><a class="anchor" aria-hidden="true" id="usage"></a><a href="#usage" 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>Usage</h3>
|
||||
<p>Now you can create an app with a home screen and a profile screen:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>NavigationContainer<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/native'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>createStackNavigator<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/stack'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> NavigationContainer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/native'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> createStackNavigator <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@react-navigation/stack'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> Stack <span class="token operator">=</span> <span class="token function">createStackNavigator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -126,7 +126,7 @@ pod <span class="token function">install</span>
|
||||
</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>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 punctuation">:</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">=</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">
|
||||
@@ -137,11 +137,13 @@ pod <span class="token function">install</span>
|
||||
<p>In this example, there are 2 screens (<code>Home</code> and <code>Profile</code>) defined using the <code>Stack.Screen</code> component. Similarly, you can define as many screens as you like.</p>
|
||||
<p>You can set options such as the screen title for each screen in the <code>options</code> prop of <code>Stack.Screen</code>.</p>
|
||||
<p>Each screen takes a <code>component</code> prop that is a React component. Those components receive a prop called <code>navigation</code> which has various methods to link to other screens. For example, you can use <code>navigation.navigate</code> to go to the <code>Profile</code> screen:</p>
|
||||
<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>
|
||||
<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">=</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 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 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 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>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
@@ -70,16 +70,22 @@
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigator.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">Navigator</h1></header><article><div><span><p><code>Navigator</code> handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using <code>NavigatorIOS</code> as it leverages native UIKit navigation.</p>
|
||||
<p>To set up the <code>Navigator</code> you provide one or more objects called routes, to identify each scene. You also provide a <code>renderScene</code> function that renders the scene for each route object.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>Text<span class="token punctuation">,</span> Navigator<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>
|
||||
Text<span class="token punctuation">,</span>
|
||||
Navigator<span class="token punctuation">,</span>
|
||||
TouchableHighlight
|
||||
<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">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">NavAllDay</span> <span class="token keyword">extends</span> <span class="token class-name">Component</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">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 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 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>
|
||||
<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 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 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>
|
||||
|
||||
@@ -70,16 +70,22 @@
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/navigator.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">Navigator</h1></header><article><div><span><p><code>Navigator</code> handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both Android and iOS. If you are targeting iOS only, you may also want to consider using <code>NavigatorIOS</code> as it leverages native UIKit navigation.</p>
|
||||
<p>To set up the <code>Navigator</code> you provide one or more objects called routes, to identify each scene. You also provide a <code>renderScene</code> function that renders the scene for each route object.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>Text<span class="token punctuation">,</span> Navigator<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>
|
||||
Text<span class="token punctuation">,</span>
|
||||
Navigator<span class="token punctuation">,</span>
|
||||
TouchableHighlight
|
||||
<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">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">NavAllDay</span> <span class="token keyword">extends</span> <span class="token class-name">Component</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">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 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 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>
|
||||
<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 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 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>
|
||||
|
||||
@@ -77,7 +77,7 @@
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType
|
||||
<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">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -85,14 +85,17 @@
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" 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>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
|
||||
@@ -77,7 +77,7 @@
|
||||
<span class="token string">'Initial, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType
|
||||
<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">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span><span class="token parameter">connectionInfo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -85,14 +85,17 @@
|
||||
<span class="token string">'First change, type: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>type <span class="token operator">+</span>
|
||||
<span class="token string">', effectiveType: '</span> <span class="token operator">+</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType<span class="token punctuation">,</span>
|
||||
connectionInfo<span class="token punctuation">.</span>effectiveType
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange<span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'connectionChange'</span><span class="token punctuation">,</span> handleFirstConnectivityChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'connectionChange'</span><span class="token punctuation">,</span>
|
||||
handleFirstConnectivityChange
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="connectiontype-enum"></a><a href="#connectiontype-enum" 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>ConnectionType enum</h3>
|
||||
<p><code>ConnectionType</code> describes the type of connection the device is using to communicate with the network.</p>
|
||||
|
||||
@@ -80,12 +80,12 @@
|
||||
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 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 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>
|
||||
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>
|
||||
<p>Take a look at the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Request">Fetch Request docs</a> for a full list of properties.</p>
|
||||
@@ -106,7 +106,9 @@
|
||||
<p>You can also use the proposed ES2017 <code>async</code>/<code>await</code> syntax in a React Native app:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getMoviesFromApi</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">try</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'https://reactnative.dev/movies.json'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'https://reactnative.dev/movies.json'</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">let</span> responseJson <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> responseJson<span class="token punctuation">.</span>movies<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -80,12 +80,12 @@
|
||||
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 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 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>
|
||||
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>
|
||||
<p>Take a look at the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Request">Fetch Request docs</a> for a full list of properties.</p>
|
||||
@@ -106,7 +106,9 @@
|
||||
<p>You can also use the proposed ES2017 <code>async</code>/<code>await</code> syntax in a React Native app:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getMoviesFromApi</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">try</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'https://reactnative.dev/movies.json'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'https://reactnative.dev/movies.json'</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">let</span> responseJson <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> responseJson<span class="token punctuation">.</span>movies<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
<p>On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so <code>check</code> and <code>request</code> should always be true.</p>
|
||||
<p>If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional <code>rationale</code> argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="example"></a><a href="#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>Example</h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span>PermissionsAndroid<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> PermissionsAndroid <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">async</span> <span class="token keyword">function</span> <span class="token function">requestCameraPermission</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">try</span> <span class="token punctuation">{</span>
|
||||
@@ -36,8 +36,8 @@
|
||||
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>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'so you can take awesome pictures.'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>granted <span class="token operator">===</span> PermissionsAndroid<span class="token punctuation">.</span><span class="token constant">RESULTS</span><span class="token punctuation">.</span><span class="token constant">GRANTED</span><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">'You can use the camera'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
<p>On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so <code>check</code> and <code>request</code> should always be true.</p>
|
||||
<p>If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional <code>rationale</code> argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="example"></a><a href="#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>Example</h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span>PermissionsAndroid<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> PermissionsAndroid <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">async</span> <span class="token keyword">function</span> <span class="token function">requestCameraPermission</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">try</span> <span class="token punctuation">{</span>
|
||||
@@ -36,8 +36,8 @@
|
||||
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>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'so you can take awesome pictures.'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>granted <span class="token operator">===</span> PermissionsAndroid<span class="token punctuation">.</span><span class="token constant">RESULTS</span><span class="token punctuation">.</span><span class="token constant">GRANTED</span><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">'You can use the camera'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -77,42 +77,42 @@
|
||||
<p>Certain components may have properties that work on one platform only. All of these props are annotated with <code>@platform</code> and have a small badge next to them on the website.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="platform-module"></a><a href="#platform-module" 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>Platform module</h2>
|
||||
<p>React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.</p>
|
||||
<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>
|
||||
<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 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>
|
||||
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>
|
||||
<p>There is also a <code>Platform.select</code> method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.</p>
|
||||
<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>
|
||||
<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 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 punctuation">:</span> <span class="token punctuation">{</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'red'</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 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><span class="token punctuation">)</span><span class="token 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 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>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 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 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>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="detecting-the-android-version"></a><a href="#detecting-the-android-version" 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>Detecting the Android version</h3>
|
||||
<p>On Android, the <code>Platform</code> module can also be used to detect the version of the Android Platform in which the app is running:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span>Platform<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Platform <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">if</span> <span class="token punctuation">(</span>Platform<span class="token punctuation">.</span>Version <span class="token operator">===</span> <span class="token number">25</span><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">'Running on Nougat!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -120,7 +120,7 @@
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="detecting-the-ios-version"></a><a href="#detecting-the-ios-version" 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>Detecting the iOS version</h3>
|
||||
<p>On iOS, the <code>Version</code> is a result of <code>-[UIDevice systemVersion]</code>, which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span>Platform<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Platform <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> majorVersionIOS <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>Platform<span class="token punctuation">.</span>Version<span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>majorVersionIOS <span class="token operator"><=</span> <span class="token number">9</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -77,42 +77,42 @@
|
||||
<p>Certain components may have properties that work on one platform only. All of these props are annotated with <code>@platform</code> and have a small badge next to them on the website.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="platform-module"></a><a href="#platform-module" 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>Platform module</h2>
|
||||
<p>React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.</p>
|
||||
<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>
|
||||
<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 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>
|
||||
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>
|
||||
<p>There is also a <code>Platform.select</code> method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.</p>
|
||||
<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>
|
||||
<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 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 punctuation">:</span> <span class="token punctuation">{</span>
|
||||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'red'</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 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><span class="token punctuation">)</span><span class="token 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 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>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 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 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>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="detecting-the-android-version"></a><a href="#detecting-the-android-version" 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>Detecting the Android version</h3>
|
||||
<p>On Android, the <code>Platform</code> module can also be used to detect the version of the Android Platform in which the app is running:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span>Platform<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Platform <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">if</span> <span class="token punctuation">(</span>Platform<span class="token punctuation">.</span>Version <span class="token operator">===</span> <span class="token number">25</span><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">'Running on Nougat!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@@ -120,7 +120,7 @@
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" id="detecting-the-ios-version"></a><a href="#detecting-the-ios-version" 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>Detecting the iOS version</h3>
|
||||
<p>On iOS, the <code>Version</code> is a result of <code>-[UIDevice systemVersion]</code>, which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span>Platform<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Platform <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> majorVersionIOS <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>Platform<span class="token punctuation">.</span>Version<span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>majorVersionIOS <span class="token operator"><=</span> <span class="token number">9</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -16,26 +16,26 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="usage"></a><a href="#usage" 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>Usage</h3>
|
||||
<p>The example below shows how to use <code>Slider</code> to change a value used by <code>Text</code>. The value is stored using the state of the root component (<code>App</code>). The same component subscribes to the <code>onValueChange</code> of <code>Slider</code> and changes the value using <code>setState</code>.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>StyleSheet<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View<span class="token punctuation">,</span> Slider<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">import</span> <span class="token punctuation">{</span> StyleSheet<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View<span class="token punctuation">,</span> Slider <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">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</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>
|
||||
value<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">,</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 punctuation">:</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><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>
|
||||
|
||||
<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> <span class="token punctuation">{</span>value<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>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span> value <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>
|
||||
<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>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">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 punctuation">{</span><span class="token function">String</span><span class="token punctuation">(</span>value<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 punctuation">></span></span><span class="token plain-text">
|
||||
@@ -54,12 +54,12 @@
|
||||
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>
|
||||
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 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>
|
||||
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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" 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</h3>
|
||||
|
||||
@@ -16,26 +16,26 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="usage"></a><a href="#usage" 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>Usage</h3>
|
||||
<p>The example below shows how to use <code>Slider</code> to change a value used by <code>Text</code>. The value is stored using the state of the root component (<code>App</code>). The same component subscribes to the <code>onValueChange</code> of <code>Slider</code> and changes the value using <code>setState</code>.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>StyleSheet<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View<span class="token punctuation">,</span> Slider<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">import</span> <span class="token punctuation">{</span> StyleSheet<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View<span class="token punctuation">,</span> Slider <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">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</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>
|
||||
value<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">,</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 punctuation">:</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><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>
|
||||
|
||||
<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> <span class="token punctuation">{</span>value<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>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span> value <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>
|
||||
<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>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">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 punctuation">{</span><span class="token function">String</span><span class="token punctuation">(</span>value<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 punctuation">></span></span><span class="token plain-text">
|
||||
@@ -54,12 +54,12 @@
|
||||
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>
|
||||
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 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>
|
||||
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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" 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</h3>
|
||||
|
||||
@@ -139,7 +139,10 @@
|
||||
</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="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 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>
|
||||
<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 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>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -154,7 +157,10 @@
|
||||
</table>
|
||||
<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 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>
|
||||
<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 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>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -183,7 +189,10 @@
|
||||
</table>
|
||||
<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 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>
|
||||
<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 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>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
|
||||
@@ -139,7 +139,10 @@
|
||||
</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="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 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>
|
||||
<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 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>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -154,7 +157,10 @@
|
||||
</table>
|
||||
<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 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>
|
||||
<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 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>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -183,7 +189,10 @@
|
||||
</table>
|
||||
<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 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>
|
||||
<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 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>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
|
||||
@@ -20,18 +20,21 @@
|
||||
<p>There is also a function <code>showWithGravity</code> to specify the layout gravity. May be ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER.</p>
|
||||
<p>The 'showWithGravityAndOffset' function adds on the ability to specify offset These offset values will translate to pixels.</p>
|
||||
<p>Basic usage:</p>
|
||||
<pre><code class="hljs css language-jsx">ToastAndroid<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token string">'A pikachu appeared nearby !'</span><span class="token punctuation">,</span> ToastAndroid<span class="token punctuation">.</span><span class="token constant">SHORT</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx">ToastAndroid<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'A pikachu appeared nearby !'</span><span class="token punctuation">,</span>
|
||||
ToastAndroid<span class="token punctuation">.</span><span class="token constant">SHORT</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
ToastAndroid<span class="token punctuation">.</span><span class="token function">showWithGravity</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'All Your Base Are Belong To Us'</span><span class="token punctuation">,</span>
|
||||
ToastAndroid<span class="token punctuation">.</span><span class="token constant">SHORT</span><span class="token punctuation">,</span>
|
||||
ToastAndroid<span class="token punctuation">.</span><span class="token constant">CENTER</span><span class="token punctuation">,</span>
|
||||
ToastAndroid<span class="token punctuation">.</span><span class="token constant">CENTER</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
ToastAndroid<span class="token punctuation">.</span><span class="token function">showWithGravityAndOffset</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'A wild toast appeared!'</span><span class="token punctuation">,</span>
|
||||
ToastAndroid<span class="token punctuation">.</span><span class="token constant">LONG</span><span class="token punctuation">,</span>
|
||||
ToastAndroid<span class="token punctuation">.</span><span class="token constant">BOTTOM</span><span class="token punctuation">,</span>
|
||||
<span class="token number">25</span><span class="token punctuation">,</span>
|
||||
<span class="token number">50</span><span class="token punctuation">,</span>
|
||||
<span class="token number">50</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><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</h3>
|
||||
@@ -65,7 +68,7 @@ ToastAndroid<span class="token punctuation">.</span><span class="token function"
|
||||
duration<span class="token punctuation">,</span>
|
||||
gravity<span class="token punctuation">,</span>
|
||||
xOffset<span class="token punctuation">,</span>
|
||||
yOffset<span class="token punctuation">,</span>
|
||||
yOffset
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-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>Properties</h2>
|
||||
|
||||
@@ -20,18 +20,21 @@
|
||||
<p>There is also a function <code>showWithGravity</code> to specify the layout gravity. May be ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER.</p>
|
||||
<p>The 'showWithGravityAndOffset' function adds on the ability to specify offset These offset values will translate to pixels.</p>
|
||||
<p>Basic usage:</p>
|
||||
<pre><code class="hljs css language-jsx">ToastAndroid<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token string">'A pikachu appeared nearby !'</span><span class="token punctuation">,</span> ToastAndroid<span class="token punctuation">.</span><span class="token constant">SHORT</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<pre><code class="hljs css language-jsx">ToastAndroid<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'A pikachu appeared nearby !'</span><span class="token punctuation">,</span>
|
||||
ToastAndroid<span class="token punctuation">.</span><span class="token constant">SHORT</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
ToastAndroid<span class="token punctuation">.</span><span class="token function">showWithGravity</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'All Your Base Are Belong To Us'</span><span class="token punctuation">,</span>
|
||||
ToastAndroid<span class="token punctuation">.</span><span class="token constant">SHORT</span><span class="token punctuation">,</span>
|
||||
ToastAndroid<span class="token punctuation">.</span><span class="token constant">CENTER</span><span class="token punctuation">,</span>
|
||||
ToastAndroid<span class="token punctuation">.</span><span class="token constant">CENTER</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
ToastAndroid<span class="token punctuation">.</span><span class="token function">showWithGravityAndOffset</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'A wild toast appeared!'</span><span class="token punctuation">,</span>
|
||||
ToastAndroid<span class="token punctuation">.</span><span class="token constant">LONG</span><span class="token punctuation">,</span>
|
||||
ToastAndroid<span class="token punctuation">.</span><span class="token constant">BOTTOM</span><span class="token punctuation">,</span>
|
||||
<span class="token number">25</span><span class="token punctuation">,</span>
|
||||
<span class="token number">50</span><span class="token punctuation">,</span>
|
||||
<span class="token number">50</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><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</h3>
|
||||
@@ -65,7 +68,7 @@ ToastAndroid<span class="token punctuation">.</span><span class="token function"
|
||||
duration<span class="token punctuation">,</span>
|
||||
gravity<span class="token punctuation">,</span>
|
||||
xOffset<span class="token punctuation">,</span>
|
||||
yOffset<span class="token punctuation">,</span>
|
||||
yOffset
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" id="properties-1"></a><a href="#properties-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>Properties</h2>
|
||||
|
||||
@@ -80,7 +80,10 @@
|
||||
<p>Creates an object that represent android theme's default background for borderless selectable elements (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+.</p>
|
||||
<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 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>
|
||||
<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 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>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
|
||||
@@ -80,7 +80,10 @@
|
||||
<p>Creates an object that represent android theme's default background for borderless selectable elements (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+.</p>
|
||||
<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 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>
|
||||
<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 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>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
|
||||
+3
-3
@@ -22,10 +22,10 @@
|
||||
<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>
|
||||
flexDirection<span class="token punctuation">:</span> <span class="token string">'row'</span><span class="token punctuation">,</span>
|
||||
height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
padding<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||||
padding<span class="token punctuation">:</span> <span class="token number">20</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> flex<span class="token punctuation">:</span> <span class="token number">0.3</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">'red'</span><span class="token punctuation">,</span> flex<span class="token punctuation">:</span> <span class="token number">0.5</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> flex<span class="token punctuation">:</span> <span class="token number">0.3</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">'red'</span><span class="token punctuation">,</span> flex<span class="token punctuation">:</span> <span class="token number">0.5</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 World!</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><span class="token punctuation">;</span>
|
||||
|
||||
@@ -22,10 +22,10 @@
|
||||
<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>
|
||||
flexDirection<span class="token punctuation">:</span> <span class="token string">'row'</span><span class="token punctuation">,</span>
|
||||
height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||||
padding<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||||
padding<span class="token punctuation">:</span> <span class="token number">20</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> flex<span class="token punctuation">:</span> <span class="token number">0.3</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">'red'</span><span class="token punctuation">,</span> flex<span class="token punctuation">:</span> <span class="token number">0.5</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> flex<span class="token punctuation">:</span> <span class="token number">0.3</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">'red'</span><span class="token punctuation">,</span> flex<span class="token punctuation">:</span> <span class="token number">0.5</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 World!</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><span class="token punctuation">;</span>
|
||||
|
||||
@@ -255,9 +255,9 @@
|
||||
<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 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> 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>
|
||||
|
||||
@@ -255,9 +255,9 @@
|
||||
<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 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> 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>
|
||||
|
||||
@@ -16,17 +16,17 @@
|
||||
<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 punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</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>
|
||||
AccessibilityInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleScreenReaderToggled<span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleScreenReaderToggled
|
||||
<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 punctuation">:</span> isEnabled<span class="token punctuation">,</span>
|
||||
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>
|
||||
@@ -34,13 +34,13 @@
|
||||
<span class="token function">componentWillUnmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
AccessibilityInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleScreenReaderToggled<span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleScreenReaderToggled
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<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 punctuation">:</span> isEnabled<span class="token punctuation">,</span>
|
||||
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>
|
||||
|
||||
@@ -49,7 +49,10 @@
|
||||
<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 punctuation">></span></span><span class="token plain-text">
|
||||
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 punctuation">:</span> <span class="token string">'disabled'</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 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>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -16,17 +16,17 @@
|
||||
<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 punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</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>
|
||||
AccessibilityInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleScreenReaderToggled<span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleScreenReaderToggled
|
||||
<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 punctuation">:</span> isEnabled<span class="token punctuation">,</span>
|
||||
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>
|
||||
@@ -34,13 +34,13 @@
|
||||
<span class="token function">componentWillUnmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
AccessibilityInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'change'</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleScreenReaderToggled<span class="token punctuation">,</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleScreenReaderToggled
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<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 punctuation">:</span> isEnabled<span class="token punctuation">,</span>
|
||||
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>
|
||||
|
||||
@@ -49,7 +49,10 @@
|
||||
<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 punctuation">></span></span><span class="token plain-text">
|
||||
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 punctuation">:</span> <span class="token string">'disabled'</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 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>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
+11
-10
@@ -35,13 +35,13 @@
|
||||
<span class="token punctuation">{</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>
|
||||
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 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><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>
|
||||
</code></pre>
|
||||
<p>Example with custom buttons:</p>
|
||||
@@ -52,14 +52,15 @@
|
||||
<span class="token punctuation">{</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>
|
||||
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 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>
|
||||
<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>
|
||||
<span class="token string">'secure-text'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'secure-text'</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Example with the default button and a custom callback:</p>
|
||||
@@ -68,7 +69,7 @@
|
||||
<span class="token keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span><span class="token parameter">text</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">'Your username is '</span> <span class="token operator">+</span> text<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'default'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'default'</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><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</h3>
|
||||
@@ -109,7 +110,7 @@
|
||||
<span class="token punctuation">[</span>callbackOrButtons<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>type<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>defaultValue<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>keyboardType<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>keyboardType<span class="token punctuation">]</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Create and display a prompt to enter some text.</p>
|
||||
|
||||
@@ -35,13 +35,13 @@
|
||||
<span class="token punctuation">{</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>
|
||||
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 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><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>
|
||||
</code></pre>
|
||||
<p>Example with custom buttons:</p>
|
||||
@@ -52,14 +52,15 @@
|
||||
<span class="token punctuation">{</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>
|
||||
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 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>
|
||||
<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>
|
||||
<span class="token string">'secure-text'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'secure-text'</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Example with the default button and a custom callback:</p>
|
||||
@@ -68,7 +69,7 @@
|
||||
<span class="token keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">(</span><span class="token parameter">text</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">'Your username is '</span> <span class="token operator">+</span> text<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'default'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'default'</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<h3><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</h3>
|
||||
@@ -109,7 +110,7 @@
|
||||
<span class="token punctuation">[</span>callbackOrButtons<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>type<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>defaultValue<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>keyboardType<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>keyboardType<span class="token punctuation">]</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre>
|
||||
<p>Create and display a prompt to enter some text.</p>
|
||||
|
||||
@@ -18,8 +18,8 @@
|
||||
<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 punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// Animate to final value of 1</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</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>
|
||||
<p>Refer to the <a href="/docs/0.11/animations#animated-api">Animations</a> guide to see additional examples of <code>Animated</code> in action.</p>
|
||||
@@ -40,7 +40,7 @@
|
||||
<p>In most cases, you will be using <code>timing()</code>. By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="working-with-animations"></a><a href="#working-with-animations" 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>Working with animations</h3>
|
||||
<p>Animations are started by calling <code>start()</code> on your animation. <code>start()</code> takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with <code>{finished: true}</code>. If the animation is done because <code>stop()</code> was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive <code>{finished: false}</code>.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">this</span><span class="token punctuation">.</span>animateValue<span class="token punctuation">.</span><span class="token function">spring</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 parameter"><span class="token punctuation">{</span>finished<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">this</span><span class="token punctuation">.</span>animateValue<span class="token punctuation">.</span><span class="token function">spring</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 parameter"><span class="token punctuation">{</span> finished <span class="token punctuation">}</span></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>finished<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">'Animation was completed'</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>
|
||||
|
||||
@@ -18,8 +18,8 @@
|
||||
<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 punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// Animate to final value of 1</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</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>
|
||||
<p>Refer to the <a href="/docs/0.11/animations#animated-api">Animations</a> guide to see additional examples of <code>Animated</code> in action.</p>
|
||||
@@ -40,7 +40,7 @@
|
||||
<p>In most cases, you will be using <code>timing()</code>. By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="working-with-animations"></a><a href="#working-with-animations" 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>Working with animations</h3>
|
||||
<p>Animations are started by calling <code>start()</code> on your animation. <code>start()</code> takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with <code>{finished: true}</code>. If the animation is done because <code>stop()</code> was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive <code>{finished: false}</code>.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">this</span><span class="token punctuation">.</span>animateValue<span class="token punctuation">.</span><span class="token function">spring</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 parameter"><span class="token punctuation">{</span>finished<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">this</span><span class="token punctuation">.</span>animateValue<span class="token punctuation">.</span><span class="token function">spring</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 parameter"><span class="token punctuation">{</span> finished <span class="token punctuation">}</span></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>finished<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">'Animation was completed'</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>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<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 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 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 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>
|
||||
@@ -27,15 +27,15 @@
|
||||
<span class="token keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
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>
|
||||
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 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 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 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><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>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<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 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 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 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>
|
||||
@@ -27,15 +27,15 @@
|
||||
<span class="token keyword">null</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
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>
|
||||
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 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 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 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><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>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user