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 33aedc3b03df7f984bd330389c73cf66e151b250
This commit is contained in:
Website Deployment Script
@@ -130,7 +130,7 @@
|
||||
</code></pre>
|
||||
<p>In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can easily use overlapping views with the same parent without confusing TalkBack.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="checking-if-a-screen-reader-is-enabled"></a><a href="#checking-if-a-screen-reader-is-enabled" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Checking if a Screen Reader is Enabled</h3>
|
||||
<p>The <code>AccessibilityInfo</code> API allows you to determine whether or not a screen reader is currently active. See the <a href="/react-native/docs/0.56/accessibilityinfo">AccessibilityInfo documentation</a> for details.</p>
|
||||
<p>The <code>AccessibilityInfo</code> API allows you to determine whether or not a screen reader is currently active. See the <a href="/react-native/docs/accessibilityinfo">AccessibilityInfo documentation</a> for details.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="sending-accessibility-events-android"></a><a href="#sending-accessibility-events-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Sending Accessibility Events (Android)</h3>
|
||||
<p>Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or a custom radio button has been selected). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event.</p>
|
||||
<pre><code class="hljs css languages- javascript"><span class="hljs-keyword">import</span> { UIManager, findNodeHandle } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
@@ -130,7 +130,7 @@
|
||||
</code></pre>
|
||||
<p>In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can easily use overlapping views with the same parent without confusing TalkBack.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="checking-if-a-screen-reader-is-enabled"></a><a href="#checking-if-a-screen-reader-is-enabled" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Checking if a Screen Reader is Enabled</h3>
|
||||
<p>The <code>AccessibilityInfo</code> API allows you to determine whether or not a screen reader is currently active. See the <a href="/react-native/docs/0.56/accessibilityinfo">AccessibilityInfo documentation</a> for details.</p>
|
||||
<p>The <code>AccessibilityInfo</code> API allows you to determine whether or not a screen reader is currently active. See the <a href="/react-native/docs/accessibilityinfo">AccessibilityInfo documentation</a> for details.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="sending-accessibility-events-android"></a><a href="#sending-accessibility-events-android" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Sending Accessibility Events (Android)</h3>
|
||||
<p>Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or a custom radio button has been selected). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event.</p>
|
||||
<pre><code class="hljs css languages- javascript"><span class="hljs-keyword">import</span> { UIManager, findNodeHandle } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
@@ -75,11 +75,11 @@
|
||||
</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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/accessibilityinfo#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/accessibilityinfo#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/accessibilityinfo#setaccessibilityfocus"><code>setAccessibilityFocus</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/accessibilityinfo#announceforaccessibility"><code>announceForAccessibility</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/accessibilityinfo#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/accessibilityinfo#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="/react-native/docs/accessibilityinfo#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/accessibilityinfo#setaccessibilityfocus"><code>setAccessibilityFocus</code></a></li>
|
||||
<li><a href="/react-native/docs/accessibilityinfo#announceforaccessibility"><code>announceForAccessibility</code></a></li>
|
||||
<li><a href="/react-native/docs/accessibilityinfo#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -75,11 +75,11 @@
|
||||
</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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/accessibilityinfo#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/accessibilityinfo#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/accessibilityinfo#setaccessibilityfocus"><code>setAccessibilityFocus</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/accessibilityinfo#announceforaccessibility"><code>announceForAccessibility</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/accessibilityinfo#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/accessibilityinfo#fetch"><code>fetch</code></a></li>
|
||||
<li><a href="/react-native/docs/accessibilityinfo#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/accessibilityinfo#setaccessibilityfocus"><code>setAccessibilityFocus</code></a></li>
|
||||
<li><a href="/react-native/docs/accessibilityinfo#announceforaccessibility"><code>announceForAccessibility</code></a></li>
|
||||
<li><a href="/react-native/docs/accessibilityinfo#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -31,8 +31,8 @@
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/actionsheetios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ActionSheetIOS</h1></header><article><div><span><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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/actionsheetios#showactionsheetwithoptions"><code>showActionSheetWithOptions</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/actionsheetios#showshareactionsheetwithoptions"><code>showShareActionSheetWithOptions</code></a></li>
|
||||
<li><a href="/react-native/docs/actionsheetios#showactionsheetwithoptions"><code>showActionSheetWithOptions</code></a></li>
|
||||
<li><a href="/react-native/docs/actionsheetios#showshareactionsheetwithoptions"><code>showShareActionSheetWithOptions</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -47,7 +47,7 @@
|
||||
<li><code>destructiveButtonIndex</code> (int) - index of destructive button in <code>options</code></li>
|
||||
<li><code>title</code> (string) - a title to show above the action sheet</li>
|
||||
<li><code>message</code> (string) - a message to show below the title</li>
|
||||
<li><code>tintColor</code> (string) - the <a href="/react-native/docs/0.56/colors">color</a> used for non-destructive button titles</li>
|
||||
<li><code>tintColor</code> (string) - the <a href="/react-native/docs/colors">color</a> used for non-destructive button titles</li>
|
||||
</ul>
|
||||
<p>The 'callback' function takes one parameter, the zero-based index of the selected item.</p>
|
||||
<p>Minimal example:</p>
|
||||
|
||||
@@ -31,8 +31,8 @@
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/actionsheetios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ActionSheetIOS</h1></header><article><div><span><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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/actionsheetios#showactionsheetwithoptions"><code>showActionSheetWithOptions</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/actionsheetios#showshareactionsheetwithoptions"><code>showShareActionSheetWithOptions</code></a></li>
|
||||
<li><a href="/react-native/docs/actionsheetios#showactionsheetwithoptions"><code>showActionSheetWithOptions</code></a></li>
|
||||
<li><a href="/react-native/docs/actionsheetios#showshareactionsheetwithoptions"><code>showShareActionSheetWithOptions</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -47,7 +47,7 @@
|
||||
<li><code>destructiveButtonIndex</code> (int) - index of destructive button in <code>options</code></li>
|
||||
<li><code>title</code> (string) - a title to show above the action sheet</li>
|
||||
<li><code>message</code> (string) - a message to show below the title</li>
|
||||
<li><code>tintColor</code> (string) - the <a href="/react-native/docs/0.56/colors">color</a> used for non-destructive button titles</li>
|
||||
<li><code>tintColor</code> (string) - the <a href="/react-native/docs/colors">color</a> used for non-destructive button titles</li>
|
||||
</ul>
|
||||
<p>The 'callback' function takes one parameter, the zero-based index of the selected item.</p>
|
||||
<p>Minimal example:</p>
|
||||
|
||||
@@ -70,13 +70,13 @@ AppRegistry.registerComponent('App', () => App)
|
||||
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/view#props">View props...</a></li>
|
||||
<li><a href="/react-native/docs/view#props">View props...</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/activityindicator#animating"><code>animating</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/activityindicator#color"><code>color</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/activityindicator#size"><code>size</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/activityindicator#hideswhenstopped"><code>hidesWhenStopped</code></a></li>
|
||||
<li><a href="/react-native/docs/activityindicator#animating"><code>animating</code></a></li>
|
||||
<li><a href="/react-native/docs/activityindicator#color"><code>color</code></a></li>
|
||||
<li><a href="/react-native/docs/activityindicator#size"><code>size</code></a></li>
|
||||
<li><a href="/react-native/docs/activityindicator#hideswhenstopped"><code>hidesWhenStopped</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -99,7 +99,7 @@ AppRegistry.registerComponent('App', () => App)
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="/react-native/docs/0.56/colors">color</a></td><td>No</td></tr>
|
||||
<tr><td><a href="/react-native/docs/colors">color</a></td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
|
||||
@@ -70,13 +70,13 @@ AppRegistry.registerComponent('App', () => App)
|
||||
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/view#props">View props...</a></li>
|
||||
<li><a href="/react-native/docs/view#props">View props...</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/activityindicator#animating"><code>animating</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/activityindicator#color"><code>color</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/activityindicator#size"><code>size</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/activityindicator#hideswhenstopped"><code>hidesWhenStopped</code></a></li>
|
||||
<li><a href="/react-native/docs/activityindicator#animating"><code>animating</code></a></li>
|
||||
<li><a href="/react-native/docs/activityindicator#color"><code>color</code></a></li>
|
||||
<li><a href="/react-native/docs/activityindicator#size"><code>size</code></a></li>
|
||||
<li><a href="/react-native/docs/activityindicator#hideswhenstopped"><code>hidesWhenStopped</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -99,7 +99,7 @@ AppRegistry.registerComponent('App', () => App)
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="/react-native/docs/0.56/colors">color</a></td><td>No</td></tr>
|
||||
<tr><td><a href="/react-native/docs/colors">color</a></td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
|
||||
+1
-1
@@ -73,7 +73,7 @@ Alert.alert(
|
||||
</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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/alert#alert"><code>alert</code></a></li>
|
||||
<li><a href="/react-native/docs/alert#alert"><code>alert</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -73,7 +73,7 @@ Alert.alert(
|
||||
</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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/alert#alert"><code>alert</code></a></li>
|
||||
<li><a href="/react-native/docs/alert#alert"><code>alert</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
+11
-11
@@ -43,17 +43,17 @@
|
||||
<span class="hljs-built_in">text</span> => console.<span class="hljs-built_in">log</span>(<span class="hljs-string">"You entered "</span>+<span class="hljs-built_in">text</span>)
|
||||
);
|
||||
</code></pre>
|
||||
<p>We recommend using the <a href="/react-native/docs/0.56/alert"><code>Alert.alert</code></a> method for cross-platform support if you don't need to create iOS-only prompts.</p>
|
||||
<p>We recommend using the <a href="/react-native/docs/alert"><code>Alert.alert</code></a> method for cross-platform support if you don't need to create iOS-only prompts.</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/alertios#alert"><code>alert</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/alertios#prompt"><code>prompt</code></a></li>
|
||||
<li><a href="/react-native/docs/alertios#alert"><code>alert</code></a></li>
|
||||
<li><a href="/react-native/docs/alertios#prompt"><code>prompt</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="type-definitions"></a><a href="#type-definitions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Type Definitions</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/alertios#alerttype"><code>AlertType</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/alertios#alertbuttonstyle"><code>AlertButtonStyle</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/alertios#buttonsarray"><code>ButtonsArray</code></a></li>
|
||||
<li><a href="/react-native/docs/alertios#alerttype"><code>AlertType</code></a></li>
|
||||
<li><a href="/react-native/docs/alertios#alertbuttonstyle"><code>AlertButtonStyle</code></a></li>
|
||||
<li><a href="/react-native/docs/alertios#buttonsarray"><code>ButtonsArray</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -70,8 +70,8 @@
|
||||
<tbody>
|
||||
<tr><td>title</td><td>string</td><td>Yes</td><td>The dialog's title. Passing null or '' will hide the title.</td></tr>
|
||||
<tr><td>message</td><td>string</td><td>No</td><td>An optional message that appears below the dialog's title.</td></tr>
|
||||
<tr><td>callbackOrButtons</td><td>?(() => void),<a href="/react-native/docs/0.56/alertios#buttonsarray">ButtonsArray</a></td><td>No</td><td>This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called when the user taps 'OK'. If passed an array of button configurations, each button should include a <code>text</code> key, as well as optional <code>onPress</code> and <code>style</code> keys. <code>style</code> should be one of 'default', 'cancel' or 'destructive'.</td></tr>
|
||||
<tr><td>type</td><td><a href="/react-native/docs/0.56/alertios#alerttype">AlertType</a></td><td>No</td><td>Deprecated, do not use.</td></tr>
|
||||
<tr><td>callbackOrButtons</td><td>?(() => void),<a href="/react-native/docs/alertios#buttonsarray">ButtonsArray</a></td><td>No</td><td>This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called when the user taps 'OK'. If passed an array of button configurations, each button should include a <code>text</code> key, as well as optional <code>onPress</code> and <code>style</code> keys. <code>style</code> should be one of 'default', 'cancel' or 'destructive'.</td></tr>
|
||||
<tr><td>type</td><td><a href="/react-native/docs/alertios#alerttype">AlertType</a></td><td>No</td><td>Deprecated, do not use.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Example with custom buttons:</p>
|
||||
@@ -104,8 +104,8 @@
|
||||
<tbody>
|
||||
<tr><td>title</td><td>string</td><td>Yes</td><td>The dialog's title.</td></tr>
|
||||
<tr><td>message</td><td>string</td><td>No</td><td>An optional message that appears above the text input.</td></tr>
|
||||
<tr><td>callbackOrButtons</td><td>?((text: string) => void),<a href="/react-native/docs/0.56/alertios#buttonsarray">ButtonsArray</a></td><td>No</td><td>This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called with the prompt's value when the user taps 'OK'. If passed an array of button configurations, each button should include a <code>text</code> key, as well as optional <code>onPress</code> and <code>style</code> keys (see example). <code>style</code> should be one of 'default', 'cancel' or 'destructive'.</td></tr>
|
||||
<tr><td>type</td><td><a href="/react-native/docs/0.56/alertios#alerttype">AlertType</a></td><td>No</td><td>This configures the text input. One of 'plain-text', 'secure-text' or 'login-password'.</td></tr>
|
||||
<tr><td>callbackOrButtons</td><td>?((text: string) => void),<a href="/react-native/docs/alertios#buttonsarray">ButtonsArray</a></td><td>No</td><td>This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called with the prompt's value when the user taps 'OK'. If passed an array of button configurations, each button should include a <code>text</code> key, as well as optional <code>onPress</code> and <code>style</code> keys (see example). <code>style</code> should be one of 'default', 'cancel' or 'destructive'.</td></tr>
|
||||
<tr><td>type</td><td><a href="/react-native/docs/alertios#alerttype">AlertType</a></td><td>No</td><td>This configures the text input. One of 'plain-text', 'secure-text' or 'login-password'.</td></tr>
|
||||
<tr><td>defaultValue</td><td>string</td><td>No</td><td>The default text in text input.</td></tr>
|
||||
<tr><td>keyboardType</td><td>string</td><td>No</td><td>The keyboard type of first text field(if exists). One of 'default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter' or 'web-search'.</td></tr>
|
||||
</tbody>
|
||||
@@ -202,7 +202,7 @@
|
||||
<tbody>
|
||||
<tr><td>[text]</td><td>string</td><td>Button label</td></tr>
|
||||
<tr><td>[onPress]</td><td>function</td><td>Callback function when button pressed</td></tr>
|
||||
<tr><td>[style]</td><td><a href="/react-native/docs/0.56/alertios#alertbuttonstyle">AlertButtonStyle</a></td><td>Button style</td></tr>
|
||||
<tr><td>[style]</td><td><a href="/react-native/docs/alertios#alertbuttonstyle">AlertButtonStyle</a></td><td>Button style</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p><strong>Constants:</strong></p>
|
||||
|
||||
+11
-11
@@ -43,17 +43,17 @@
|
||||
<span class="hljs-built_in">text</span> => console.<span class="hljs-built_in">log</span>(<span class="hljs-string">"You entered "</span>+<span class="hljs-built_in">text</span>)
|
||||
);
|
||||
</code></pre>
|
||||
<p>We recommend using the <a href="/react-native/docs/0.56/alert"><code>Alert.alert</code></a> method for cross-platform support if you don't need to create iOS-only prompts.</p>
|
||||
<p>We recommend using the <a href="/react-native/docs/alert"><code>Alert.alert</code></a> method for cross-platform support if you don't need to create iOS-only prompts.</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/alertios#alert"><code>alert</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/alertios#prompt"><code>prompt</code></a></li>
|
||||
<li><a href="/react-native/docs/alertios#alert"><code>alert</code></a></li>
|
||||
<li><a href="/react-native/docs/alertios#prompt"><code>prompt</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="type-definitions"></a><a href="#type-definitions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Type Definitions</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/alertios#alerttype"><code>AlertType</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/alertios#alertbuttonstyle"><code>AlertButtonStyle</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/alertios#buttonsarray"><code>ButtonsArray</code></a></li>
|
||||
<li><a href="/react-native/docs/alertios#alerttype"><code>AlertType</code></a></li>
|
||||
<li><a href="/react-native/docs/alertios#alertbuttonstyle"><code>AlertButtonStyle</code></a></li>
|
||||
<li><a href="/react-native/docs/alertios#buttonsarray"><code>ButtonsArray</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -70,8 +70,8 @@
|
||||
<tbody>
|
||||
<tr><td>title</td><td>string</td><td>Yes</td><td>The dialog's title. Passing null or '' will hide the title.</td></tr>
|
||||
<tr><td>message</td><td>string</td><td>No</td><td>An optional message that appears below the dialog's title.</td></tr>
|
||||
<tr><td>callbackOrButtons</td><td>?(() => void),<a href="/react-native/docs/0.56/alertios#buttonsarray">ButtonsArray</a></td><td>No</td><td>This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called when the user taps 'OK'. If passed an array of button configurations, each button should include a <code>text</code> key, as well as optional <code>onPress</code> and <code>style</code> keys. <code>style</code> should be one of 'default', 'cancel' or 'destructive'.</td></tr>
|
||||
<tr><td>type</td><td><a href="/react-native/docs/0.56/alertios#alerttype">AlertType</a></td><td>No</td><td>Deprecated, do not use.</td></tr>
|
||||
<tr><td>callbackOrButtons</td><td>?(() => void),<a href="/react-native/docs/alertios#buttonsarray">ButtonsArray</a></td><td>No</td><td>This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called when the user taps 'OK'. If passed an array of button configurations, each button should include a <code>text</code> key, as well as optional <code>onPress</code> and <code>style</code> keys. <code>style</code> should be one of 'default', 'cancel' or 'destructive'.</td></tr>
|
||||
<tr><td>type</td><td><a href="/react-native/docs/alertios#alerttype">AlertType</a></td><td>No</td><td>Deprecated, do not use.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Example with custom buttons:</p>
|
||||
@@ -104,8 +104,8 @@
|
||||
<tbody>
|
||||
<tr><td>title</td><td>string</td><td>Yes</td><td>The dialog's title.</td></tr>
|
||||
<tr><td>message</td><td>string</td><td>No</td><td>An optional message that appears above the text input.</td></tr>
|
||||
<tr><td>callbackOrButtons</td><td>?((text: string) => void),<a href="/react-native/docs/0.56/alertios#buttonsarray">ButtonsArray</a></td><td>No</td><td>This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called with the prompt's value when the user taps 'OK'. If passed an array of button configurations, each button should include a <code>text</code> key, as well as optional <code>onPress</code> and <code>style</code> keys (see example). <code>style</code> should be one of 'default', 'cancel' or 'destructive'.</td></tr>
|
||||
<tr><td>type</td><td><a href="/react-native/docs/0.56/alertios#alerttype">AlertType</a></td><td>No</td><td>This configures the text input. One of 'plain-text', 'secure-text' or 'login-password'.</td></tr>
|
||||
<tr><td>callbackOrButtons</td><td>?((text: string) => void),<a href="/react-native/docs/alertios#buttonsarray">ButtonsArray</a></td><td>No</td><td>This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called with the prompt's value when the user taps 'OK'. If passed an array of button configurations, each button should include a <code>text</code> key, as well as optional <code>onPress</code> and <code>style</code> keys (see example). <code>style</code> should be one of 'default', 'cancel' or 'destructive'.</td></tr>
|
||||
<tr><td>type</td><td><a href="/react-native/docs/alertios#alerttype">AlertType</a></td><td>No</td><td>This configures the text input. One of 'plain-text', 'secure-text' or 'login-password'.</td></tr>
|
||||
<tr><td>defaultValue</td><td>string</td><td>No</td><td>The default text in text input.</td></tr>
|
||||
<tr><td>keyboardType</td><td>string</td><td>No</td><td>The keyboard type of first text field(if exists). One of 'default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter' or 'web-search'.</td></tr>
|
||||
</tbody>
|
||||
@@ -202,7 +202,7 @@
|
||||
<tbody>
|
||||
<tr><td>[text]</td><td>string</td><td>Button label</td></tr>
|
||||
<tr><td>[onPress]</td><td>function</td><td>Callback function when button pressed</td></tr>
|
||||
<tr><td>[style]</td><td><a href="/react-native/docs/0.56/alertios#alertbuttonstyle">AlertButtonStyle</a></td><td>Button style</td></tr>
|
||||
<tr><td>[style]</td><td><a href="/react-native/docs/alertios#alertbuttonstyle">AlertButtonStyle</a></td><td>Button style</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p><strong>Constants:</strong></p>
|
||||
|
||||
+45
-45
@@ -39,31 +39,31 @@
|
||||
}
|
||||
).start(); <span class="hljs-comment">// Start the animation</span>
|
||||
</code></pre>
|
||||
<p>Refer to the <a href="/react-native/docs/0.56/animations#animated-api">Animations</a> guide to see additional examples of <code>Animated</code> in action.</p>
|
||||
<p>Refer to the <a href="/react-native/docs/animations#animated-api">Animations</a> guide to see additional examples of <code>Animated</code> in action.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="overview"></a><a href="#overview" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Overview</h2>
|
||||
<p>There are two value types you can use with <code>Animated</code>:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animated#value"><code>Animated.Value()</code></a> for single values</li>
|
||||
<li><a href="/react-native/docs/0.56/animated#valuexy"><code>Animated.ValueXY()</code></a> for vectors</li>
|
||||
<li><a href="/react-native/docs/animated#value"><code>Animated.Value()</code></a> for single values</li>
|
||||
<li><a href="/react-native/docs/animated#valuexy"><code>Animated.ValueXY()</code></a> for vectors</li>
|
||||
</ul>
|
||||
<p><code>Animated.Value</code> can bind to style properties or other props, and can be interpolated as well. A single <code>Animated.Value</code> can drive any number of properties.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="configuring-animations"></a><a href="#configuring-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>Configuring animations</h3>
|
||||
<p><code>Animated</code> provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animated#decay"><code>Animated.decay()</code></a> starts with an initial velocity and gradually slows to a stop.</li>
|
||||
<li><a href="/react-native/docs/0.56/animated#spring"><code>Animated.spring()</code></a> provides a simple spring physics model.</li>
|
||||
<li><a href="/react-native/docs/0.56/animated#timing"><code>Animated.timing()</code></a> animates a value over time using <a href="/react-native/docs/0.56/easing">easing functions</a>.</li>
|
||||
<li><a href="/react-native/docs/animated#decay"><code>Animated.decay()</code></a> starts with an initial velocity and gradually slows to a stop.</li>
|
||||
<li><a href="/react-native/docs/animated#spring"><code>Animated.spring()</code></a> provides a simple spring physics model.</li>
|
||||
<li><a href="/react-native/docs/animated#timing"><code>Animated.timing()</code></a> animates a value over time using <a href="/react-native/docs/easing">easing functions</a>.</li>
|
||||
</ul>
|
||||
<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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="using-the-native-driver"></a><a href="#using-the-native-driver" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using the native driver</h3>
|
||||
<p>By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.</p>
|
||||
<p>You can use the native driver by specifying <code>useNativeDriver: true</code> in your animation configuration. See the <a href="/react-native/docs/0.56/animations#using-the-native-driver">Animations</a> guide to learn more.</p>
|
||||
<p>You can use the native driver by specifying <code>useNativeDriver: true</code> in your animation configuration. See the <a href="/react-native/docs/animations#using-the-native-driver">Animations</a> guide to learn more.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="animatable-components"></a><a href="#animatable-components" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Animatable components</h3>
|
||||
<p>Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animated#createanimatedcomponent"><code>createAnimatedComponent()</code></a> can be used to make a component animatable.</li>
|
||||
<li><a href="/react-native/docs/animated#createanimatedcomponent"><code>createAnimatedComponent()</code></a> can be used to make a component animatable.</li>
|
||||
</ul>
|
||||
<p><code>Animated</code> exports the following animatable components using the above wrapper:</p>
|
||||
<ul>
|
||||
@@ -75,32 +75,32 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="composing-animations"></a><a href="#composing-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>Composing animations</h3>
|
||||
<p>Animations can also be combined in complex ways using composition functions:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animated#delay"><code>Animated.delay()</code></a> starts an animation after a given delay.</li>
|
||||
<li><a href="/react-native/docs/0.56/animated#parallel"><code>Animated.parallel()</code></a> starts a number of animations at the same time.</li>
|
||||
<li><a href="/react-native/docs/0.56/animated#sequence"><code>Animated.sequence()</code></a> starts the animations in order, waiting for each to complete before starting the next.</li>
|
||||
<li><a href="/react-native/docs/0.56/animated#stagger"><code>Animated.stagger()</code></a> starts animations in order and in parallel, but with successive delays.</li>
|
||||
<li><a href="/react-native/docs/animated#delay"><code>Animated.delay()</code></a> starts an animation after a given delay.</li>
|
||||
<li><a href="/react-native/docs/animated#parallel"><code>Animated.parallel()</code></a> starts a number of animations at the same time.</li>
|
||||
<li><a href="/react-native/docs/animated#sequence"><code>Animated.sequence()</code></a> starts the animations in order, waiting for each to complete before starting the next.</li>
|
||||
<li><a href="/react-native/docs/animated#stagger"><code>Animated.stagger()</code></a> starts animations in order and in parallel, but with successive delays.</li>
|
||||
</ul>
|
||||
<p>Animations can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.56/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
|
||||
<p>Animations can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
|
||||
<p>By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="combining-animated-values"></a><a href="#combining-animated-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>Combining animated values</h3>
|
||||
<p>You can combine two animated values via addition, subtraction, multiplication, division, or modulo to make a new animated value:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animated#add"><code>Animated.add()</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#subtract"><code>Animated.subtract()</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#divide"><code>Animated.divide()</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#modulo"><code>Animated.modulo()</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#multiply"><code>Animated.multiply()</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#add"><code>Animated.add()</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#subtract"><code>Animated.subtract()</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#divide"><code>Animated.divide()</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#modulo"><code>Animated.modulo()</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#multiply"><code>Animated.multiply()</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="interpolation"></a><a href="#interpolation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Interpolation</h3>
|
||||
<p>The <code>interpolate()</code> function allows input ranges to map to different output ranges. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value. It uses lineal interpolation by default but also supports easing functions.</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animated#interpolate"><code>interpolate()</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#interpolate"><code>interpolate()</code></a></li>
|
||||
</ul>
|
||||
<p>Read more about interpolation in the <a href="/react-native/docs/0.56/animations#interpolation">Animation</a> guide.</p>
|
||||
<p>Read more about interpolation in the <a href="/react-native/docs/animations#interpolation">Animation</a> guide.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="handling-gestures-and-other-events"></a><a href="#handling-gestures-and-other-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>Handling gestures and other events</h3>
|
||||
<p>Gestures, like panning or scrolling, and other events can map directly to animated values using <code>Animated.event()</code>. This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animated#event"><code>Animated.event()</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#event"><code>Animated.event()</code></a></li>
|
||||
</ul>
|
||||
<p>For example, when working with horizontal scrolling gestures, you would do the following in order to map <code>event.nativeEvent.contentOffset.x</code> to <code>scrollX</code> (an <code>Animated.Value</code>):</p>
|
||||
<pre><code class="hljs css languages- javascript"> onScroll={Animated.event(
|
||||
@@ -115,32 +115,32 @@
|
||||
</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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animated#decay"><code>decay</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#timing"><code>timing</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#spring"><code>spring</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#add"><code>add</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#subtract"><code>subtract</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#divide"><code>divide</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#multiply"><code>multiply</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#modulo"><code>modulo</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#diffclamp"><code>diffClamp</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#delay"><code>delay</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#sequence"><code>sequence</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#parallel"><code>parallel</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#stagger"><code>stagger</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#loop"><code>loop</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#event"><code>event</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#forkevent"><code>forkEvent</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#unforkevent"><code>unforkEvent</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#decay"><code>decay</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#timing"><code>timing</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#spring"><code>spring</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#add"><code>add</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#subtract"><code>subtract</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#divide"><code>divide</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#multiply"><code>multiply</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#modulo"><code>modulo</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#diffclamp"><code>diffClamp</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#delay"><code>delay</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#sequence"><code>sequence</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#parallel"><code>parallel</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#stagger"><code>stagger</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#loop"><code>loop</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#event"><code>event</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#forkevent"><code>forkEvent</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#unforkevent"><code>unforkEvent</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animated#value"><code>Value</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#valuexy"><code>ValueXY</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#interpolation"><code>Interpolation</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#node"><code>Node</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#createanimatedcomponent"><code>createAnimatedComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#attachnativeevent"><code>attachNativeEvent</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#value"><code>Value</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#valuexy"><code>ValueXY</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#interpolation"><code>Interpolation</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#node"><code>Node</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#createanimatedcomponent"><code>createAnimatedComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#attachnativeevent"><code>attachNativeEvent</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -161,7 +161,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="timing"></a><a href="#timing" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>timing()</code></h3>
|
||||
<pre><code class="hljs css languages- javascript"><span class="hljs-keyword">static</span> timing(value, config)
|
||||
</code></pre>
|
||||
<p>Animates a value along a timed easing curve. The <a href="/react-native/docs/0.56/easing"><code>Easing</code></a> module has tons of predefined curves, or you can use your own function.</p>
|
||||
<p>Animates a value along a timed easing curve. The <a href="/react-native/docs/easing"><code>Easing</code></a> module has tons of predefined curves, or you can use your own function.</p>
|
||||
<p>Config is an object that may have the following options:</p>
|
||||
<ul>
|
||||
<li><code>duration</code>: Length of animation (milliseconds). Default 500.</li>
|
||||
|
||||
+45
-45
@@ -39,31 +39,31 @@
|
||||
}
|
||||
).start(); <span class="hljs-comment">// Start the animation</span>
|
||||
</code></pre>
|
||||
<p>Refer to the <a href="/react-native/docs/0.56/animations#animated-api">Animations</a> guide to see additional examples of <code>Animated</code> in action.</p>
|
||||
<p>Refer to the <a href="/react-native/docs/animations#animated-api">Animations</a> guide to see additional examples of <code>Animated</code> in action.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="overview"></a><a href="#overview" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Overview</h2>
|
||||
<p>There are two value types you can use with <code>Animated</code>:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animated#value"><code>Animated.Value()</code></a> for single values</li>
|
||||
<li><a href="/react-native/docs/0.56/animated#valuexy"><code>Animated.ValueXY()</code></a> for vectors</li>
|
||||
<li><a href="/react-native/docs/animated#value"><code>Animated.Value()</code></a> for single values</li>
|
||||
<li><a href="/react-native/docs/animated#valuexy"><code>Animated.ValueXY()</code></a> for vectors</li>
|
||||
</ul>
|
||||
<p><code>Animated.Value</code> can bind to style properties or other props, and can be interpolated as well. A single <code>Animated.Value</code> can drive any number of properties.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="configuring-animations"></a><a href="#configuring-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>Configuring animations</h3>
|
||||
<p><code>Animated</code> provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animated#decay"><code>Animated.decay()</code></a> starts with an initial velocity and gradually slows to a stop.</li>
|
||||
<li><a href="/react-native/docs/0.56/animated#spring"><code>Animated.spring()</code></a> provides a simple spring physics model.</li>
|
||||
<li><a href="/react-native/docs/0.56/animated#timing"><code>Animated.timing()</code></a> animates a value over time using <a href="/react-native/docs/0.56/easing">easing functions</a>.</li>
|
||||
<li><a href="/react-native/docs/animated#decay"><code>Animated.decay()</code></a> starts with an initial velocity and gradually slows to a stop.</li>
|
||||
<li><a href="/react-native/docs/animated#spring"><code>Animated.spring()</code></a> provides a simple spring physics model.</li>
|
||||
<li><a href="/react-native/docs/animated#timing"><code>Animated.timing()</code></a> animates a value over time using <a href="/react-native/docs/easing">easing functions</a>.</li>
|
||||
</ul>
|
||||
<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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="using-the-native-driver"></a><a href="#using-the-native-driver" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using the native driver</h3>
|
||||
<p>By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.</p>
|
||||
<p>You can use the native driver by specifying <code>useNativeDriver: true</code> in your animation configuration. See the <a href="/react-native/docs/0.56/animations#using-the-native-driver">Animations</a> guide to learn more.</p>
|
||||
<p>You can use the native driver by specifying <code>useNativeDriver: true</code> in your animation configuration. See the <a href="/react-native/docs/animations#using-the-native-driver">Animations</a> guide to learn more.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="animatable-components"></a><a href="#animatable-components" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Animatable components</h3>
|
||||
<p>Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animated#createanimatedcomponent"><code>createAnimatedComponent()</code></a> can be used to make a component animatable.</li>
|
||||
<li><a href="/react-native/docs/animated#createanimatedcomponent"><code>createAnimatedComponent()</code></a> can be used to make a component animatable.</li>
|
||||
</ul>
|
||||
<p><code>Animated</code> exports the following animatable components using the above wrapper:</p>
|
||||
<ul>
|
||||
@@ -75,32 +75,32 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="composing-animations"></a><a href="#composing-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>Composing animations</h3>
|
||||
<p>Animations can also be combined in complex ways using composition functions:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animated#delay"><code>Animated.delay()</code></a> starts an animation after a given delay.</li>
|
||||
<li><a href="/react-native/docs/0.56/animated#parallel"><code>Animated.parallel()</code></a> starts a number of animations at the same time.</li>
|
||||
<li><a href="/react-native/docs/0.56/animated#sequence"><code>Animated.sequence()</code></a> starts the animations in order, waiting for each to complete before starting the next.</li>
|
||||
<li><a href="/react-native/docs/0.56/animated#stagger"><code>Animated.stagger()</code></a> starts animations in order and in parallel, but with successive delays.</li>
|
||||
<li><a href="/react-native/docs/animated#delay"><code>Animated.delay()</code></a> starts an animation after a given delay.</li>
|
||||
<li><a href="/react-native/docs/animated#parallel"><code>Animated.parallel()</code></a> starts a number of animations at the same time.</li>
|
||||
<li><a href="/react-native/docs/animated#sequence"><code>Animated.sequence()</code></a> starts the animations in order, waiting for each to complete before starting the next.</li>
|
||||
<li><a href="/react-native/docs/animated#stagger"><code>Animated.stagger()</code></a> starts animations in order and in parallel, but with successive delays.</li>
|
||||
</ul>
|
||||
<p>Animations can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.56/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
|
||||
<p>Animations can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
|
||||
<p>By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="combining-animated-values"></a><a href="#combining-animated-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>Combining animated values</h3>
|
||||
<p>You can combine two animated values via addition, subtraction, multiplication, division, or modulo to make a new animated value:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animated#add"><code>Animated.add()</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#subtract"><code>Animated.subtract()</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#divide"><code>Animated.divide()</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#modulo"><code>Animated.modulo()</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#multiply"><code>Animated.multiply()</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#add"><code>Animated.add()</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#subtract"><code>Animated.subtract()</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#divide"><code>Animated.divide()</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#modulo"><code>Animated.modulo()</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#multiply"><code>Animated.multiply()</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="interpolation"></a><a href="#interpolation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Interpolation</h3>
|
||||
<p>The <code>interpolate()</code> function allows input ranges to map to different output ranges. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value. It uses lineal interpolation by default but also supports easing functions.</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animated#interpolate"><code>interpolate()</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#interpolate"><code>interpolate()</code></a></li>
|
||||
</ul>
|
||||
<p>Read more about interpolation in the <a href="/react-native/docs/0.56/animations#interpolation">Animation</a> guide.</p>
|
||||
<p>Read more about interpolation in the <a href="/react-native/docs/animations#interpolation">Animation</a> guide.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="handling-gestures-and-other-events"></a><a href="#handling-gestures-and-other-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>Handling gestures and other events</h3>
|
||||
<p>Gestures, like panning or scrolling, and other events can map directly to animated values using <code>Animated.event()</code>. This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animated#event"><code>Animated.event()</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#event"><code>Animated.event()</code></a></li>
|
||||
</ul>
|
||||
<p>For example, when working with horizontal scrolling gestures, you would do the following in order to map <code>event.nativeEvent.contentOffset.x</code> to <code>scrollX</code> (an <code>Animated.Value</code>):</p>
|
||||
<pre><code class="hljs css languages- javascript"> onScroll={Animated.event(
|
||||
@@ -115,32 +115,32 @@
|
||||
</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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animated#decay"><code>decay</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#timing"><code>timing</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#spring"><code>spring</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#add"><code>add</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#subtract"><code>subtract</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#divide"><code>divide</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#multiply"><code>multiply</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#modulo"><code>modulo</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#diffclamp"><code>diffClamp</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#delay"><code>delay</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#sequence"><code>sequence</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#parallel"><code>parallel</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#stagger"><code>stagger</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#loop"><code>loop</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#event"><code>event</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#forkevent"><code>forkEvent</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#unforkevent"><code>unforkEvent</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#decay"><code>decay</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#timing"><code>timing</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#spring"><code>spring</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#add"><code>add</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#subtract"><code>subtract</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#divide"><code>divide</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#multiply"><code>multiply</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#modulo"><code>modulo</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#diffclamp"><code>diffClamp</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#delay"><code>delay</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#sequence"><code>sequence</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#parallel"><code>parallel</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#stagger"><code>stagger</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#loop"><code>loop</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#event"><code>event</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#forkevent"><code>forkEvent</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#unforkevent"><code>unforkEvent</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animated#value"><code>Value</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#valuexy"><code>ValueXY</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#interpolation"><code>Interpolation</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#node"><code>Node</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#createanimatedcomponent"><code>createAnimatedComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animated#attachnativeevent"><code>attachNativeEvent</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#value"><code>Value</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#valuexy"><code>ValueXY</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#interpolation"><code>Interpolation</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#node"><code>Node</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#createanimatedcomponent"><code>createAnimatedComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/animated#attachnativeevent"><code>attachNativeEvent</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -161,7 +161,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="timing"></a><a href="#timing" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>timing()</code></h3>
|
||||
<pre><code class="hljs css languages- javascript"><span class="hljs-keyword">static</span> timing(value, config)
|
||||
</code></pre>
|
||||
<p>Animates a value along a timed easing curve. The <a href="/react-native/docs/0.56/easing"><code>Easing</code></a> module has tons of predefined curves, or you can use your own function.</p>
|
||||
<p>Animates a value along a timed easing curve. The <a href="/react-native/docs/easing"><code>Easing</code></a> module has tons of predefined curves, or you can use your own function.</p>
|
||||
<p>Config is an object that may have the following options:</p>
|
||||
<ul>
|
||||
<li><code>duration</code>: Length of animation (milliseconds). Default 500.</li>
|
||||
|
||||
+14
-14
@@ -8,22 +8,22 @@
|
||||
ga('send', 'pageview');
|
||||
</script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.56</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/en/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li class=""><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><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/animatedvalue.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">AnimatedValue</h1></header><article><div><span><p>Standard value for driving animations. One <code>Animated.Value</code> can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling <code>setValue</code>) will stop any previous ones.</p>
|
||||
<p>Typically initialized with <code>new Animated.Value(0);</code></p>
|
||||
<p>See also <a href="/react-native/docs/0.56/animated"><code>Animated</code></a>.</p>
|
||||
<p>See also <a href="/react-native/docs/animated"><code>Animated</code></a>.</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#setvalue"><code>setValue</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#setoffset"><code>setOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#flattenoffset"><code>flattenOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#extractoffset"><code>extractOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#addlistener"><code>addListener</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#removelistener"><code>removeListener</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#removealllisteners"><code>removeAllListeners</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#stopanimation"><code>stopAnimation</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#resetanimation"><code>resetAnimation</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#interpolate"><code>interpolate</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#animate"><code>animate</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#stoptracking"><code>stopTracking</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#track"><code>track</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#setvalue"><code>setValue</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#setoffset"><code>setOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#flattenoffset"><code>flattenOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#extractoffset"><code>extractOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#addlistener"><code>addListener</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#removelistener"><code>removeListener</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#removealllisteners"><code>removeAllListeners</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#stopanimation"><code>stopAnimation</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#resetanimation"><code>resetAnimation</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#interpolate"><code>interpolate</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#animate"><code>animate</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#stoptracking"><code>stopTracking</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#track"><code>track</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -8,22 +8,22 @@
|
||||
ga('send', 'pageview');
|
||||
</script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.56</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/en/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li class=""><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><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/animatedvalue.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">AnimatedValue</h1></header><article><div><span><p>Standard value for driving animations. One <code>Animated.Value</code> can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling <code>setValue</code>) will stop any previous ones.</p>
|
||||
<p>Typically initialized with <code>new Animated.Value(0);</code></p>
|
||||
<p>See also <a href="/react-native/docs/0.56/animated"><code>Animated</code></a>.</p>
|
||||
<p>See also <a href="/react-native/docs/animated"><code>Animated</code></a>.</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#setvalue"><code>setValue</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#setoffset"><code>setOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#flattenoffset"><code>flattenOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#extractoffset"><code>extractOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#addlistener"><code>addListener</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#removelistener"><code>removeListener</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#removealllisteners"><code>removeAllListeners</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#stopanimation"><code>stopAnimation</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#resetanimation"><code>resetAnimation</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#interpolate"><code>interpolate</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#animate"><code>animate</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#stoptracking"><code>stopTracking</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvalue#track"><code>track</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#setvalue"><code>setValue</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#setoffset"><code>setOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#flattenoffset"><code>flattenOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#extractoffset"><code>extractOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#addlistener"><code>addListener</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#removelistener"><code>removeListener</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#removealllisteners"><code>removeAllListeners</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#stopanimation"><code>stopAnimation</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#resetanimation"><code>resetAnimation</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#interpolate"><code>interpolate</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#animate"><code>animate</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#stoptracking"><code>stopTracking</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvalue#track"><code>track</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
+14
-14
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>AnimatedValueXY · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](/react-native/docs/0.56/animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="AnimatedValueXY · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](/react-native/docs/0.56/animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>AnimatedValueXY · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](/react-native/docs/animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="AnimatedValueXY · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](/react-native/docs/animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -6,8 +6,8 @@
|
||||
|
||||
ga('create', 'UA-41298772-2', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.56</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/en/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li class=""><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><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/animatedvaluexy.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">AnimatedValueXY</h1></header><article><div><span><p>2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal <a href="/react-native/docs/0.56/animatedvalue"><code>Animated.Value</code></a>, but multiplexed. Contains two regular <code>Animated.Value</code>s under the hood.</p>
|
||||
<p>See also <a href="/react-native/docs/0.56/animated"><code>Animated</code></a>.</p>
|
||||
</script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.56</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/en/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li class=""><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><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/animatedvaluexy.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">AnimatedValueXY</h1></header><article><div><span><p>2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal <a href="/react-native/docs/animatedvalue"><code>Animated.Value</code></a>, but multiplexed. Contains two regular <code>Animated.Value</code>s under the hood.</p>
|
||||
<p>See also <a href="/react-native/docs/animated"><code>Animated</code></a>.</p>
|
||||
<h2><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</h2>
|
||||
<pre><code class="hljs css languages- javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">DraggableView</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
|
||||
<span class="hljs-keyword">constructor</span>(props) {
|
||||
@@ -45,17 +45,17 @@
|
||||
</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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#setvalue"><code>setValue</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#setoffset"><code>setOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#flattenoffset"><code>flattenOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#extractoffset"><code>extractOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#addlistener"><code>addListener</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#removelistener"><code>removeListener</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#removealllisteners"><code>removeAllListeners</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#stopanimation"><code>stopAnimation</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#resetanimation"><code>resetAnimation</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#getlayout"><code>getLayout</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#gettranslatetransform"><code>getTranslateTransform</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#setvalue"><code>setValue</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#setoffset"><code>setOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#flattenoffset"><code>flattenOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#extractoffset"><code>extractOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#addlistener"><code>addListener</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#removelistener"><code>removeListener</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#removealllisteners"><code>removeAllListeners</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#stopanimation"><code>stopAnimation</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#resetanimation"><code>resetAnimation</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#getlayout"><code>getLayout</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#gettranslatetransform"><code>getTranslateTransform</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>AnimatedValueXY · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](/react-native/docs/0.56/animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="AnimatedValueXY · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](/react-native/docs/0.56/animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>AnimatedValueXY · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](/react-native/docs/animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="AnimatedValueXY · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](/react-native/docs/animatedvalue), but multiplexed. Contains two regular `Animated.Value`s under the hood."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -6,8 +6,8 @@
|
||||
|
||||
ga('create', 'UA-41298772-2', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.56</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/en/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li class=""><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><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/animatedvaluexy.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">AnimatedValueXY</h1></header><article><div><span><p>2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal <a href="/react-native/docs/0.56/animatedvalue"><code>Animated.Value</code></a>, but multiplexed. Contains two regular <code>Animated.Value</code>s under the hood.</p>
|
||||
<p>See also <a href="/react-native/docs/0.56/animated"><code>Animated</code></a>.</p>
|
||||
</script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.56</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/en/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li class=""><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><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/animatedvaluexy.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">AnimatedValueXY</h1></header><article><div><span><p>2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal <a href="/react-native/docs/animatedvalue"><code>Animated.Value</code></a>, but multiplexed. Contains two regular <code>Animated.Value</code>s under the hood.</p>
|
||||
<p>See also <a href="/react-native/docs/animated"><code>Animated</code></a>.</p>
|
||||
<h2><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</h2>
|
||||
<pre><code class="hljs css languages- javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">DraggableView</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
|
||||
<span class="hljs-keyword">constructor</span>(props) {
|
||||
@@ -45,17 +45,17 @@
|
||||
</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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#setvalue"><code>setValue</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#setoffset"><code>setOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#flattenoffset"><code>flattenOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#extractoffset"><code>extractOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#addlistener"><code>addListener</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#removelistener"><code>removeListener</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#removealllisteners"><code>removeAllListeners</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#stopanimation"><code>stopAnimation</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#resetanimation"><code>resetAnimation</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#getlayout"><code>getLayout</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/animatedvaluexy#gettranslatetransform"><code>getTranslateTransform</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#setvalue"><code>setValue</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#setoffset"><code>setOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#flattenoffset"><code>flattenOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#extractoffset"><code>extractOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#addlistener"><code>addListener</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#removelistener"><code>removeListener</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#removealllisteners"><code>removeAllListeners</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#stopanimation"><code>stopAnimation</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#resetanimation"><code>resetAnimation</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#getlayout"><code>getLayout</code></a></li>
|
||||
<li><a href="/react-native/docs/animatedvaluexy#gettranslatetransform"><code>getTranslateTransform</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
+11
-11
@@ -30,9 +30,9 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/animations.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animations</h1></header><article><div><span><p>Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.</p>
|
||||
<p>React Native provides two complementary animation systems: <a href="/react-native/docs/0.56/animations#animated-api"><code>Animated</code></a> for granular and interactive control of specific values, and <a href="/react-native/docs/0.56/animations#layoutanimation-api"><code>LayoutAnimation</code></a> for animated global layout transactions.</p>
|
||||
<p>React Native provides two complementary animation systems: <a href="/react-native/docs/animations#animated-api"><code>Animated</code></a> for granular and interactive control of specific values, and <a href="/react-native/docs/animations#layoutanimation-api"><code>LayoutAnimation</code></a> for animated global layout transactions.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="animated-api"></a><a href="#animated-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><code>Animated</code> API</h2>
|
||||
<p>The <a href="/react-native/docs/0.56/animated"><code>Animated</code></a> API is designed to make it very easy to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
|
||||
<p>The <a href="/react-native/docs/animated"><code>Animated</code></a> API is designed to make it very easy to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
|
||||
<p><code>Animated</code> exports four animatable component types: <code>View</code>, <code>Text</code>, <code>Image</code>, and <code>ScrollView</code>, but you can also create your own using <code>Animated.createAnimatedComponent()</code>.</p>
|
||||
<p>For example, a container view that fades in when it is mounted may look like this:</p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
@@ -102,7 +102,7 @@ export default class App extends React.Component {
|
||||
Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="configuring-animations"></a><a href="#configuring-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>Configuring animations</h3>
|
||||
<p>Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p><code>Animated</code> provides several animation types, the most commonly used one being <a href="/react-native/docs/0.56/animated#timing"><code>Animated.timing()</code></a>. It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.</p>
|
||||
<p><code>Animated</code> provides several animation types, the most commonly used one being <a href="/react-native/docs/animated#timing"><code>Animated.timing()</code></a>. It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.</p>
|
||||
<p>By default, <code>timing</code> will use a easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing a <code>easing</code> parameter. Custom <code>duration</code> or even a <code>delay</code> before the animation starts is also supported.</p>
|
||||
<p>For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:</p>
|
||||
<pre><code class="hljs css languages- javascript">Animated.timing(<span class="hljs-keyword">this</span>.state.xPosition, {
|
||||
@@ -111,7 +111,7 @@ Because the entire configuration is declarative, we will be able to implement fu
|
||||
<span class="hljs-attr">duration</span>: <span class="hljs-number">2000</span>,
|
||||
}).start();
|
||||
</code></pre>
|
||||
<p>Take a look at the <a href="/react-native/docs/0.56/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>
|
||||
<p>Take a look at the <a href="/react-native/docs/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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="composing-animations"></a><a href="#composing-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>Composing animations</h3>
|
||||
<p>Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The <code>Animated</code> API provides several methods, such as <code>sequence()</code> and <code>delay()</code>, each of which simply take an array of animations to execute and automatically calls <code>start()</code>/<code>stop()</code> as needed.</p>
|
||||
<p>For example, the following animation coasts to a stop, then it springs back while twirling in parallel:</p>
|
||||
@@ -135,9 +135,9 @@ Because the entire configuration is declarative, we will be able to implement fu
|
||||
]).start(); <span class="hljs-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>
|
||||
<p>You can find a full list of composition methods in the <a href="/react-native/docs/0.56/animated#composing-animations">Composing animations</a> section of the <code>Animated</code> API reference.</p>
|
||||
<p>You can find a full list of composition methods in the <a href="/react-native/docs/animated#composing-animations">Composing animations</a> section of the <code>Animated</code> API reference.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="combining-animated-values"></a><a href="#combining-animated-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>Combining animated values</h3>
|
||||
<p>You can <a href="/react-native/docs/0.56/animated#combining-animated-values">combine two animated values</a> via addition, multiplication, division, or modulo to make a new animated value.</p>
|
||||
<p>You can <a href="/react-native/docs/animated#combining-animated-values">combine two animated values</a> via addition, multiplication, division, or modulo to make a new animated value.</p>
|
||||
<p>There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):</p>
|
||||
<pre><code class="hljs css languages- javascript"><span class="hljs-keyword">const</span> a = <span class="hljs-keyword">new</span> Animated.Value(<span class="hljs-number">1</span>);
|
||||
<span class="hljs-keyword">const</span> b = Animated.divide(<span class="hljs-number">1</span>, a);
|
||||
@@ -165,7 +165,7 @@ Animated.spring(a, {
|
||||
}],
|
||||
}}
|
||||
</code></pre>
|
||||
<p><a href="/react-native/docs/0.56/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 an 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>
|
||||
<p><a href="/react-native/docs/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 an 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 languages- javascript">value.interpolate({
|
||||
<span class="hljs-attr">inputRange</span>: [<span class="hljs-number">-300</span>, <span class="hljs-number">-100</span>, <span class="hljs-number">0</span>, <span class="hljs-number">100</span>, <span class="hljs-number">101</span>],
|
||||
<span class="hljs-attr">outputRange</span>: [<span class="hljs-number">300</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>],
|
||||
@@ -191,7 +191,7 @@ Animated.spring(a, {
|
||||
<span class="hljs-attr">outputRange</span>: [<span class="hljs-string">'0deg'</span>, <span class="hljs-string">'360deg'</span>],
|
||||
});
|
||||
</code></pre>
|
||||
<p><code>interpolate()</code> also supports arbitrary easing functions, many of which are already implemented in the <a href="/react-native/docs/0.56/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>
|
||||
<p><code>interpolate()</code> also supports arbitrary easing functions, many of which are already implemented in the <a href="/react-native/docs/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. Just 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 languages- javascript">Animated.spring(follower, {<span class="hljs-attr">toValue</span>: leader}).start();
|
||||
@@ -204,7 +204,7 @@ Animated.timing(opacity, {
|
||||
</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 simple wrapper that basically 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="tracking-gestures"></a><a href="#tracking-gestures" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 gestures</h3>
|
||||
<p>Gestures, like panning or scrolling, and other events can map directly to animated values using <a href="/react-native/docs/0.56/animated#event"><code>Animated.event</code></a>. This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.</p>
|
||||
<p>Gestures, like panning or scrolling, and other events can map directly to animated values using <a href="/react-native/docs/animated#event"><code>Animated.event</code></a>. This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.</p>
|
||||
<p>For example, when working with horizontal scrolling gestures, you would do the following in order to map <code>event.nativeEvent.contentOffset.x</code> to <code>scrollX</code> (an <code>Animated.Value</code>):</p>
|
||||
<pre><code class="hljs css languages- javascript"> onScroll={Animated.event(
|
||||
<span class="hljs-comment">// scrollX = e.nativeEvent.contentOffset.x</span>
|
||||
@@ -369,9 +369,9 @@ const styles = StyleSheet.create({
|
||||
<h3><a class="anchor" aria-hidden="true" id="requestanimationframe"></a><a href="#requestanimationframe" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>requestAnimationFrame</code></h3>
|
||||
<p><code>requestAnimationFrame</code> is a polyfill from the browser that you might be familiar with. It accepts a function as its only argument and calls that function before the next repaint. It is an essential building block for animations that underlies all of the JavaScript-based animation APIs. In general, you shouldn't need to call this yourself - the animation APIs will manage frame updates for you.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="setnativeprops"></a><a href="#setnativeprops" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>setNativeProps</code></h3>
|
||||
<p>As mentioned <a href="/react-native/docs/0.56/direct-manipulation">in the Direct Manipulation section</a>, <code>setNativeProps</code> allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to <code>setState</code> and re-render the component hierarchy.</p>
|
||||
<p>As mentioned <a href="/react-native/docs/direct-manipulation">in the Direct Manipulation section</a>, <code>setNativeProps</code> allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to <code>setState</code> and re-render the component hierarchy.</p>
|
||||
<p>We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested and hasn't been optimized with <code>shouldComponentUpdate</code>.</p>
|
||||
<p>If you find your animations with dropping frames (performing below 60 frames per second), look into using <code>setNativeProps</code> or <code>shouldComponentUpdate</code> to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread <a href="http://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html">with the useNativeDriver option</a>. You may also want to defer any computationally intensive work until after animations are complete, using the <a href="/react-native/docs/0.56/interactionmanager">InteractionManager</a>. You can monitor the frame rate by using the In-App Developer Menu "FPS Monitor" tool.</p>
|
||||
<p>If you find your animations with dropping frames (performing below 60 frames per second), look into using <code>setNativeProps</code> or <code>shouldComponentUpdate</code> to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread <a href="http://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html">with the useNativeDriver option</a>. You may also want to defer any computationally intensive work until after animations are complete, using the <a href="/react-native/docs/interactionmanager">InteractionManager</a>. You can monitor the frame rate by using the In-App Developer Menu "FPS Monitor" tool.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/images">← Images</a><a class="docs-next button" href="/react-native/docs/accessibility">Accessibility →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/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="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 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>
|
||||
var search = docsearch({
|
||||
|
||||
+11
-11
@@ -30,9 +30,9 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/animations.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animations</h1></header><article><div><span><p>Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow you to convey physically believable motion in your interface.</p>
|
||||
<p>React Native provides two complementary animation systems: <a href="/react-native/docs/0.56/animations#animated-api"><code>Animated</code></a> for granular and interactive control of specific values, and <a href="/react-native/docs/0.56/animations#layoutanimation-api"><code>LayoutAnimation</code></a> for animated global layout transactions.</p>
|
||||
<p>React Native provides two complementary animation systems: <a href="/react-native/docs/animations#animated-api"><code>Animated</code></a> for granular and interactive control of specific values, and <a href="/react-native/docs/animations#layoutanimation-api"><code>LayoutAnimation</code></a> for animated global layout transactions.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="animated-api"></a><a href="#animated-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><code>Animated</code> API</h2>
|
||||
<p>The <a href="/react-native/docs/0.56/animated"><code>Animated</code></a> API is designed to make it very easy to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
|
||||
<p>The <a href="/react-native/docs/animated"><code>Animated</code></a> API is designed to make it very easy to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
|
||||
<p><code>Animated</code> exports four animatable component types: <code>View</code>, <code>Text</code>, <code>Image</code>, and <code>ScrollView</code>, but you can also create your own using <code>Animated.createAnimatedComponent()</code>.</p>
|
||||
<p>For example, a container view that fades in when it is mounted may look like this:</p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
@@ -102,7 +102,7 @@ export default class App extends React.Component {
|
||||
Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="configuring-animations"></a><a href="#configuring-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>Configuring animations</h3>
|
||||
<p>Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p><code>Animated</code> provides several animation types, the most commonly used one being <a href="/react-native/docs/0.56/animated#timing"><code>Animated.timing()</code></a>. It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.</p>
|
||||
<p><code>Animated</code> provides several animation types, the most commonly used one being <a href="/react-native/docs/animated#timing"><code>Animated.timing()</code></a>. It supports animating a value over time using one of various predefined easing functions, or you can use your own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.</p>
|
||||
<p>By default, <code>timing</code> will use a easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. You can specify a different easing function by passing a <code>easing</code> parameter. Custom <code>duration</code> or even a <code>delay</code> before the animation starts is also supported.</p>
|
||||
<p>For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:</p>
|
||||
<pre><code class="hljs css languages- javascript">Animated.timing(<span class="hljs-keyword">this</span>.state.xPosition, {
|
||||
@@ -111,7 +111,7 @@ Because the entire configuration is declarative, we will be able to implement fu
|
||||
<span class="hljs-attr">duration</span>: <span class="hljs-number">2000</span>,
|
||||
}).start();
|
||||
</code></pre>
|
||||
<p>Take a look at the <a href="/react-native/docs/0.56/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>
|
||||
<p>Take a look at the <a href="/react-native/docs/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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="composing-animations"></a><a href="#composing-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>Composing animations</h3>
|
||||
<p>Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The <code>Animated</code> API provides several methods, such as <code>sequence()</code> and <code>delay()</code>, each of which simply take an array of animations to execute and automatically calls <code>start()</code>/<code>stop()</code> as needed.</p>
|
||||
<p>For example, the following animation coasts to a stop, then it springs back while twirling in parallel:</p>
|
||||
@@ -135,9 +135,9 @@ Because the entire configuration is declarative, we will be able to implement fu
|
||||
]).start(); <span class="hljs-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>
|
||||
<p>You can find a full list of composition methods in the <a href="/react-native/docs/0.56/animated#composing-animations">Composing animations</a> section of the <code>Animated</code> API reference.</p>
|
||||
<p>You can find a full list of composition methods in the <a href="/react-native/docs/animated#composing-animations">Composing animations</a> section of the <code>Animated</code> API reference.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="combining-animated-values"></a><a href="#combining-animated-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>Combining animated values</h3>
|
||||
<p>You can <a href="/react-native/docs/0.56/animated#combining-animated-values">combine two animated values</a> via addition, multiplication, division, or modulo to make a new animated value.</p>
|
||||
<p>You can <a href="/react-native/docs/animated#combining-animated-values">combine two animated values</a> via addition, multiplication, division, or modulo to make a new animated value.</p>
|
||||
<p>There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):</p>
|
||||
<pre><code class="hljs css languages- javascript"><span class="hljs-keyword">const</span> a = <span class="hljs-keyword">new</span> Animated.Value(<span class="hljs-number">1</span>);
|
||||
<span class="hljs-keyword">const</span> b = Animated.divide(<span class="hljs-number">1</span>, a);
|
||||
@@ -165,7 +165,7 @@ Animated.spring(a, {
|
||||
}],
|
||||
}}
|
||||
</code></pre>
|
||||
<p><a href="/react-native/docs/0.56/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 an 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>
|
||||
<p><a href="/react-native/docs/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 an 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 languages- javascript">value.interpolate({
|
||||
<span class="hljs-attr">inputRange</span>: [<span class="hljs-number">-300</span>, <span class="hljs-number">-100</span>, <span class="hljs-number">0</span>, <span class="hljs-number">100</span>, <span class="hljs-number">101</span>],
|
||||
<span class="hljs-attr">outputRange</span>: [<span class="hljs-number">300</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>],
|
||||
@@ -191,7 +191,7 @@ Animated.spring(a, {
|
||||
<span class="hljs-attr">outputRange</span>: [<span class="hljs-string">'0deg'</span>, <span class="hljs-string">'360deg'</span>],
|
||||
});
|
||||
</code></pre>
|
||||
<p><code>interpolate()</code> also supports arbitrary easing functions, many of which are already implemented in the <a href="/react-native/docs/0.56/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>
|
||||
<p><code>interpolate()</code> also supports arbitrary easing functions, many of which are already implemented in the <a href="/react-native/docs/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. Just 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 languages- javascript">Animated.spring(follower, {<span class="hljs-attr">toValue</span>: leader}).start();
|
||||
@@ -204,7 +204,7 @@ Animated.timing(opacity, {
|
||||
</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 simple wrapper that basically 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>
|
||||
<h3><a class="anchor" aria-hidden="true" id="tracking-gestures"></a><a href="#tracking-gestures" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 gestures</h3>
|
||||
<p>Gestures, like panning or scrolling, and other events can map directly to animated values using <a href="/react-native/docs/0.56/animated#event"><code>Animated.event</code></a>. This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.</p>
|
||||
<p>Gestures, like panning or scrolling, and other events can map directly to animated values using <a href="/react-native/docs/animated#event"><code>Animated.event</code></a>. This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.</p>
|
||||
<p>For example, when working with horizontal scrolling gestures, you would do the following in order to map <code>event.nativeEvent.contentOffset.x</code> to <code>scrollX</code> (an <code>Animated.Value</code>):</p>
|
||||
<pre><code class="hljs css languages- javascript"> onScroll={Animated.event(
|
||||
<span class="hljs-comment">// scrollX = e.nativeEvent.contentOffset.x</span>
|
||||
@@ -369,9 +369,9 @@ const styles = StyleSheet.create({
|
||||
<h3><a class="anchor" aria-hidden="true" id="requestanimationframe"></a><a href="#requestanimationframe" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>requestAnimationFrame</code></h3>
|
||||
<p><code>requestAnimationFrame</code> is a polyfill from the browser that you might be familiar with. It accepts a function as its only argument and calls that function before the next repaint. It is an essential building block for animations that underlies all of the JavaScript-based animation APIs. In general, you shouldn't need to call this yourself - the animation APIs will manage frame updates for you.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="setnativeprops"></a><a href="#setnativeprops" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>setNativeProps</code></h3>
|
||||
<p>As mentioned <a href="/react-native/docs/0.56/direct-manipulation">in the Direct Manipulation section</a>, <code>setNativeProps</code> allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to <code>setState</code> and re-render the component hierarchy.</p>
|
||||
<p>As mentioned <a href="/react-native/docs/direct-manipulation">in the Direct Manipulation section</a>, <code>setNativeProps</code> allows us to modify properties of native-backed components (components that are actually backed by native views, unlike composite components) directly, without having to <code>setState</code> and re-render the component hierarchy.</p>
|
||||
<p>We could use this in the Rebound example to update the scale - this might be helpful if the component that we are updating is deeply nested and hasn't been optimized with <code>shouldComponentUpdate</code>.</p>
|
||||
<p>If you find your animations with dropping frames (performing below 60 frames per second), look into using <code>setNativeProps</code> or <code>shouldComponentUpdate</code> to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread <a href="http://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html">with the useNativeDriver option</a>. You may also want to defer any computationally intensive work until after animations are complete, using the <a href="/react-native/docs/0.56/interactionmanager">InteractionManager</a>. You can monitor the frame rate by using the In-App Developer Menu "FPS Monitor" tool.</p>
|
||||
<p>If you find your animations with dropping frames (performing below 60 frames per second), look into using <code>setNativeProps</code> or <code>shouldComponentUpdate</code> to optimize them. Or you could run the animations on the UI thread rather than the JavaScript thread <a href="http://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html">with the useNativeDriver option</a>. You may also want to defer any computationally intensive work until after animations are complete, using the <a href="/react-native/docs/interactionmanager">InteractionManager</a>. You can monitor the frame rate by using the In-App Developer Menu "FPS Monitor" tool.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/images">← Images</a><a class="docs-next button" href="/react-native/docs/accessibility">Accessibility →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/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="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 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>
|
||||
var search = docsearch({
|
||||
|
||||
+15
-15
@@ -44,21 +44,21 @@
|
||||
<p><code>AppRegistry</code> should be <code>require</code>d early in the <code>require</code> sequence to make sure the JS execution environment is setup before other modules are <code>require</code>d.</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#setwrappercomponentprovider"><code>setWrapperComponentProvider</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#registerconfig"><code>registerConfig</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#registercomponent"><code>registerComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#registerrunnable"><code>registerRunnable</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#registersection"><code>registerSection</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#getappkeys"><code>getAppKeys</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#getsectionkeys"><code>getSectionKeys</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#getsections"><code>getSections</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#getrunnable"><code>getRunnable</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#getregistry"><code>getRegistry</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#setcomponentproviderinstrumentationhook"><code>setComponentProviderInstrumentationHook</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#runapplication"><code>runApplication</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#unmountapplicationcomponentatroottag"><code>unmountApplicationComponentAtRootTag</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#registerheadlesstask"><code>registerHeadlessTask</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#startheadlesstask"><code>startHeadlessTask</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#setwrappercomponentprovider"><code>setWrapperComponentProvider</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#registerconfig"><code>registerConfig</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#registercomponent"><code>registerComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#registerrunnable"><code>registerRunnable</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#registersection"><code>registerSection</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#getappkeys"><code>getAppKeys</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#getsectionkeys"><code>getSectionKeys</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#getsections"><code>getSections</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#getrunnable"><code>getRunnable</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#getregistry"><code>getRegistry</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#setcomponentproviderinstrumentationhook"><code>setComponentProviderInstrumentationHook</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#runapplication"><code>runApplication</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#unmountapplicationcomponentatroottag"><code>unmountApplicationComponentAtRootTag</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#registerheadlesstask"><code>registerHeadlessTask</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#startheadlesstask"><code>startHeadlessTask</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
+15
-15
@@ -44,21 +44,21 @@
|
||||
<p><code>AppRegistry</code> should be <code>require</code>d early in the <code>require</code> sequence to make sure the JS execution environment is setup before other modules are <code>require</code>d.</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#setwrappercomponentprovider"><code>setWrapperComponentProvider</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#registerconfig"><code>registerConfig</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#registercomponent"><code>registerComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#registerrunnable"><code>registerRunnable</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#registersection"><code>registerSection</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#getappkeys"><code>getAppKeys</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#getsectionkeys"><code>getSectionKeys</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#getsections"><code>getSections</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#getrunnable"><code>getRunnable</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#getregistry"><code>getRegistry</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#setcomponentproviderinstrumentationhook"><code>setComponentProviderInstrumentationHook</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#runapplication"><code>runApplication</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#unmountapplicationcomponentatroottag"><code>unmountApplicationComponentAtRootTag</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#registerheadlesstask"><code>registerHeadlessTask</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appregistry#startheadlesstask"><code>startHeadlessTask</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#setwrappercomponentprovider"><code>setWrapperComponentProvider</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#registerconfig"><code>registerConfig</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#registercomponent"><code>registerComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#registerrunnable"><code>registerRunnable</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#registersection"><code>registerSection</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#getappkeys"><code>getAppKeys</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#getsectionkeys"><code>getSectionKeys</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#getsections"><code>getSections</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#getrunnable"><code>getRunnable</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#getregistry"><code>getRegistry</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#setcomponentproviderinstrumentationhook"><code>setComponentProviderInstrumentationHook</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#runapplication"><code>runApplication</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#unmountapplicationcomponentatroottag"><code>unmountApplicationComponentAtRootTag</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#registerheadlesstask"><code>registerHeadlessTask</code></a></li>
|
||||
<li><a href="/react-native/docs/appregistry#startheadlesstask"><code>startHeadlessTask</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
+3
-3
@@ -80,12 +80,12 @@
|
||||
<p>This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the <code>active</code> state, and the null state will happen only momentarily.</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/appstate#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appstate#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/appstate#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/appstate#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/appstate#currentState"><code>currentState</code></a></li>
|
||||
<li><a href="/react-native/docs/appstate#currentState"><code>currentState</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -80,12 +80,12 @@
|
||||
<p>This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the <code>active</code> state, and the null state will happen only momentarily.</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/appstate#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/appstate#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/appstate#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/appstate#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/appstate#currentState"><code>currentState</code></a></li>
|
||||
<li><a href="/react-native/docs/appstate#currentState"><code>currentState</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
+11
-11
@@ -60,17 +60,17 @@
|
||||
</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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#getitem"><code>getItem</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#setitem"><code>setItem</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#removeitem"><code>removeItem</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#mergeitem"><code>mergeItem</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#clear"><code>clear</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#getallkeys"><code>getAllKeys</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#flushgetrequests"><code>flushGetRequests</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#multiget"><code>multiGet</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#multiset"><code>multiSet</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#multiremove"><code>multiRemove</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#multimerge"><code>multiMerge</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#getitem"><code>getItem</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#setitem"><code>setItem</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#removeitem"><code>removeItem</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#mergeitem"><code>mergeItem</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#clear"><code>clear</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#getallkeys"><code>getAllKeys</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#flushgetrequests"><code>flushGetRequests</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#multiget"><code>multiGet</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#multiset"><code>multiSet</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#multiremove"><code>multiRemove</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#multimerge"><code>multiMerge</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -60,17 +60,17 @@
|
||||
</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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#getitem"><code>getItem</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#setitem"><code>setItem</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#removeitem"><code>removeItem</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#mergeitem"><code>mergeItem</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#clear"><code>clear</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#getallkeys"><code>getAllKeys</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#flushgetrequests"><code>flushGetRequests</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#multiget"><code>multiGet</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#multiset"><code>multiSet</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#multiremove"><code>multiRemove</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/asyncstorage#multimerge"><code>multiMerge</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#getitem"><code>getItem</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#setitem"><code>setItem</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#removeitem"><code>removeItem</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#mergeitem"><code>mergeItem</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#clear"><code>clear</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#getallkeys"><code>getAllKeys</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#flushgetrequests"><code>flushGetRequests</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#multiget"><code>multiGet</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#multiset"><code>multiSet</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#multiremove"><code>multiRemove</code></a></li>
|
||||
<li><a href="/react-native/docs/asyncstorage#multimerge"><code>multiMerge</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -32,9 +32,9 @@
|
||||
</script></nav></div><div class="container mainContainer"><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/backandroid.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">BackAndroid</h1></header><article><div><span><p>Deprecated. Use BackHandler instead.</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/backandroid#exitapp"><code>exitApp</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/backandroid#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/backandroid#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/backandroid#exitapp"><code>exitApp</code></a></li>
|
||||
<li><a href="/react-native/docs/backandroid#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/backandroid#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -32,9 +32,9 @@
|
||||
</script></nav></div><div class="container mainContainer"><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/backandroid.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">BackAndroid</h1></header><article><div><span><p>Deprecated. Use BackHandler instead.</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/backandroid#exitapp"><code>exitApp</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/backandroid#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/backandroid#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/backandroid#exitapp"><code>exitApp</code></a></li>
|
||||
<li><a href="/react-native/docs/backandroid#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/backandroid#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -74,9 +74,9 @@
|
||||
</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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/backhandler#exitapp"><code>exitApp</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/backhandler#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/backhandler#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/backhandler#exitapp"><code>exitApp</code></a></li>
|
||||
<li><a href="/react-native/docs/backhandler#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/backhandler#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -74,9 +74,9 @@
|
||||
</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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/backhandler#exitapp"><code>exitApp</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/backhandler#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/backhandler#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/backhandler#exitapp"><code>exitApp</code></a></li>
|
||||
<li><a href="/react-native/docs/backhandler#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/backhandler#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -131,7 +131,7 @@ ndk.<span class="hljs-attribute">dir</span>=/Users/your_unix_name/android-ndk/an
|
||||
<h3><a class="anchor" aria-hidden="true" id="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Troubleshooting</h3>
|
||||
<p>Gradle build fails in <code>ndk-build</code>. See the section about <code>local.properties</code> file above.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="testing-your-changes"></a><a href="#testing-your-changes" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Testing your Changes</h2>
|
||||
<p>If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see <a href="/react-native/docs/0.56/testing">Testing your Changes</a>.</p>
|
||||
<p>If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see <a href="/react-native/docs/testing">Testing your Changes</a>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/maintainers">← What to Expect from Maintainers</a><a class="docs-next button" href="/react-native/docs/testing">Testing your Changes →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/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="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 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>
|
||||
var search = docsearch({
|
||||
|
||||
@@ -131,7 +131,7 @@ ndk.<span class="hljs-attribute">dir</span>=/Users/your_unix_name/android-ndk/an
|
||||
<h3><a class="anchor" aria-hidden="true" id="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Troubleshooting</h3>
|
||||
<p>Gradle build fails in <code>ndk-build</code>. See the section about <code>local.properties</code> file above.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="testing-your-changes"></a><a href="#testing-your-changes" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Testing your Changes</h2>
|
||||
<p>If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see <a href="/react-native/docs/0.56/testing">Testing your Changes</a>.</p>
|
||||
<p>If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see <a href="/react-native/docs/testing">Testing your Changes</a>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/maintainers">← What to Expect from Maintainers</a><a class="docs-next button" href="/react-native/docs/testing">Testing your Changes →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/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="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 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>
|
||||
var search = docsearch({
|
||||
|
||||
+9
-9
@@ -31,7 +31,7 @@
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/button.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Button</h1></header><article><div><span><p>A basic button component that should render nicely on any platform. Supports a minimal level of customization.</p>
|
||||
<p><center><img src="/react-native/docs/assets/buttonExample.png"></img></center></p>
|
||||
<p>If this button doesn't look right for your app, you can build your own button using <a href="/react-native/docs/0.56/touchableopacity">TouchableOpacity</a> or <a href="/react-native/docs/0.56/touchablenativefeedback">TouchableNativeFeedback</a>. For inspiration, look at the <a href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js">source code for this button component</a>. Or, take a look at the <a href="https://js.coach/react-native?search=button">wide variety of button components built by the community</a>.</p>
|
||||
<p>If this button doesn't look right for your app, you can build your own button using <a href="/react-native/docs/touchableopacity">TouchableOpacity</a> or <a href="/react-native/docs/touchablenativefeedback">TouchableNativeFeedback</a>. For inspiration, look at the <a href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js">source code for this button component</a>. Or, take a look at the <a href="https://js.coach/react-native?search=button">wide variety of button components built by the community</a>.</p>
|
||||
<p>Example usage:</p>
|
||||
<pre><code class="hljs">import { <span class="hljs-keyword">Button</span> } from <span class="hljs-string">'react-native'</span><span class="hljs-comment">;</span>
|
||||
...
|
||||
@@ -45,13 +45,13 @@
|
||||
</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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/button#onpress"><code>onPress</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/button#title"><code>title</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/button#accessibilitylabel"><code>accessibilityLabel</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/button#color"><code>color</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/button#disabled"><code>disabled</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/button#testid"><code>testID</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/button#hastvpreferredfocus"><code>hasTVPreferredFocus</code></a></li>
|
||||
<li><a href="/react-native/docs/button#onpress"><code>onPress</code></a></li>
|
||||
<li><a href="/react-native/docs/button#title"><code>title</code></a></li>
|
||||
<li><a href="/react-native/docs/button#accessibilitylabel"><code>accessibilityLabel</code></a></li>
|
||||
<li><a href="/react-native/docs/button#color"><code>color</code></a></li>
|
||||
<li><a href="/react-native/docs/button#disabled"><code>disabled</code></a></li>
|
||||
<li><a href="/react-native/docs/button#testid"><code>testID</code></a></li>
|
||||
<li><a href="/react-native/docs/button#hastvpreferredfocus"><code>hasTVPreferredFocus</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -96,7 +96,7 @@
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="/react-native/docs/0.56/colors">color</a></td><td>No</td></tr>
|
||||
<tr><td><a href="/react-native/docs/colors">color</a></td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/button.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Button</h1></header><article><div><span><p>A basic button component that should render nicely on any platform. Supports a minimal level of customization.</p>
|
||||
<p><center><img src="/react-native/docs/assets/buttonExample.png"></img></center></p>
|
||||
<p>If this button doesn't look right for your app, you can build your own button using <a href="/react-native/docs/0.56/touchableopacity">TouchableOpacity</a> or <a href="/react-native/docs/0.56/touchablenativefeedback">TouchableNativeFeedback</a>. For inspiration, look at the <a href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js">source code for this button component</a>. Or, take a look at the <a href="https://js.coach/react-native?search=button">wide variety of button components built by the community</a>.</p>
|
||||
<p>If this button doesn't look right for your app, you can build your own button using <a href="/react-native/docs/touchableopacity">TouchableOpacity</a> or <a href="/react-native/docs/touchablenativefeedback">TouchableNativeFeedback</a>. For inspiration, look at the <a href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js">source code for this button component</a>. Or, take a look at the <a href="https://js.coach/react-native?search=button">wide variety of button components built by the community</a>.</p>
|
||||
<p>Example usage:</p>
|
||||
<pre><code class="hljs">import { <span class="hljs-keyword">Button</span> } from <span class="hljs-string">'react-native'</span><span class="hljs-comment">;</span>
|
||||
...
|
||||
@@ -45,13 +45,13 @@
|
||||
</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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/button#onpress"><code>onPress</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/button#title"><code>title</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/button#accessibilitylabel"><code>accessibilityLabel</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/button#color"><code>color</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/button#disabled"><code>disabled</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/button#testid"><code>testID</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/button#hastvpreferredfocus"><code>hasTVPreferredFocus</code></a></li>
|
||||
<li><a href="/react-native/docs/button#onpress"><code>onPress</code></a></li>
|
||||
<li><a href="/react-native/docs/button#title"><code>title</code></a></li>
|
||||
<li><a href="/react-native/docs/button#accessibilitylabel"><code>accessibilityLabel</code></a></li>
|
||||
<li><a href="/react-native/docs/button#color"><code>color</code></a></li>
|
||||
<li><a href="/react-native/docs/button#disabled"><code>disabled</code></a></li>
|
||||
<li><a href="/react-native/docs/button#testid"><code>testID</code></a></li>
|
||||
<li><a href="/react-native/docs/button#hastvpreferredfocus"><code>hasTVPreferredFocus</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -96,7 +96,7 @@
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="/react-native/docs/0.56/colors">color</a></td><td>No</td></tr>
|
||||
<tr><td><a href="/react-native/docs/colors">color</a></td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
|
||||
@@ -30,14 +30,14 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/cameraroll.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">CameraRoll</h1></header><article><div><span><p><code>CameraRoll</code> provides access to the local camera roll or photo library.</p>
|
||||
<p>On iOS, the <code>CameraRoll</code> API requires the <code>RCTCameraRoll</code> library to be linked. You can refer to <a href="/react-native/docs/0.56/linking-libraries-ios">Linking Libraries (iOS)</a> to learn more.</p>
|
||||
<p>On iOS, the <code>CameraRoll</code> API requires the <code>RCTCameraRoll</code> library to be linked. You can refer to <a href="/react-native/docs/linking-libraries-ios">Linking Libraries (iOS)</a> to learn more.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="permissions"></a><a href="#permissions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Permissions</h3>
|
||||
<p>The user's permission is required in order to access the Camera Roll on devices running iOS 10 or later. Add the <code>NSPhotoLibraryUsageDescription</code> key in your <code>Info.plist</code> with a string that describes how your app will use this data. This key will appear as <code>Privacy - Photo Library Usage Description</code> in Xcode.</p>
|
||||
<p>If you are targeting devices running iOS 11 or later, you will also need to add the <code>NSPhotoLibraryAddUsageDescription</code> key in your <code>Info.plist</code>. Use this key to define a string that describes how your app will use this data. By adding this key to your <code>Info.plist</code>, you will be able to request write-only access permission from the user. If you try to save to the camera roll without this permission, your app will exit.</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/cameraroll#savetocameraroll"><code>saveToCameraRoll</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/cameraroll#getphotos"><code>getPhotos</code></a></li>
|
||||
<li><a href="/react-native/docs/cameraroll#savetocameraroll"><code>saveToCameraRoll</code></a></li>
|
||||
<li><a href="/react-native/docs/cameraroll#getphotos"><code>getPhotos</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -30,14 +30,14 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/cameraroll.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">CameraRoll</h1></header><article><div><span><p><code>CameraRoll</code> provides access to the local camera roll or photo library.</p>
|
||||
<p>On iOS, the <code>CameraRoll</code> API requires the <code>RCTCameraRoll</code> library to be linked. You can refer to <a href="/react-native/docs/0.56/linking-libraries-ios">Linking Libraries (iOS)</a> to learn more.</p>
|
||||
<p>On iOS, the <code>CameraRoll</code> API requires the <code>RCTCameraRoll</code> library to be linked. You can refer to <a href="/react-native/docs/linking-libraries-ios">Linking Libraries (iOS)</a> to learn more.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="permissions"></a><a href="#permissions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Permissions</h3>
|
||||
<p>The user's permission is required in order to access the Camera Roll on devices running iOS 10 or later. Add the <code>NSPhotoLibraryUsageDescription</code> key in your <code>Info.plist</code> with a string that describes how your app will use this data. This key will appear as <code>Privacy - Photo Library Usage Description</code> in Xcode.</p>
|
||||
<p>If you are targeting devices running iOS 11 or later, you will also need to add the <code>NSPhotoLibraryAddUsageDescription</code> key in your <code>Info.plist</code>. Use this key to define a string that describes how your app will use this data. By adding this key to your <code>Info.plist</code>, you will be able to request write-only access permission from the user. If you try to save to the camera roll without this permission, your app will exit.</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/cameraroll#savetocameraroll"><code>saveToCameraRoll</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/cameraroll#getphotos"><code>getPhotos</code></a></li>
|
||||
<li><a href="/react-native/docs/cameraroll#savetocameraroll"><code>saveToCameraRoll</code></a></li>
|
||||
<li><a href="/react-native/docs/cameraroll#getphotos"><code>getPhotos</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
+6
-6
@@ -11,14 +11,14 @@
|
||||
<p>@keyword checkbox @keyword toggle</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/view#props">View props...</a></li>
|
||||
<li><a href="/react-native/docs/view#props">View props...</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/checkbox#disabled"><code>disabled</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/checkbox#onchange"><code>onChange</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/checkbox#onvaluechange"><code>onValueChange</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/checkbox#testid"><code>testID</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/checkbox#value"><code>value</code></a></li>
|
||||
<li><a href="/react-native/docs/checkbox#disabled"><code>disabled</code></a></li>
|
||||
<li><a href="/react-native/docs/checkbox#onchange"><code>onChange</code></a></li>
|
||||
<li><a href="/react-native/docs/checkbox#onvaluechange"><code>onValueChange</code></a></li>
|
||||
<li><a href="/react-native/docs/checkbox#testid"><code>testID</code></a></li>
|
||||
<li><a href="/react-native/docs/checkbox#value"><code>value</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -11,14 +11,14 @@
|
||||
<p>@keyword checkbox @keyword toggle</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/view#props">View props...</a></li>
|
||||
<li><a href="/react-native/docs/view#props">View props...</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/checkbox#disabled"><code>disabled</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/checkbox#onchange"><code>onChange</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/checkbox#onvaluechange"><code>onValueChange</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/checkbox#testid"><code>testID</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/checkbox#value"><code>value</code></a></li>
|
||||
<li><a href="/react-native/docs/checkbox#disabled"><code>disabled</code></a></li>
|
||||
<li><a href="/react-native/docs/checkbox#onchange"><code>onChange</code></a></li>
|
||||
<li><a href="/react-native/docs/checkbox#onvaluechange"><code>onValueChange</code></a></li>
|
||||
<li><a href="/react-native/docs/checkbox#testid"><code>testID</code></a></li>
|
||||
<li><a href="/react-native/docs/checkbox#value"><code>value</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
+2
-2
@@ -32,8 +32,8 @@
|
||||
</script></nav></div><div class="container mainContainer"><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/clipboard.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Clipboard</h1></header><article><div><span><p><code>Clipboard</code> gives you an interface for setting and getting content from Clipboard on both iOS and Android</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/clipboard#getstring"><code>getString</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/clipboard#setstring"><code>setString</code></a></li>
|
||||
<li><a href="/react-native/docs/clipboard#getstring"><code>getString</code></a></li>
|
||||
<li><a href="/react-native/docs/clipboard#setstring"><code>setString</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -32,8 +32,8 @@
|
||||
</script></nav></div><div class="container mainContainer"><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/clipboard.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Clipboard</h1></header><article><div><span><p><code>Clipboard</code> gives you an interface for setting and getting content from Clipboard on both iOS and Android</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/clipboard#getstring"><code>getString</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/clipboard#setstring"><code>setString</code></a></li>
|
||||
<li><a href="/react-native/docs/clipboard#getstring"><code>getString</code></a></li>
|
||||
<li><a href="/react-native/docs/clipboard#setstring"><code>setString</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
+2
-2
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Color Reference · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Components in React Native are [styled using JavaScript](/react-native/docs/0.56/style). Color properties usually match how [CSS works on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Color Reference · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Components in React Native are [styled using JavaScript](/react-native/docs/0.56/style). Color properties usually match how [CSS works on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Color Reference · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Components in React Native are [styled using JavaScript](/react-native/docs/style). Color properties usually match how [CSS works on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Color Reference · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Components in React Native are [styled using JavaScript](/react-native/docs/style). Color properties usually match how [CSS works on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -29,7 +29,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/colors.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Color Reference</h1></header><article><div><span><p>Components in React Native are <a href="/react-native/docs/0.56/style">styled using JavaScript</a>. Color properties usually match how <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">CSS works on the web</a>.</p>
|
||||
</script></nav></div><div class="container mainContainer"><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/colors.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Color Reference</h1></header><article><div><span><p>Components in React Native are <a href="/react-native/docs/style">styled using JavaScript</a>. Color properties usually match how <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">CSS works on the web</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="red-green-blue"></a><a href="#red-green-blue" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Red-green-blue</h3>
|
||||
<p>React Native supports <code>rgb()</code> and <code>rgba()</code> in both hexadecimal and functional notation:</p>
|
||||
<ul>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Color Reference · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Components in React Native are [styled using JavaScript](/react-native/docs/0.56/style). Color properties usually match how [CSS works on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Color Reference · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Components in React Native are [styled using JavaScript](/react-native/docs/0.56/style). Color properties usually match how [CSS works on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Color Reference · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Components in React Native are [styled using JavaScript](/react-native/docs/style). Color properties usually match how [CSS works on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Color Reference · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Components in React Native are [styled using JavaScript](/react-native/docs/style). Color properties usually match how [CSS works on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -29,7 +29,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/colors.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Color Reference</h1></header><article><div><span><p>Components in React Native are <a href="/react-native/docs/0.56/style">styled using JavaScript</a>. Color properties usually match how <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">CSS works on the web</a>.</p>
|
||||
</script></nav></div><div class="container mainContainer"><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/colors.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Color Reference</h1></header><article><div><span><p>Components in React Native are <a href="/react-native/docs/style">styled using JavaScript</a>. Color properties usually match how <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">CSS works on the web</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="red-green-blue"></a><a href="#red-green-blue" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Red-green-blue</h3>
|
||||
<p>React Native supports <code>rgb()</code> and <code>rgba()</code> in both hexadecimal and functional notation:</p>
|
||||
<ul>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Communication between native and React Native · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="In [Integrating with Existing Apps guide](/react-native/docs/0.56/integration-with-existing-apps) and [Native UI Components guide](/react-native/docs/0.56/native-components-android) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Communication between native and React Native · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="In [Integrating with Existing Apps guide](/react-native/docs/0.56/integration-with-existing-apps) and [Native UI Components guide](/react-native/docs/0.56/native-components-android) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Communication between native and React Native · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="In [Integrating with Existing Apps guide](/react-native/docs/integration-with-existing-apps) and [Native UI Components guide](/react-native/docs/native-components-android) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Communication between native and React Native · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="In [Integrating with Existing Apps guide](/react-native/docs/integration-with-existing-apps) and [Native UI Components guide](/react-native/docs/native-components-android) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
ga('create', 'UA-41298772-2', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.56</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/en/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li class=""><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><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/communication-android.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Communication between native and React Native</h1></header><article><div><span><p>In <a href="/react-native/docs/0.56/integration-with-existing-apps">Integrating with Existing Apps guide</a> and <a href="/react-native/docs/0.56/native-components-android">Native UI Components guide</a> we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.</p>
|
||||
</script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.56</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/en/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li class=""><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><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/communication-android.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Communication between native and React Native</h1></header><article><div><span><p>In <a href="/react-native/docs/integration-with-existing-apps">Integrating with Existing Apps guide</a> and <a href="/react-native/docs/native-components-android">Native UI Components guide</a> we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="introduction"></a><a href="#introduction" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Introduction</h2>
|
||||
<p>React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.</p>
|
||||
<p>The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.</p>
|
||||
@@ -72,15 +72,15 @@ mReactRootView.setAppProperties(updatedProps)<span class="hljs-comment">;</span>
|
||||
<p><strong><em>Note:</em></strong> Currently, JS functions <code>componentWillReceiveProps</code> and <code>componentWillUpdateProps</code> of the top level RN component will not be called after a prop update. However, you can access the new props in <code>componentWillMount</code> function.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="passing-properties-from-react-native-to-native"></a><a href="#passing-properties-from-react-native-to-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>Passing properties from React Native to native</h3>
|
||||
<p>The problem exposing properties of native components is covered in detail in <a href="/react-native/docs/0.56/native-components-android#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation">this article</a>. In short, properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with <code>@ReactProp</code>, then just use them in React Native as if the component was an ordinary React Native component.</p>
|
||||
<p>The problem exposing properties of native components is covered in detail in <a href="/react-native/docs/native-components-android#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation">this article</a>. In short, properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with <code>@ReactProp</code>, then just use them in React Native as if the component was an ordinary React Native component.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="limits-of-properties"></a><a href="#limits-of-properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Limits of properties</h3>
|
||||
<p>The main drawback of cross-language properties is that they do not support callbacks, which would allow us to handle bottom-up data bindings. Imagine you have a small RN view that you want to be removed from the native parent view as a result of a JS action. There is no way to do that with props, as the information would need to go bottom-up.</p>
|
||||
<p>Although we have a flavor of cross-language callbacks (<a href="/react-native/docs/0.56/native-modules-android#callbacks">described here</a>), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.</p>
|
||||
<p>Although we have a flavor of cross-language callbacks (<a href="/react-native/docs/native-modules-android#callbacks">described here</a>), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="other-ways-of-cross-language-interaction-events-and-native-modules"></a><a href="#other-ways-of-cross-language-interaction-events-and-native-modules" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Other ways of cross-language interaction (events and native modules)</h2>
|
||||
<p>As stated in the previous chapter, using properties comes with some limitations. Sometimes properties are not enough to drive the logic of our app and we need a solution that gives more flexibility. This chapter covers other communication techniques available in React Native. They can be used for internal communication (between JS and native layers in RN) as well as for external communication (between RN and the 'pure native' part of your app).</p>
|
||||
<p>React Native enables you to perform cross-language function calls. You can execute custom native code from JS and vice versa. Unfortunately, depending on the side we are working on, we achieve the same goal in different ways. For native - we use events mechanism to schedule an execution of a handler function in JS, while for React Native we directly call methods exported by native modules.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="calling-react-native-functions-from-native-events"></a><a href="#calling-react-native-functions-from-native-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>Calling React Native functions from native (events)</h3>
|
||||
<p>Events are described in detail in <a href="/react-native/docs/0.56/native-components-android#events">this article</a>. Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread.</p>
|
||||
<p>Events are described in detail in <a href="/react-native/docs/native-components-android#events">this article</a>. Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread.</p>
|
||||
<p>Events are powerful, because they allow us to change React Native components without needing a reference to them. However, there are some pitfalls that you can fall into while using them:</p>
|
||||
<ul>
|
||||
<li>As events can be sent from anywhere, they can introduce spaghetti-style dependencies into your project.</li>
|
||||
@@ -88,7 +88,7 @@ mReactRootView.setAppProperties(updatedProps)<span class="hljs-comment">;</span>
|
||||
<li>If you use several instances of the same React Native component and you want to distinguish them from the perspective of your event, you'll likely need to introduce identifiers and pass them along with events (you can use the native view's <code>reactTag</code> as an identifier).</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="calling-native-functions-from-react-native-native-modules"></a><a href="#calling-native-functions-from-react-native-native-modules" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Calling native functions from React Native (native modules)</h3>
|
||||
<p>Native modules are Java classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in <a href="/react-native/docs/0.56/native-modules-android">this article</a>.</p>
|
||||
<p>Native modules are Java classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in <a href="/react-native/docs/native-modules-android">this article</a>.</p>
|
||||
<blockquote>
|
||||
<p><strong><em>Warning</em></strong>: All native modules share the same namespace. Watch out for name collisions when creating new ones.</p>
|
||||
</blockquote>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Communication between native and React Native · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="In [Integrating with Existing Apps guide](/react-native/docs/0.56/integration-with-existing-apps) and [Native UI Components guide](/react-native/docs/0.56/native-components-android) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Communication between native and React Native · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="In [Integrating with Existing Apps guide](/react-native/docs/0.56/integration-with-existing-apps) and [Native UI Components guide](/react-native/docs/0.56/native-components-android) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Communication between native and React Native · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="In [Integrating with Existing Apps guide](/react-native/docs/integration-with-existing-apps) and [Native UI Components guide](/react-native/docs/native-components-android) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Communication between native and React Native · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="In [Integrating with Existing Apps guide](/react-native/docs/integration-with-existing-apps) and [Native UI Components guide](/react-native/docs/native-components-android) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
ga('create', 'UA-41298772-2', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.56</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/en/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li class=""><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><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/communication-android.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Communication between native and React Native</h1></header><article><div><span><p>In <a href="/react-native/docs/0.56/integration-with-existing-apps">Integrating with Existing Apps guide</a> and <a href="/react-native/docs/0.56/native-components-android">Native UI Components guide</a> we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.</p>
|
||||
</script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.56</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/en/help" target="_self">Community</a></li><li class=""><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li class=""><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><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/communication-android.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Communication between native and React Native</h1></header><article><div><span><p>In <a href="/react-native/docs/integration-with-existing-apps">Integrating with Existing Apps guide</a> and <a href="/react-native/docs/native-components-android">Native UI Components guide</a> we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="introduction"></a><a href="#introduction" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Introduction</h2>
|
||||
<p>React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.</p>
|
||||
<p>The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.</p>
|
||||
@@ -72,15 +72,15 @@ mReactRootView.setAppProperties(updatedProps)<span class="hljs-comment">;</span>
|
||||
<p><strong><em>Note:</em></strong> Currently, JS functions <code>componentWillReceiveProps</code> and <code>componentWillUpdateProps</code> of the top level RN component will not be called after a prop update. However, you can access the new props in <code>componentWillMount</code> function.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="passing-properties-from-react-native-to-native"></a><a href="#passing-properties-from-react-native-to-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>Passing properties from React Native to native</h3>
|
||||
<p>The problem exposing properties of native components is covered in detail in <a href="/react-native/docs/0.56/native-components-android#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation">this article</a>. In short, properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with <code>@ReactProp</code>, then just use them in React Native as if the component was an ordinary React Native component.</p>
|
||||
<p>The problem exposing properties of native components is covered in detail in <a href="/react-native/docs/native-components-android#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation">this article</a>. In short, properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with <code>@ReactProp</code>, then just use them in React Native as if the component was an ordinary React Native component.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="limits-of-properties"></a><a href="#limits-of-properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Limits of properties</h3>
|
||||
<p>The main drawback of cross-language properties is that they do not support callbacks, which would allow us to handle bottom-up data bindings. Imagine you have a small RN view that you want to be removed from the native parent view as a result of a JS action. There is no way to do that with props, as the information would need to go bottom-up.</p>
|
||||
<p>Although we have a flavor of cross-language callbacks (<a href="/react-native/docs/0.56/native-modules-android#callbacks">described here</a>), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.</p>
|
||||
<p>Although we have a flavor of cross-language callbacks (<a href="/react-native/docs/native-modules-android#callbacks">described here</a>), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="other-ways-of-cross-language-interaction-events-and-native-modules"></a><a href="#other-ways-of-cross-language-interaction-events-and-native-modules" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Other ways of cross-language interaction (events and native modules)</h2>
|
||||
<p>As stated in the previous chapter, using properties comes with some limitations. Sometimes properties are not enough to drive the logic of our app and we need a solution that gives more flexibility. This chapter covers other communication techniques available in React Native. They can be used for internal communication (between JS and native layers in RN) as well as for external communication (between RN and the 'pure native' part of your app).</p>
|
||||
<p>React Native enables you to perform cross-language function calls. You can execute custom native code from JS and vice versa. Unfortunately, depending on the side we are working on, we achieve the same goal in different ways. For native - we use events mechanism to schedule an execution of a handler function in JS, while for React Native we directly call methods exported by native modules.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="calling-react-native-functions-from-native-events"></a><a href="#calling-react-native-functions-from-native-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>Calling React Native functions from native (events)</h3>
|
||||
<p>Events are described in detail in <a href="/react-native/docs/0.56/native-components-android#events">this article</a>. Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread.</p>
|
||||
<p>Events are described in detail in <a href="/react-native/docs/native-components-android#events">this article</a>. Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread.</p>
|
||||
<p>Events are powerful, because they allow us to change React Native components without needing a reference to them. However, there are some pitfalls that you can fall into while using them:</p>
|
||||
<ul>
|
||||
<li>As events can be sent from anywhere, they can introduce spaghetti-style dependencies into your project.</li>
|
||||
@@ -88,7 +88,7 @@ mReactRootView.setAppProperties(updatedProps)<span class="hljs-comment">;</span>
|
||||
<li>If you use several instances of the same React Native component and you want to distinguish them from the perspective of your event, you'll likely need to introduce identifiers and pass them along with events (you can use the native view's <code>reactTag</code> as an identifier).</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="calling-native-functions-from-react-native-native-modules"></a><a href="#calling-native-functions-from-react-native-native-modules" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Calling native functions from React Native (native modules)</h3>
|
||||
<p>Native modules are Java classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in <a href="/react-native/docs/0.56/native-modules-android">this article</a>.</p>
|
||||
<p>Native modules are Java classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in <a href="/react-native/docs/native-modules-android">this article</a>.</p>
|
||||
<blockquote>
|
||||
<p><strong><em>Warning</em></strong>: All native modules share the same namespace. Watch out for name collisions when creating new ones.</p>
|
||||
</blockquote>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Communication between native and React Native · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="In [Integrating with Existing Apps guide](/react-native/docs/0.56/integration-with-existing-apps) and [Native UI Components guide](/react-native/docs/0.56/native-components-ios) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Communication between native and React Native · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="In [Integrating with Existing Apps guide](/react-native/docs/0.56/integration-with-existing-apps) and [Native UI Components guide](/react-native/docs/0.56/native-components-ios) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Communication between native and React Native · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="In [Integrating with Existing Apps guide](/react-native/docs/integration-with-existing-apps) and [Native UI Components guide](/react-native/docs/native-components-ios) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Communication between native and React Native · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="In [Integrating with Existing Apps guide](/react-native/docs/integration-with-existing-apps) and [Native UI Components guide](/react-native/docs/native-components-ios) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -29,7 +29,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/communication-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Communication between native and React Native</h1></header><article><div><span><p>In <a href="/react-native/docs/0.56/integration-with-existing-apps">Integrating with Existing Apps guide</a> and <a href="/react-native/docs/0.56/native-components-ios">Native UI Components guide</a> we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.</p>
|
||||
</script></nav></div><div class="container mainContainer"><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/communication-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Communication between native and React Native</h1></header><article><div><span><p>In <a href="/react-native/docs/integration-with-existing-apps">Integrating with Existing Apps guide</a> and <a href="/react-native/docs/native-components-ios">Native UI Components guide</a> we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="introduction"></a><a href="#introduction" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Introduction</h2>
|
||||
<p>React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.</p>
|
||||
<p>The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.</p>
|
||||
@@ -83,15 +83,15 @@ rootView.appProperties = <span class="hljs-meta">@{</span><span class="hljs-meta
|
||||
<p><strong><em>Note:</em></strong> Currently, JS functions <code>componentWillReceiveProps</code> and <code>componentWillUpdateProps</code> of the top level RN component will not be called after a prop update. However, you can access the new props in <code>componentWillMount</code> function.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="passing-properties-from-react-native-to-native"></a><a href="#passing-properties-from-react-native-to-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>Passing properties from React Native to native</h3>
|
||||
<p>The problem exposing properties of native components is covered in detail in <a href="/react-native/docs/0.56/native-components-ios#properties">this article</a>. In short, export properties with <code>RCT_CUSTOM_VIEW_PROPERTY</code> macro in your custom native component, then just use them in React Native as if the component was an ordinary React Native component.</p>
|
||||
<p>The problem exposing properties of native components is covered in detail in <a href="/react-native/docs/native-components-ios#properties">this article</a>. In short, export properties with <code>RCT_CUSTOM_VIEW_PROPERTY</code> macro in your custom native component, then just use them in React Native as if the component was an ordinary React Native component.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="limits-of-properties"></a><a href="#limits-of-properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Limits of properties</h3>
|
||||
<p>The main drawback of cross-language properties is that they do not support callbacks, which would allow us to handle bottom-up data bindings. Imagine you have a small RN view that you want to be removed from the native parent view as a result of a JS action. There is no way to do that with props, as the information would need to go bottom-up.</p>
|
||||
<p>Although we have a flavor of cross-language callbacks (<a href="/react-native/docs/0.56/native-modules-ios#callbacks">described here</a>), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.</p>
|
||||
<p>Although we have a flavor of cross-language callbacks (<a href="/react-native/docs/native-modules-ios#callbacks">described here</a>), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="other-ways-of-cross-language-interaction-events-and-native-modules"></a><a href="#other-ways-of-cross-language-interaction-events-and-native-modules" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Other ways of cross-language interaction (events and native modules)</h2>
|
||||
<p>As stated in the previous chapter, using properties comes with some limitations. Sometimes properties are not enough to drive the logic of our app and we need a solution that gives more flexibility. This chapter covers other communication techniques available in React Native. They can be used for internal communication (between JS and native layers in RN) as well as for external communication (between RN and the 'pure native' part of your app).</p>
|
||||
<p>React Native enables you to perform cross-language function calls. You can execute custom native code from JS and vice versa. Unfortunately, depending on the side we are working on, we achieve the same goal in different ways. For native - we use events mechanism to schedule an execution of a handler function in JS, while for React Native we directly call methods exported by native modules.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="calling-react-native-functions-from-native-events"></a><a href="#calling-react-native-functions-from-native-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>Calling React Native functions from native (events)</h3>
|
||||
<p>Events are described in detail in <a href="/react-native/docs/0.56/native-components-ios#events">this article</a>. Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread.</p>
|
||||
<p>Events are described in detail in <a href="/react-native/docs/native-components-ios#events">this article</a>. Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread.</p>
|
||||
<p>Events are powerful, because they allow us to change React Native components without needing a reference to them. However, there are some pitfalls that you can fall into while using them:</p>
|
||||
<ul>
|
||||
<li>As events can be sent from anywhere, they can introduce spaghetti-style dependencies into your project.</li>
|
||||
@@ -100,7 +100,7 @@ rootView.appProperties = <span class="hljs-meta">@{</span><span class="hljs-meta
|
||||
</ul>
|
||||
<p>The common pattern we use when embedding native in React Native is to make the native component's RCTViewManager a delegate for the views, sending events back to JavaScript via the bridge. This keeps related event calls in one place.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="calling-native-functions-from-react-native-native-modules"></a><a href="#calling-native-functions-from-react-native-native-modules" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Calling native functions from React Native (native modules)</h3>
|
||||
<p>Native modules are Objective-C classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in <a href="/react-native/docs/0.56/native-modules-ios#content">this article</a>.</p>
|
||||
<p>Native modules are Objective-C classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in <a href="/react-native/docs/native-modules-ios#content">this article</a>.</p>
|
||||
<p>The fact that native modules are singletons limits the mechanism in the context of embedding. Let's say we have a React Native component embedded in a native view and we want to update the native, parent view. Using the native module mechanism, we would export a function that not only takes expected arguments, but also an identifier of the parent native view. The identifier would be used to retrieve a reference to the parent view to update. That said, we would need to keep a mapping from identifiers to native views in the module.</p>
|
||||
<p>Although this solution is complex, it is used in <code>RCTUIManager</code>, which is an internal React Native class that manages all React Native views.</p>
|
||||
<p>Native modules can also be used to expose existing native libraries to JS. The <a href="https://github.com/facebook/react-native/tree/master/Libraries/Geolocation">Geolocation library</a> is a living example of the idea.</p>
|
||||
@@ -110,7 +110,7 @@ rootView.appProperties = <span class="hljs-meta">@{</span><span class="hljs-meta
|
||||
<h2><a class="anchor" aria-hidden="true" id="layout-computation-flow"></a><a href="#layout-computation-flow" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Layout computation flow</h2>
|
||||
<p>When integrating native and React Native, we also need a way to consolidate two different layout systems. This section covers common layout problems and provides a brief description of mechanisms to address them.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="layout-of-a-native-component-embedded-in-react-native"></a><a href="#layout-of-a-native-component-embedded-in-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>Layout of a native component embedded in React Native</h3>
|
||||
<p>This case is covered in <a href="/react-native/docs/0.56/native-components-ios#styles">this article</a>. Basically, as all our native react views are subclasses of <code>UIView</code>, most style and size attributes will work like you would expect out of the box.</p>
|
||||
<p>This case is covered in <a href="/react-native/docs/native-components-ios#styles">this article</a>. Basically, as all our native react views are subclasses of <code>UIView</code>, most style and size attributes will work like you would expect out of the box.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="layout-of-a-react-native-component-embedded-in-native"></a><a href="#layout-of-a-react-native-component-embedded-in-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>Layout of a React Native component embedded in native</h3>
|
||||
<h4><a class="anchor" aria-hidden="true" id="react-native-content-with-fixed-size"></a><a href="#react-native-content-with-fixed-size" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native content with fixed size</h4>
|
||||
<p>The simplest scenario is when we have a React Native app with a fixed size, which is known to the native side. In particular, a full-screen React Native view falls into this case. If we want a smaller root view, we can explicitly set RCTRootView's frame.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Communication between native and React Native · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="In [Integrating with Existing Apps guide](/react-native/docs/0.56/integration-with-existing-apps) and [Native UI Components guide](/react-native/docs/0.56/native-components-ios) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Communication between native and React Native · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="In [Integrating with Existing Apps guide](/react-native/docs/0.56/integration-with-existing-apps) and [Native UI Components guide](/react-native/docs/0.56/native-components-ios) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Communication between native and React Native · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="In [Integrating with Existing Apps guide](/react-native/docs/integration-with-existing-apps) and [Native UI Components guide](/react-native/docs/native-components-ios) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Communication between native and React Native · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="In [Integrating with Existing Apps guide](/react-native/docs/integration-with-existing-apps) and [Native UI Components guide](/react-native/docs/native-components-ios) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -29,7 +29,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/communication-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Communication between native and React Native</h1></header><article><div><span><p>In <a href="/react-native/docs/0.56/integration-with-existing-apps">Integrating with Existing Apps guide</a> and <a href="/react-native/docs/0.56/native-components-ios">Native UI Components guide</a> we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.</p>
|
||||
</script></nav></div><div class="container mainContainer"><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/communication-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Communication between native and React Native</h1></header><article><div><span><p>In <a href="/react-native/docs/integration-with-existing-apps">Integrating with Existing Apps guide</a> and <a href="/react-native/docs/native-components-ios">Native UI Components guide</a> we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="introduction"></a><a href="#introduction" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Introduction</h2>
|
||||
<p>React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.</p>
|
||||
<p>The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.</p>
|
||||
@@ -83,15 +83,15 @@ rootView.appProperties = <span class="hljs-meta">@{</span><span class="hljs-meta
|
||||
<p><strong><em>Note:</em></strong> Currently, JS functions <code>componentWillReceiveProps</code> and <code>componentWillUpdateProps</code> of the top level RN component will not be called after a prop update. However, you can access the new props in <code>componentWillMount</code> function.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="passing-properties-from-react-native-to-native"></a><a href="#passing-properties-from-react-native-to-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>Passing properties from React Native to native</h3>
|
||||
<p>The problem exposing properties of native components is covered in detail in <a href="/react-native/docs/0.56/native-components-ios#properties">this article</a>. In short, export properties with <code>RCT_CUSTOM_VIEW_PROPERTY</code> macro in your custom native component, then just use them in React Native as if the component was an ordinary React Native component.</p>
|
||||
<p>The problem exposing properties of native components is covered in detail in <a href="/react-native/docs/native-components-ios#properties">this article</a>. In short, export properties with <code>RCT_CUSTOM_VIEW_PROPERTY</code> macro in your custom native component, then just use them in React Native as if the component was an ordinary React Native component.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="limits-of-properties"></a><a href="#limits-of-properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Limits of properties</h3>
|
||||
<p>The main drawback of cross-language properties is that they do not support callbacks, which would allow us to handle bottom-up data bindings. Imagine you have a small RN view that you want to be removed from the native parent view as a result of a JS action. There is no way to do that with props, as the information would need to go bottom-up.</p>
|
||||
<p>Although we have a flavor of cross-language callbacks (<a href="/react-native/docs/0.56/native-modules-ios#callbacks">described here</a>), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.</p>
|
||||
<p>Although we have a flavor of cross-language callbacks (<a href="/react-native/docs/native-modules-ios#callbacks">described here</a>), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="other-ways-of-cross-language-interaction-events-and-native-modules"></a><a href="#other-ways-of-cross-language-interaction-events-and-native-modules" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Other ways of cross-language interaction (events and native modules)</h2>
|
||||
<p>As stated in the previous chapter, using properties comes with some limitations. Sometimes properties are not enough to drive the logic of our app and we need a solution that gives more flexibility. This chapter covers other communication techniques available in React Native. They can be used for internal communication (between JS and native layers in RN) as well as for external communication (between RN and the 'pure native' part of your app).</p>
|
||||
<p>React Native enables you to perform cross-language function calls. You can execute custom native code from JS and vice versa. Unfortunately, depending on the side we are working on, we achieve the same goal in different ways. For native - we use events mechanism to schedule an execution of a handler function in JS, while for React Native we directly call methods exported by native modules.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="calling-react-native-functions-from-native-events"></a><a href="#calling-react-native-functions-from-native-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>Calling React Native functions from native (events)</h3>
|
||||
<p>Events are described in detail in <a href="/react-native/docs/0.56/native-components-ios#events">this article</a>. Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread.</p>
|
||||
<p>Events are described in detail in <a href="/react-native/docs/native-components-ios#events">this article</a>. Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread.</p>
|
||||
<p>Events are powerful, because they allow us to change React Native components without needing a reference to them. However, there are some pitfalls that you can fall into while using them:</p>
|
||||
<ul>
|
||||
<li>As events can be sent from anywhere, they can introduce spaghetti-style dependencies into your project.</li>
|
||||
@@ -100,7 +100,7 @@ rootView.appProperties = <span class="hljs-meta">@{</span><span class="hljs-meta
|
||||
</ul>
|
||||
<p>The common pattern we use when embedding native in React Native is to make the native component's RCTViewManager a delegate for the views, sending events back to JavaScript via the bridge. This keeps related event calls in one place.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="calling-native-functions-from-react-native-native-modules"></a><a href="#calling-native-functions-from-react-native-native-modules" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Calling native functions from React Native (native modules)</h3>
|
||||
<p>Native modules are Objective-C classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in <a href="/react-native/docs/0.56/native-modules-ios#content">this article</a>.</p>
|
||||
<p>Native modules are Objective-C classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in <a href="/react-native/docs/native-modules-ios#content">this article</a>.</p>
|
||||
<p>The fact that native modules are singletons limits the mechanism in the context of embedding. Let's say we have a React Native component embedded in a native view and we want to update the native, parent view. Using the native module mechanism, we would export a function that not only takes expected arguments, but also an identifier of the parent native view. The identifier would be used to retrieve a reference to the parent view to update. That said, we would need to keep a mapping from identifiers to native views in the module.</p>
|
||||
<p>Although this solution is complex, it is used in <code>RCTUIManager</code>, which is an internal React Native class that manages all React Native views.</p>
|
||||
<p>Native modules can also be used to expose existing native libraries to JS. The <a href="https://github.com/facebook/react-native/tree/master/Libraries/Geolocation">Geolocation library</a> is a living example of the idea.</p>
|
||||
@@ -110,7 +110,7 @@ rootView.appProperties = <span class="hljs-meta">@{</span><span class="hljs-meta
|
||||
<h2><a class="anchor" aria-hidden="true" id="layout-computation-flow"></a><a href="#layout-computation-flow" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Layout computation flow</h2>
|
||||
<p>When integrating native and React Native, we also need a way to consolidate two different layout systems. This section covers common layout problems and provides a brief description of mechanisms to address them.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="layout-of-a-native-component-embedded-in-react-native"></a><a href="#layout-of-a-native-component-embedded-in-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>Layout of a native component embedded in React Native</h3>
|
||||
<p>This case is covered in <a href="/react-native/docs/0.56/native-components-ios#styles">this article</a>. Basically, as all our native react views are subclasses of <code>UIView</code>, most style and size attributes will work like you would expect out of the box.</p>
|
||||
<p>This case is covered in <a href="/react-native/docs/native-components-ios#styles">this article</a>. Basically, as all our native react views are subclasses of <code>UIView</code>, most style and size attributes will work like you would expect out of the box.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="layout-of-a-react-native-component-embedded-in-native"></a><a href="#layout-of-a-react-native-component-embedded-in-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>Layout of a React Native component embedded in native</h3>
|
||||
<h4><a class="anchor" aria-hidden="true" id="react-native-content-with-fixed-size"></a><a href="#react-native-content-with-fixed-size" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native content with fixed size</h4>
|
||||
<p>The simplest scenario is when we have a React Native app with a fixed size, which is known to the native side. In particular, a full-screen React Native view falls into this case. If we want a smaller root view, we can explicitly set RCTRootView's frame.</p>
|
||||
|
||||
@@ -31,12 +31,12 @@
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/components-and-apis.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Components and APIs</h1></header><article><div><span><p>React Native provides a number of built-in components. You will find a full list of components and APIs on the sidebar to the left. If you're not sure where to get started, take a look at the following categories:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/components-and-apis#basic-components">Basic Components</a></li>
|
||||
<li><a href="/react-native/docs/0.56/components-and-apis#user-interface">User Interface</a></li>
|
||||
<li><a href="/react-native/docs/0.56/components-and-apis#list-views">List Views</a></li>
|
||||
<li><a href="/react-native/docs/0.56/components-and-apis#ios-components-and-apis">iOS-specific</a></li>
|
||||
<li><a href="/react-native/docs/0.56/components-and-apis#android-components-and-apis">Android-specific</a></li>
|
||||
<li><a href="/react-native/docs/0.56/components-and-apis#others">Others</a></li>
|
||||
<li><a href="/react-native/docs/components-and-apis#basic-components">Basic Components</a></li>
|
||||
<li><a href="/react-native/docs/components-and-apis#user-interface">User Interface</a></li>
|
||||
<li><a href="/react-native/docs/components-and-apis#list-views">List Views</a></li>
|
||||
<li><a href="/react-native/docs/components-and-apis#ios-components-and-apis">iOS-specific</a></li>
|
||||
<li><a href="/react-native/docs/components-and-apis#android-components-and-apis">Android-specific</a></li>
|
||||
<li><a href="/react-native/docs/components-and-apis#others">Others</a></li>
|
||||
</ul>
|
||||
<p>You're not limited to the components and APIs bundled with React Native. React Native is a community of thousands of developers. If you're looking for a library that does something specific, search the npm registry for packages mentioning <a href="https://www.npmjs.com/search?q=react-native&page=1&ranking=optimal">react-native</a>, or check out <a href="http://www.awesome-react-native.com/">Awesome React Native</a> for a curated list.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="basic-components"></a><a href="#basic-components" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 Components</h2>
|
||||
|
||||
@@ -31,12 +31,12 @@
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/components-and-apis.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Components and APIs</h1></header><article><div><span><p>React Native provides a number of built-in components. You will find a full list of components and APIs on the sidebar to the left. If you're not sure where to get started, take a look at the following categories:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/components-and-apis#basic-components">Basic Components</a></li>
|
||||
<li><a href="/react-native/docs/0.56/components-and-apis#user-interface">User Interface</a></li>
|
||||
<li><a href="/react-native/docs/0.56/components-and-apis#list-views">List Views</a></li>
|
||||
<li><a href="/react-native/docs/0.56/components-and-apis#ios-components-and-apis">iOS-specific</a></li>
|
||||
<li><a href="/react-native/docs/0.56/components-and-apis#android-components-and-apis">Android-specific</a></li>
|
||||
<li><a href="/react-native/docs/0.56/components-and-apis#others">Others</a></li>
|
||||
<li><a href="/react-native/docs/components-and-apis#basic-components">Basic Components</a></li>
|
||||
<li><a href="/react-native/docs/components-and-apis#user-interface">User Interface</a></li>
|
||||
<li><a href="/react-native/docs/components-and-apis#list-views">List Views</a></li>
|
||||
<li><a href="/react-native/docs/components-and-apis#ios-components-and-apis">iOS-specific</a></li>
|
||||
<li><a href="/react-native/docs/components-and-apis#android-components-and-apis">Android-specific</a></li>
|
||||
<li><a href="/react-native/docs/components-and-apis#others">Others</a></li>
|
||||
</ul>
|
||||
<p>You're not limited to the components and APIs bundled with React Native. React Native is a community of thousands of developers. If you're looking for a library that does something specific, search the npm registry for packages mentioning <a href="https://www.npmjs.com/search?q=react-native&page=1&ranking=optimal">react-native</a>, or check out <a href="http://www.awesome-react-native.com/">Awesome React Native</a> for a curated list.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="basic-components"></a><a href="#basic-components" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 Components</h2>
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<p>You'll need to follow the usual steps to <a href="/react-native/docs/0.56/native-modules-android#register-the-module">register the module</a>.</p>
|
||||
<p>You'll need to follow the usual steps to <a href="/react-native/docs/native-modules-android#register-the-module">register the module</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="adding-new-properties"></a><a href="#adding-new-properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Adding New Properties</h3>
|
||||
<p>To add a new property, you'll need to add it to <code>CustomWebView</code>, and then expose it in <code>CustomWebViewManager</code>.</p>
|
||||
<pre><code class="hljs css languages- java"><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CustomWebViewManager</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">ReactWebViewManager</span> </span>{
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<p>You'll need to follow the usual steps to <a href="/react-native/docs/0.56/native-modules-android#register-the-module">register the module</a>.</p>
|
||||
<p>You'll need to follow the usual steps to <a href="/react-native/docs/native-modules-android#register-the-module">register the module</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="adding-new-properties"></a><a href="#adding-new-properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Adding New Properties</h3>
|
||||
<p>To add a new property, you'll need to add it to <code>CustomWebView</code>, and then expose it in <code>CustomWebViewManager</code>.</p>
|
||||
<pre><code class="hljs css languages- java"><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CustomWebViewManager</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">ReactWebViewManager</span> </span>{
|
||||
|
||||
@@ -46,9 +46,9 @@
|
||||
</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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/datepickerandroid#open"><code>open</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/datepickerandroid#datesetaction"><code>dateSetAction</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/datepickerandroid#dismissedaction"><code>dismissedAction</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerandroid#open"><code>open</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerandroid#datesetaction"><code>dateSetAction</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerandroid#dismissedaction"><code>dismissedAction</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -46,9 +46,9 @@
|
||||
</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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/datepickerandroid#open"><code>open</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/datepickerandroid#datesetaction"><code>dateSetAction</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/datepickerandroid#dismissedaction"><code>dismissedAction</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerandroid#open"><code>open</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerandroid#datesetaction"><code>dateSetAction</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerandroid#dismissedaction"><code>dismissedAction</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
+10
-10
@@ -72,17 +72,17 @@ const styles = StyleSheet.create({
|
||||
<p><center><img src="/react-native/docs/assets/DatePickerIOS/example.gif" width="360"></img></center></p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/view#props">View props...</a></li>
|
||||
<li><a href="/react-native/docs/view#props">View props...</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/datepickerios#date"><code>date</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/datepickerios#ondatechange"><code>onDateChange</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/datepickerios#maximumdate"><code>maximumDate</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/datepickerios#minimumdate"><code>minimumDate</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/datepickerios#minuteinterval"><code>minuteInterval</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/datepickerios#mode"><code>mode</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/datepickerios#locale"><code>locale</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/datepickerios#timezoneoffsetinminutes"><code>timeZoneOffsetInMinutes</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerios#date"><code>date</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerios#ondatechange"><code>onDateChange</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerios#maximumdate"><code>maximumDate</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerios#minimumdate"><code>minimumDate</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerios#minuteinterval"><code>minuteInterval</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerios#mode"><code>mode</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerios#locale"><code>locale</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerios#timezoneoffsetinminutes"><code>timeZoneOffsetInMinutes</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -135,7 +135,7 @@ const styles = StyleSheet.create({
|
||||
<tr><td>Date</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>See <a href="/react-native/docs/0.56/datepickerios#maximumdate"><code>maximumDate</code></a> for an example image.</p>
|
||||
<p>See <a href="/react-native/docs/datepickerios#maximumdate"><code>maximumDate</code></a> for an example image.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="minuteinterval"></a><a href="#minuteinterval" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>minuteInterval</code></h3>
|
||||
<p>The interval at which minutes can be selected.</p>
|
||||
|
||||
@@ -72,17 +72,17 @@ const styles = StyleSheet.create({
|
||||
<p><center><img src="/react-native/docs/assets/DatePickerIOS/example.gif" width="360"></img></center></p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/view#props">View props...</a></li>
|
||||
<li><a href="/react-native/docs/view#props">View props...</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/datepickerios#date"><code>date</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/datepickerios#ondatechange"><code>onDateChange</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/datepickerios#maximumdate"><code>maximumDate</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/datepickerios#minimumdate"><code>minimumDate</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/datepickerios#minuteinterval"><code>minuteInterval</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/datepickerios#mode"><code>mode</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/datepickerios#locale"><code>locale</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/datepickerios#timezoneoffsetinminutes"><code>timeZoneOffsetInMinutes</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerios#date"><code>date</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerios#ondatechange"><code>onDateChange</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerios#maximumdate"><code>maximumDate</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerios#minimumdate"><code>minimumDate</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerios#minuteinterval"><code>minuteInterval</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerios#mode"><code>mode</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerios#locale"><code>locale</code></a></li>
|
||||
<li><a href="/react-native/docs/datepickerios#timezoneoffsetinminutes"><code>timeZoneOffsetInMinutes</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -135,7 +135,7 @@ const styles = StyleSheet.create({
|
||||
<tr><td>Date</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>See <a href="/react-native/docs/0.56/datepickerios#maximumdate"><code>maximumDate</code></a> for an example image.</p>
|
||||
<p>See <a href="/react-native/docs/datepickerios#maximumdate"><code>maximumDate</code></a> for an example image.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="minuteinterval"></a><a href="#minuteinterval" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>minuteInterval</code></h3>
|
||||
<p>The interval at which minutes can be selected.</p>
|
||||
|
||||
+1
-1
@@ -69,7 +69,7 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
|
||||
<p>To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu. This will open a new tab at <a href="http://localhost:8081/debugger-ui">http://localhost:8081/debugger-ui</a>.</p>
|
||||
<p>Select <code>Tools → Developer Tools</code> from the Chrome Menu to open the <a href="https://developer.chrome.com/devtools">Developer Tools</a>. You may also access the DevTools using keyboard shortcuts (<code>⌘⌥I</code> on macOS, <code>Ctrl</code> <code>Shift</code> <code>I</code> on Windows). You may also want to enable <a href="http://stackoverflow.com/questions/2233339/javascript-is-there-a-way-to-get-chrome-to-break-on-all-errors/17324511#17324511">Pause On Caught Exceptions</a> for a better debugging experience.</p>
|
||||
<blockquote>
|
||||
<p>Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read <a href="/react-native/docs/0.56/debugging#react-developer-tools">this section</a> to learn how.</p>
|
||||
<p>Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read <a href="/react-native/docs/debugging#react-developer-tools">this section</a> to learn how.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="debugging-using-a-custom-javascript-debugger"></a><a href="#debugging-using-a-custom-javascript-debugger" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging using a custom JavaScript debugger</h3>
|
||||
<p>To use a custom JavaScript debugger in place of Chrome Developer Tools, set the <code>REACT_DEBUGGER</code> environment variable to a command that will start your custom debugger. You can then select "Debug JS Remotely" from the Developer Menu to start debugging.</p>
|
||||
|
||||
@@ -69,7 +69,7 @@ YellowBox.ignoreWarnings([<span class="hljs-string">'Warning: ...'</span>]);
|
||||
<p>To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu. This will open a new tab at <a href="http://localhost:8081/debugger-ui">http://localhost:8081/debugger-ui</a>.</p>
|
||||
<p>Select <code>Tools → Developer Tools</code> from the Chrome Menu to open the <a href="https://developer.chrome.com/devtools">Developer Tools</a>. You may also access the DevTools using keyboard shortcuts (<code>⌘⌥I</code> on macOS, <code>Ctrl</code> <code>Shift</code> <code>I</code> on Windows). You may also want to enable <a href="http://stackoverflow.com/questions/2233339/javascript-is-there-a-way-to-get-chrome-to-break-on-all-errors/17324511#17324511">Pause On Caught Exceptions</a> for a better debugging experience.</p>
|
||||
<blockquote>
|
||||
<p>Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read <a href="/react-native/docs/0.56/debugging#react-developer-tools">this section</a> to learn how.</p>
|
||||
<p>Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read <a href="/react-native/docs/debugging#react-developer-tools">this section</a> to learn how.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="debugging-using-a-custom-javascript-debugger"></a><a href="#debugging-using-a-custom-javascript-debugger" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Debugging using a custom JavaScript debugger</h3>
|
||||
<p>To use a custom JavaScript debugger in place of Chrome Developer Tools, set the <code>REACT_DEBUGGER</code> environment variable to a command that will start your custom debugger. You can then select "Debug JS Remotely" from the Developer Menu to start debugging.</p>
|
||||
|
||||
@@ -31,10 +31,10 @@
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/dimensions.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Dimensions</h1></header><article><div><span><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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/dimensions#set"><code>set</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/dimensions#get"><code>get</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/dimensions#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/dimensions#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/dimensions#set"><code>set</code></a></li>
|
||||
<li><a href="/react-native/docs/dimensions#get"><code>get</code></a></li>
|
||||
<li><a href="/react-native/docs/dimensions#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/dimensions#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -31,10 +31,10 @@
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/dimensions.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Dimensions</h1></header><article><div><span><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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/dimensions#set"><code>set</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/dimensions#get"><code>get</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/dimensions#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/dimensions#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/dimensions#set"><code>set</code></a></li>
|
||||
<li><a href="/react-native/docs/dimensions#get"><code>get</code></a></li>
|
||||
<li><a href="/react-native/docs/dimensions#addeventlistener"><code>addEventListener</code></a></li>
|
||||
<li><a href="/react-native/docs/dimensions#removeeventlistener"><code>removeEventListener</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -153,7 +153,7 @@ render() {
|
||||
width: 880px;
|
||||
"
|
||||
></div></div></div><p>You can now use <code>MyButton</code> inside of <code>TouchableOpacity</code>! A sidenote for clarity: we used the <a href="https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element">ref callback</a> syntax here, rather than the traditional string-based ref.</p>
|
||||
<p>You may have noticed that we passed all of the props down to the child view using <code>{...this.props}</code>. The reason for this is that <code>TouchableOpacity</code> is actually a composite component, and so in addition to depending on <code>setNativeProps</code> on its child, it also requires that the child perform touch handling. To do this, it passes on <a href="/react-native/docs/0.56/view#onmoveshouldsetresponder">various props</a> that call back to the <code>TouchableOpacity</code> component. <code>TouchableHighlight</code>, in contrast, is backed by a native view and only requires that we implement <code>setNativeProps</code>.</p>
|
||||
<p>You may have noticed that we passed all of the props down to the child view using <code>{...this.props}</code>. The reason for this is that <code>TouchableOpacity</code> is actually a composite component, and so in addition to depending on <code>setNativeProps</code> on its child, it also requires that the child perform touch handling. To do this, it passes on <a href="/react-native/docs/view#onmoveshouldsetresponder">various props</a> that call back to the <code>TouchableOpacity</code> component. <code>TouchableHighlight</code>, in contrast, is backed by a native view and only requires that we implement <code>setNativeProps</code>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="setnativeprops-to-clear-textinput-value"></a><a href="#setnativeprops-to-clear-textinput-value" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>setNativeProps to clear TextInput value</h2>
|
||||
<p>Another very common use case of <code>setNativeProps</code> is to clear the value of a TextInput. The <code>controlled</code> prop of TextInput can sometimes drop characters when the <code>bufferDelay</code> is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use <code>setNativeProps</code> to directly manipulate the TextInput value when necessary. For example, the following code demonstrates clearing the input when you tap a button:</p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
@@ -209,7 +209,7 @@ render() {
|
||||
<li>pageX</li>
|
||||
<li>pageY</li>
|
||||
</ul>
|
||||
<p>Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible, consider using the <a href="/react-native/docs/0.56/view#onlayout"><code>onLayout</code> prop</a> instead.</p>
|
||||
<p>Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible, consider using the <a href="/react-native/docs/view#onlayout"><code>onLayout</code> prop</a> instead.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="measureinwindowcallback"></a><a href="#measureinwindowcallback" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>measureInWindow(callback)</h3>
|
||||
<p>Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:</p>
|
||||
<ul>
|
||||
|
||||
@@ -153,7 +153,7 @@ render() {
|
||||
width: 880px;
|
||||
"
|
||||
></div></div></div><p>You can now use <code>MyButton</code> inside of <code>TouchableOpacity</code>! A sidenote for clarity: we used the <a href="https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element">ref callback</a> syntax here, rather than the traditional string-based ref.</p>
|
||||
<p>You may have noticed that we passed all of the props down to the child view using <code>{...this.props}</code>. The reason for this is that <code>TouchableOpacity</code> is actually a composite component, and so in addition to depending on <code>setNativeProps</code> on its child, it also requires that the child perform touch handling. To do this, it passes on <a href="/react-native/docs/0.56/view#onmoveshouldsetresponder">various props</a> that call back to the <code>TouchableOpacity</code> component. <code>TouchableHighlight</code>, in contrast, is backed by a native view and only requires that we implement <code>setNativeProps</code>.</p>
|
||||
<p>You may have noticed that we passed all of the props down to the child view using <code>{...this.props}</code>. The reason for this is that <code>TouchableOpacity</code> is actually a composite component, and so in addition to depending on <code>setNativeProps</code> on its child, it also requires that the child perform touch handling. To do this, it passes on <a href="/react-native/docs/view#onmoveshouldsetresponder">various props</a> that call back to the <code>TouchableOpacity</code> component. <code>TouchableHighlight</code>, in contrast, is backed by a native view and only requires that we implement <code>setNativeProps</code>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="setnativeprops-to-clear-textinput-value"></a><a href="#setnativeprops-to-clear-textinput-value" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>setNativeProps to clear TextInput value</h2>
|
||||
<p>Another very common use case of <code>setNativeProps</code> is to clear the value of a TextInput. The <code>controlled</code> prop of TextInput can sometimes drop characters when the <code>bufferDelay</code> is low and the user types very quickly. Some developers prefer to skip this prop entirely and instead use <code>setNativeProps</code> to directly manipulate the TextInput value when necessary. For example, the following code demonstrates clearing the input when you tap a button:</p>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
@@ -209,7 +209,7 @@ render() {
|
||||
<li>pageX</li>
|
||||
<li>pageY</li>
|
||||
</ul>
|
||||
<p>Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible, consider using the <a href="/react-native/docs/0.56/view#onlayout"><code>onLayout</code> prop</a> instead.</p>
|
||||
<p>Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible, consider using the <a href="/react-native/docs/view#onlayout"><code>onLayout</code> prop</a> instead.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="measureinwindowcallback"></a><a href="#measureinwindowcallback" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>measureInWindow(callback)</h3>
|
||||
<p>Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:</p>
|
||||
<ul>
|
||||
|
||||
@@ -52,25 +52,25 @@
|
||||
</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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/view#props">View props...</a></li>
|
||||
<li><a href="/react-native/docs/view#props">View props...</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#rendernavigationview"><code>renderNavigationView</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#ondrawerclose"><code>onDrawerClose</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#drawerposition"><code>drawerPosition</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#drawerwidth"><code>drawerWidth</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#keyboarddismissmode"><code>keyboardDismissMode</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#drawerlockmode"><code>drawerLockMode</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#ondraweropen"><code>onDrawerOpen</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#ondrawerslide"><code>onDrawerSlide</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#ondrawerstatechanged"><code>onDrawerStateChanged</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#drawerbackgroundcolor"><code>drawerBackgroundColor</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#statusbarbackgroundcolor"><code>statusBarBackgroundColor</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#rendernavigationview"><code>renderNavigationView</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#ondrawerclose"><code>onDrawerClose</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#drawerposition"><code>drawerPosition</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#drawerwidth"><code>drawerWidth</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#keyboarddismissmode"><code>keyboardDismissMode</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#drawerlockmode"><code>drawerLockMode</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#ondraweropen"><code>onDrawerOpen</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#ondrawerslide"><code>onDrawerSlide</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#ondrawerstatechanged"><code>onDrawerStateChanged</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#drawerbackgroundcolor"><code>drawerBackgroundColor</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#statusbarbackgroundcolor"><code>statusBarBackgroundColor</code></a></li>
|
||||
</ul>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#opendrawer"><code>openDrawer</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#closedrawer"><code>closeDrawer</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#opendrawer"><code>openDrawer</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#closedrawer"><code>closeDrawer</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -200,7 +200,7 @@
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="/react-native/docs/0.56/colors">color</a></td><td>No</td></tr>
|
||||
<tr><td><a href="/react-native/docs/colors">color</a></td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -211,7 +211,7 @@
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="/react-native/docs/0.56/colors">color</a></td><td>No</td></tr>
|
||||
<tr><td><a href="/react-native/docs/colors">color</a></td><td>No</td></tr>
|
||||
</tbody>
|
||||
</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>
|
||||
|
||||
@@ -52,25 +52,25 @@
|
||||
</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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/view#props">View props...</a></li>
|
||||
<li><a href="/react-native/docs/view#props">View props...</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#rendernavigationview"><code>renderNavigationView</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#ondrawerclose"><code>onDrawerClose</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#drawerposition"><code>drawerPosition</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#drawerwidth"><code>drawerWidth</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#keyboarddismissmode"><code>keyboardDismissMode</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#drawerlockmode"><code>drawerLockMode</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#ondraweropen"><code>onDrawerOpen</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#ondrawerslide"><code>onDrawerSlide</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#ondrawerstatechanged"><code>onDrawerStateChanged</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#drawerbackgroundcolor"><code>drawerBackgroundColor</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#statusbarbackgroundcolor"><code>statusBarBackgroundColor</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#rendernavigationview"><code>renderNavigationView</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#ondrawerclose"><code>onDrawerClose</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#drawerposition"><code>drawerPosition</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#drawerwidth"><code>drawerWidth</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#keyboarddismissmode"><code>keyboardDismissMode</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#drawerlockmode"><code>drawerLockMode</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#ondraweropen"><code>onDrawerOpen</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#ondrawerslide"><code>onDrawerSlide</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#ondrawerstatechanged"><code>onDrawerStateChanged</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#drawerbackgroundcolor"><code>drawerBackgroundColor</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#statusbarbackgroundcolor"><code>statusBarBackgroundColor</code></a></li>
|
||||
</ul>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#opendrawer"><code>openDrawer</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/drawerlayoutandroid#closedrawer"><code>closeDrawer</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#opendrawer"><code>openDrawer</code></a></li>
|
||||
<li><a href="/react-native/docs/drawerlayoutandroid#closedrawer"><code>closeDrawer</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -200,7 +200,7 @@
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="/react-native/docs/0.56/colors">color</a></td><td>No</td></tr>
|
||||
<tr><td><a href="/react-native/docs/colors">color</a></td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -211,7 +211,7 @@
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="/react-native/docs/0.56/colors">color</a></td><td>No</td></tr>
|
||||
<tr><td><a href="/react-native/docs/colors">color</a></td><td>No</td></tr>
|
||||
</tbody>
|
||||
</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>
|
||||
|
||||
+34
-34
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Easing · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The `Easing` module implements common easing functions. This module is used by [Animated.timing()](/react-native/docs/0.56/animated#timing) to convey physically believable motion in animations."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Easing · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="The `Easing` module implements common easing functions. This module is used by [Animated.timing()](/react-native/docs/0.56/animated#timing) to convey physically believable motion in animations."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Easing · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The `Easing` module implements common easing functions. This module is used by [Animated.timing()](/react-native/docs/animated#timing) to convey physically believable motion in animations."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Easing · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="The `Easing` module implements common easing functions. This module is used by [Animated.timing()](/react-native/docs/animated#timing) to convey physically believable motion in animations."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -29,57 +29,57 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/easing.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Easing</h1></header><article><div><span><p>The <code>Easing</code> module implements common easing functions. This module is used by <a href="/react-native/docs/0.56/animated#timing">Animated.timing()</a> to convey physically believable motion in animations.</p>
|
||||
</script></nav></div><div class="container mainContainer"><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/easing.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Easing</h1></header><article><div><span><p>The <code>Easing</code> module implements common easing functions. This module is used by <a href="/react-native/docs/animated#timing">Animated.timing()</a> to convey physically believable motion in animations.</p>
|
||||
<p>You can find a visualization of some common easing functions at <a href="http://easings.net/">http://easings.net/</a></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="predefined-animations"></a><a href="#predefined-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>Predefined animations</h3>
|
||||
<p>The <code>Easing</code> module provides several predefined animations through the following methods:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/easing#back"><code>back</code></a> provides a simple animation where the object goes slightly back before moving forward</li>
|
||||
<li><a href="/react-native/docs/0.56/easing#bounce"><code>bounce</code></a> provides a bouncing animation</li>
|
||||
<li><a href="/react-native/docs/0.56/easing#ease"><code>ease</code></a> provides a simple inertial animation</li>
|
||||
<li><a href="/react-native/docs/0.56/easing#elastic"><code>elastic</code></a> provides a simple spring interaction</li>
|
||||
<li><a href="/react-native/docs/easing#back"><code>back</code></a> provides a simple animation where the object goes slightly back before moving forward</li>
|
||||
<li><a href="/react-native/docs/easing#bounce"><code>bounce</code></a> provides a bouncing animation</li>
|
||||
<li><a href="/react-native/docs/easing#ease"><code>ease</code></a> provides a simple inertial animation</li>
|
||||
<li><a href="/react-native/docs/easing#elastic"><code>elastic</code></a> provides a simple spring interaction</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="standard-functions"></a><a href="#standard-functions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Standard functions</h3>
|
||||
<p>Three standard easing functions are provided:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/easing#linear"><code>linear</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#quad"><code>quad</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#cubic"><code>cubic</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#linear"><code>linear</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#quad"><code>quad</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#cubic"><code>cubic</code></a></li>
|
||||
</ul>
|
||||
<p>The <a href="/react-native/docs/0.56/easing#poly"><code>poly</code></a> function can be used to implement quartic, quintic, and other higher power functions.</p>
|
||||
<p>The <a href="/react-native/docs/easing#poly"><code>poly</code></a> function can be used to implement quartic, quintic, and other higher power functions.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="additional-functions"></a><a href="#additional-functions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Additional functions</h3>
|
||||
<p>Additional mathematical functions are provided by the following methods:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/easing#bezier"><code>bezier</code></a> provides a cubic bezier curve</li>
|
||||
<li><a href="/react-native/docs/0.56/easing#circle"><code>circle</code></a> provides a circular function</li>
|
||||
<li><a href="/react-native/docs/0.56/easing#sin"><code>sin</code></a> provides a sinusoidal function</li>
|
||||
<li><a href="/react-native/docs/0.56/easing#exp"><code>exp</code></a> provides an exponential function</li>
|
||||
<li><a href="/react-native/docs/easing#bezier"><code>bezier</code></a> provides a cubic bezier curve</li>
|
||||
<li><a href="/react-native/docs/easing#circle"><code>circle</code></a> provides a circular function</li>
|
||||
<li><a href="/react-native/docs/easing#sin"><code>sin</code></a> provides a sinusoidal function</li>
|
||||
<li><a href="/react-native/docs/easing#exp"><code>exp</code></a> provides an exponential function</li>
|
||||
</ul>
|
||||
<p>The following helpers are used to modify other easing functions.</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/easing#in"><code>in</code></a> runs an easing function forwards</li>
|
||||
<li><a href="/react-native/docs/0.56/easing#inout"><code>inOut</code></a> makes any easing function symmetrical</li>
|
||||
<li><a href="/react-native/docs/0.56/easing#out"><code>out</code></a> runs an easing function backwards</li>
|
||||
<li><a href="/react-native/docs/easing#in"><code>in</code></a> runs an easing function forwards</li>
|
||||
<li><a href="/react-native/docs/easing#inout"><code>inOut</code></a> makes any easing function symmetrical</li>
|
||||
<li><a href="/react-native/docs/easing#out"><code>out</code></a> runs an easing function backwards</li>
|
||||
</ul>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/easing#step0"><code>step0</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#step1"><code>step1</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#linear"><code>linear</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#ease"><code>ease</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#quad"><code>quad</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#cubic"><code>cubic</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#poly"><code>poly</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#sin"><code>sin</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#circle"><code>circle</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#exp"><code>exp</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#elastic"><code>elastic</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#back"><code>back</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#bounce"><code>bounce</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#bezier"><code>bezier</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#in"><code>in</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#out"><code>out</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#inout"><code>inOut</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#step0"><code>step0</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#step1"><code>step1</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#linear"><code>linear</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#ease"><code>ease</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#quad"><code>quad</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#cubic"><code>cubic</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#poly"><code>poly</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#sin"><code>sin</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#circle"><code>circle</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#exp"><code>exp</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#elastic"><code>elastic</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#back"><code>back</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#bounce"><code>bounce</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#bezier"><code>bezier</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#in"><code>in</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#out"><code>out</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#inout"><code>inOut</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
+34
-34
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Easing · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The `Easing` module implements common easing functions. This module is used by [Animated.timing()](/react-native/docs/0.56/animated#timing) to convey physically believable motion in animations."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Easing · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="The `Easing` module implements common easing functions. This module is used by [Animated.timing()](/react-native/docs/0.56/animated#timing) to convey physically believable motion in animations."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Easing · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The `Easing` module implements common easing functions. This module is used by [Animated.timing()](/react-native/docs/animated#timing) to convey physically believable motion in animations."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Easing · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="The `Easing` module implements common easing functions. This module is used by [Animated.timing()](/react-native/docs/animated#timing) to convey physically believable motion in animations."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -29,57 +29,57 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/easing.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Easing</h1></header><article><div><span><p>The <code>Easing</code> module implements common easing functions. This module is used by <a href="/react-native/docs/0.56/animated#timing">Animated.timing()</a> to convey physically believable motion in animations.</p>
|
||||
</script></nav></div><div class="container mainContainer"><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/easing.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Easing</h1></header><article><div><span><p>The <code>Easing</code> module implements common easing functions. This module is used by <a href="/react-native/docs/animated#timing">Animated.timing()</a> to convey physically believable motion in animations.</p>
|
||||
<p>You can find a visualization of some common easing functions at <a href="http://easings.net/">http://easings.net/</a></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="predefined-animations"></a><a href="#predefined-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>Predefined animations</h3>
|
||||
<p>The <code>Easing</code> module provides several predefined animations through the following methods:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/easing#back"><code>back</code></a> provides a simple animation where the object goes slightly back before moving forward</li>
|
||||
<li><a href="/react-native/docs/0.56/easing#bounce"><code>bounce</code></a> provides a bouncing animation</li>
|
||||
<li><a href="/react-native/docs/0.56/easing#ease"><code>ease</code></a> provides a simple inertial animation</li>
|
||||
<li><a href="/react-native/docs/0.56/easing#elastic"><code>elastic</code></a> provides a simple spring interaction</li>
|
||||
<li><a href="/react-native/docs/easing#back"><code>back</code></a> provides a simple animation where the object goes slightly back before moving forward</li>
|
||||
<li><a href="/react-native/docs/easing#bounce"><code>bounce</code></a> provides a bouncing animation</li>
|
||||
<li><a href="/react-native/docs/easing#ease"><code>ease</code></a> provides a simple inertial animation</li>
|
||||
<li><a href="/react-native/docs/easing#elastic"><code>elastic</code></a> provides a simple spring interaction</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="standard-functions"></a><a href="#standard-functions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Standard functions</h3>
|
||||
<p>Three standard easing functions are provided:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/easing#linear"><code>linear</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#quad"><code>quad</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#cubic"><code>cubic</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#linear"><code>linear</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#quad"><code>quad</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#cubic"><code>cubic</code></a></li>
|
||||
</ul>
|
||||
<p>The <a href="/react-native/docs/0.56/easing#poly"><code>poly</code></a> function can be used to implement quartic, quintic, and other higher power functions.</p>
|
||||
<p>The <a href="/react-native/docs/easing#poly"><code>poly</code></a> function can be used to implement quartic, quintic, and other higher power functions.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="additional-functions"></a><a href="#additional-functions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Additional functions</h3>
|
||||
<p>Additional mathematical functions are provided by the following methods:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/easing#bezier"><code>bezier</code></a> provides a cubic bezier curve</li>
|
||||
<li><a href="/react-native/docs/0.56/easing#circle"><code>circle</code></a> provides a circular function</li>
|
||||
<li><a href="/react-native/docs/0.56/easing#sin"><code>sin</code></a> provides a sinusoidal function</li>
|
||||
<li><a href="/react-native/docs/0.56/easing#exp"><code>exp</code></a> provides an exponential function</li>
|
||||
<li><a href="/react-native/docs/easing#bezier"><code>bezier</code></a> provides a cubic bezier curve</li>
|
||||
<li><a href="/react-native/docs/easing#circle"><code>circle</code></a> provides a circular function</li>
|
||||
<li><a href="/react-native/docs/easing#sin"><code>sin</code></a> provides a sinusoidal function</li>
|
||||
<li><a href="/react-native/docs/easing#exp"><code>exp</code></a> provides an exponential function</li>
|
||||
</ul>
|
||||
<p>The following helpers are used to modify other easing functions.</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/easing#in"><code>in</code></a> runs an easing function forwards</li>
|
||||
<li><a href="/react-native/docs/0.56/easing#inout"><code>inOut</code></a> makes any easing function symmetrical</li>
|
||||
<li><a href="/react-native/docs/0.56/easing#out"><code>out</code></a> runs an easing function backwards</li>
|
||||
<li><a href="/react-native/docs/easing#in"><code>in</code></a> runs an easing function forwards</li>
|
||||
<li><a href="/react-native/docs/easing#inout"><code>inOut</code></a> makes any easing function symmetrical</li>
|
||||
<li><a href="/react-native/docs/easing#out"><code>out</code></a> runs an easing function backwards</li>
|
||||
</ul>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/easing#step0"><code>step0</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#step1"><code>step1</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#linear"><code>linear</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#ease"><code>ease</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#quad"><code>quad</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#cubic"><code>cubic</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#poly"><code>poly</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#sin"><code>sin</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#circle"><code>circle</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#exp"><code>exp</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#elastic"><code>elastic</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#back"><code>back</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#bounce"><code>bounce</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#bezier"><code>bezier</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#in"><code>in</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#out"><code>out</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/easing#inout"><code>inOut</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#step0"><code>step0</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#step1"><code>step1</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#linear"><code>linear</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#ease"><code>ease</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#quad"><code>quad</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#cubic"><code>cubic</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#poly"><code>poly</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#sin"><code>sin</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#circle"><code>circle</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#exp"><code>exp</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#elastic"><code>elastic</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#back"><code>back</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#bounce"><code>bounce</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#bezier"><code>bezier</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#in"><code>in</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#out"><code>out</code></a></li>
|
||||
<li><a href="/react-native/docs/easing#inout"><code>inOut</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
+37
-37
@@ -41,7 +41,7 @@
|
||||
<li>Scroll loading.</li>
|
||||
<li>ScrollToIndex support.</li>
|
||||
</ul>
|
||||
<p>If you need section support, use <a href="/react-native/docs/0.56/sectionlist"><code><SectionList></code></a>.</p>
|
||||
<p>If you need section support, use <a href="/react-native/docs/sectionlist"><code><SectionList></code></a>.</p>
|
||||
<p>Minimal Example:</p>
|
||||
<pre><code class="hljs"><FlatList
|
||||
data={[{key: 'a'}, {key: 'b'}]}
|
||||
@@ -109,52 +109,52 @@ class MultiSelectList extends React.PureComponent {
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<p>This is a convenience wrapper around <a href="/react-native/docs/0.56/virtualizedlist"><code><VirtualizedList></code></a>, and thus inherits its props (as well as those of <a href="/react-native/docs/0.56/scrollview"><code><ScrollView></code></a>) that aren't explicitly listed here, along with the following caveats:</p>
|
||||
<p>This is a convenience wrapper around <a href="/react-native/docs/virtualizedlist"><code><VirtualizedList></code></a>, and thus inherits its props (as well as those of <a href="/react-native/docs/scrollview"><code><ScrollView></code></a>) that aren't explicitly listed here, along with the following caveats:</p>
|
||||
<ul>
|
||||
<li>Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.</li>
|
||||
<li>This is a <code>PureComponent</code> which means that it will not re-render if <code>props</code> remain shallow- equal. Make sure that everything your <code>renderItem</code> function depends on is passed as a prop (e.g. <code>extraData</code>) 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.</li>
|
||||
<li>In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.</li>
|
||||
<li>By default, the list looks for a <code>key</code> prop on each item and uses that for the React key. Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li>
|
||||
</ul>
|
||||
<p>Also inherits <a href="/react-native/docs/0.56/scrollview#props">ScrollView Props</a>, unless it is nested in another FlatList of same orientation.</p>
|
||||
<p>Also inherits <a href="/react-native/docs/scrollview#props">ScrollView Props</a>, unless it is nested in another FlatList of same orientation.</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/scrollview#props"><code>ScrollView</code> props...</a></li>
|
||||
<li><a href="/react-native/docs/0.56/virtualizedlist#props"><code>VirtualizedList</code> props...</a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#renderitem"><code>renderItem</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#data"><code>data</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#itemseparatorcomponent"><code>ItemSeparatorComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#listemptycomponent"><code>ListEmptyComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#listfootercomponent"><code>ListFooterComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#listheadercomponent"><code>ListHeaderComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#columnwrapperstyle"><code>columnWrapperStyle</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#extradata"><code>extraData</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#getitemlayout"><code>getItemLayout</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#horizontal"><code>horizontal</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#initialnumtorender"><code>initialNumToRender</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#initialscrollindex"><code>initialScrollIndex</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#inverted"><code>inverted</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#keyextractor"><code>keyExtractor</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#numcolumns"><code>numColumns</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#onendreached"><code>onEndReached</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#onendreachedthreshold"><code>onEndReachedThreshold</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#onrefresh"><code>onRefresh</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#onviewableitemschanged"><code>onViewableItemsChanged</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#progressviewoffset"><code>progressViewOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#legacyimplementation"><code>legacyImplementation</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#refreshing"><code>refreshing</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#removeclippedsubviews"><code>removeClippedSubviews</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#viewabilityconfig"><code>viewabilityConfig</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#viewabilityconfigcallbackpairs"><code>viewabilityConfigCallbackPairs</code></a></li>
|
||||
<li><a href="/react-native/docs/scrollview#props"><code>ScrollView</code> props...</a></li>
|
||||
<li><a href="/react-native/docs/virtualizedlist#props"><code>VirtualizedList</code> props...</a></li>
|
||||
<li><a href="/react-native/docs/flatlist#renderitem"><code>renderItem</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#data"><code>data</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#itemseparatorcomponent"><code>ItemSeparatorComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#listemptycomponent"><code>ListEmptyComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#listfootercomponent"><code>ListFooterComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#listheadercomponent"><code>ListHeaderComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#columnwrapperstyle"><code>columnWrapperStyle</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#extradata"><code>extraData</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#getitemlayout"><code>getItemLayout</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#horizontal"><code>horizontal</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#initialnumtorender"><code>initialNumToRender</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#initialscrollindex"><code>initialScrollIndex</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#inverted"><code>inverted</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#keyextractor"><code>keyExtractor</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#numcolumns"><code>numColumns</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#onendreached"><code>onEndReached</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#onendreachedthreshold"><code>onEndReachedThreshold</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#onrefresh"><code>onRefresh</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#onviewableitemschanged"><code>onViewableItemsChanged</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#progressviewoffset"><code>progressViewOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#legacyimplementation"><code>legacyImplementation</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#refreshing"><code>refreshing</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#removeclippedsubviews"><code>removeClippedSubviews</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#viewabilityconfig"><code>viewabilityConfig</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#viewabilityconfigcallbackpairs"><code>viewabilityConfigCallbackPairs</code></a></li>
|
||||
</ul>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#scrolltoend"><code>scrollToEnd</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#scrolltoindex"><code>scrollToIndex</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#scrolltoitem"><code>scrollToItem</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#scrolltooffset"><code>scrollToOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#recordinteraction"><code>recordInteraction</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#flashscrollindicators"><code>flashScrollIndicators</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#scrolltoend"><code>scrollToEnd</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#scrolltoindex"><code>scrollToIndex</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#scrolltoitem"><code>scrollToItem</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#scrolltooffset"><code>scrollToOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#recordinteraction"><code>recordInteraction</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#flashscrollindicators"><code>flashScrollIndicators</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -192,7 +192,7 @@ class MultiSelectList extends React.PureComponent {
|
||||
</span></code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="data"></a><a href="#data" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>data</code></h3>
|
||||
<p>For simplicity, data is just a plain array. If you want to use something else, like an immutable list, use the underlying <a href="/react-native/docs/0.56/virtualizedlist"><code>VirtualizedList</code></a> directly.</p>
|
||||
<p>For simplicity, data is just a plain array. If you want to use something else, like an immutable list, use the underlying <a href="/react-native/docs/virtualizedlist"><code>VirtualizedList</code></a> directly.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
|
||||
+37
-37
@@ -41,7 +41,7 @@
|
||||
<li>Scroll loading.</li>
|
||||
<li>ScrollToIndex support.</li>
|
||||
</ul>
|
||||
<p>If you need section support, use <a href="/react-native/docs/0.56/sectionlist"><code><SectionList></code></a>.</p>
|
||||
<p>If you need section support, use <a href="/react-native/docs/sectionlist"><code><SectionList></code></a>.</p>
|
||||
<p>Minimal Example:</p>
|
||||
<pre><code class="hljs"><FlatList
|
||||
data={[{key: 'a'}, {key: 'b'}]}
|
||||
@@ -109,52 +109,52 @@ class MultiSelectList extends React.PureComponent {
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<p>This is a convenience wrapper around <a href="/react-native/docs/0.56/virtualizedlist"><code><VirtualizedList></code></a>, and thus inherits its props (as well as those of <a href="/react-native/docs/0.56/scrollview"><code><ScrollView></code></a>) that aren't explicitly listed here, along with the following caveats:</p>
|
||||
<p>This is a convenience wrapper around <a href="/react-native/docs/virtualizedlist"><code><VirtualizedList></code></a>, and thus inherits its props (as well as those of <a href="/react-native/docs/scrollview"><code><ScrollView></code></a>) that aren't explicitly listed here, along with the following caveats:</p>
|
||||
<ul>
|
||||
<li>Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.</li>
|
||||
<li>This is a <code>PureComponent</code> which means that it will not re-render if <code>props</code> remain shallow- equal. Make sure that everything your <code>renderItem</code> function depends on is passed as a prop (e.g. <code>extraData</code>) 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.</li>
|
||||
<li>In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.</li>
|
||||
<li>By default, the list looks for a <code>key</code> prop on each item and uses that for the React key. Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li>
|
||||
</ul>
|
||||
<p>Also inherits <a href="/react-native/docs/0.56/scrollview#props">ScrollView Props</a>, unless it is nested in another FlatList of same orientation.</p>
|
||||
<p>Also inherits <a href="/react-native/docs/scrollview#props">ScrollView Props</a>, unless it is nested in another FlatList of same orientation.</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/scrollview#props"><code>ScrollView</code> props...</a></li>
|
||||
<li><a href="/react-native/docs/0.56/virtualizedlist#props"><code>VirtualizedList</code> props...</a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#renderitem"><code>renderItem</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#data"><code>data</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#itemseparatorcomponent"><code>ItemSeparatorComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#listemptycomponent"><code>ListEmptyComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#listfootercomponent"><code>ListFooterComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#listheadercomponent"><code>ListHeaderComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#columnwrapperstyle"><code>columnWrapperStyle</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#extradata"><code>extraData</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#getitemlayout"><code>getItemLayout</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#horizontal"><code>horizontal</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#initialnumtorender"><code>initialNumToRender</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#initialscrollindex"><code>initialScrollIndex</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#inverted"><code>inverted</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#keyextractor"><code>keyExtractor</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#numcolumns"><code>numColumns</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#onendreached"><code>onEndReached</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#onendreachedthreshold"><code>onEndReachedThreshold</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#onrefresh"><code>onRefresh</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#onviewableitemschanged"><code>onViewableItemsChanged</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#progressviewoffset"><code>progressViewOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#legacyimplementation"><code>legacyImplementation</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#refreshing"><code>refreshing</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#removeclippedsubviews"><code>removeClippedSubviews</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#viewabilityconfig"><code>viewabilityConfig</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#viewabilityconfigcallbackpairs"><code>viewabilityConfigCallbackPairs</code></a></li>
|
||||
<li><a href="/react-native/docs/scrollview#props"><code>ScrollView</code> props...</a></li>
|
||||
<li><a href="/react-native/docs/virtualizedlist#props"><code>VirtualizedList</code> props...</a></li>
|
||||
<li><a href="/react-native/docs/flatlist#renderitem"><code>renderItem</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#data"><code>data</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#itemseparatorcomponent"><code>ItemSeparatorComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#listemptycomponent"><code>ListEmptyComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#listfootercomponent"><code>ListFooterComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#listheadercomponent"><code>ListHeaderComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#columnwrapperstyle"><code>columnWrapperStyle</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#extradata"><code>extraData</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#getitemlayout"><code>getItemLayout</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#horizontal"><code>horizontal</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#initialnumtorender"><code>initialNumToRender</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#initialscrollindex"><code>initialScrollIndex</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#inverted"><code>inverted</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#keyextractor"><code>keyExtractor</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#numcolumns"><code>numColumns</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#onendreached"><code>onEndReached</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#onendreachedthreshold"><code>onEndReachedThreshold</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#onrefresh"><code>onRefresh</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#onviewableitemschanged"><code>onViewableItemsChanged</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#progressviewoffset"><code>progressViewOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#legacyimplementation"><code>legacyImplementation</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#refreshing"><code>refreshing</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#removeclippedsubviews"><code>removeClippedSubviews</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#viewabilityconfig"><code>viewabilityConfig</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#viewabilityconfigcallbackpairs"><code>viewabilityConfigCallbackPairs</code></a></li>
|
||||
</ul>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#scrolltoend"><code>scrollToEnd</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#scrolltoindex"><code>scrollToIndex</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#scrolltoitem"><code>scrollToItem</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#scrolltooffset"><code>scrollToOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#recordinteraction"><code>recordInteraction</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/flatlist#flashscrollindicators"><code>flashScrollIndicators</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#scrolltoend"><code>scrollToEnd</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#scrolltoindex"><code>scrollToIndex</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#scrolltoitem"><code>scrollToItem</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#scrolltooffset"><code>scrollToOffset</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#recordinteraction"><code>recordInteraction</code></a></li>
|
||||
<li><a href="/react-native/docs/flatlist#flashscrollindicators"><code>flashScrollIndicators</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -192,7 +192,7 @@ class MultiSelectList extends React.PureComponent {
|
||||
</span></code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="data"></a><a href="#data" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>data</code></h3>
|
||||
<p>For simplicity, data is just a plain array. If you want to use something else, like an immutable list, use the underlying <a href="/react-native/docs/0.56/virtualizedlist"><code>VirtualizedList</code></a> directly.</p>
|
||||
<p>For simplicity, data is just a plain array. If you want to use something else, like an immutable list, use the underlying <a href="/react-native/docs/virtualizedlist"><code>VirtualizedList</code></a> directly.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
|
||||
+2
-2
@@ -116,8 +116,8 @@ AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20AlignItemsBasics%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%2F%2F%20Try%20setting%20%60alignItems%60%20to%20'flex-start'%0A%20%20%20%20%20%20%2F%2F%20Try%20setting%20%60justifyContent%60%20to%20%60flex-end%60.%0A%20%20%20%20%20%20%2F%2F%20Try%20setting%20%60flexDirection%60%20to%20%60row%60.%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20flex%3A%201%2C%0A%20%20%20%20%20%20%20%20flexDirection%3A%20'column'%2C%0A%20%20%20%20%20%20%20%20justifyContent%3A%20'center'%2C%0A%20%20%20%20%20%20%20%20alignItems%3A%20'center'%2C%0A%20%20%20%20%20%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'powderblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'skyblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'steelblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%3B%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20AlignItemsBasics)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<h4><a class="anchor" aria-hidden="true" id="going-deeper"></a><a href="#going-deeper" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Going Deeper</h4>
|
||||
<p>We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented <a href="/react-native/docs/0.56/layout-props">here</a>.</p>
|
||||
<p>We're getting close to being able to build a real application. One thing we are still missing is a way to take user input, so let's move on to <a href="/react-native/docs/0.56/handling-text-input">learn how to handle text input with the TextInput component</a>.</p>
|
||||
<p>We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented <a href="/react-native/docs/layout-props">here</a>.</p>
|
||||
<p>We're getting close to being able to build a real application. One thing we are still missing is a way to take user input, so let's move on to <a href="/react-native/docs/handling-text-input">learn how to handle text input with the TextInput component</a>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/height-and-width">← Height and Width</a><a class="docs-next button" href="/react-native/docs/handling-text-input">Handling Text Input →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/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="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 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>
|
||||
var search = docsearch({
|
||||
|
||||
@@ -116,8 +116,8 @@ AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20AlignItemsBasics%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%2F%2F%20Try%20setting%20%60alignItems%60%20to%20'flex-start'%0A%20%20%20%20%20%20%2F%2F%20Try%20setting%20%60justifyContent%60%20to%20%60flex-end%60.%0A%20%20%20%20%20%20%2F%2F%20Try%20setting%20%60flexDirection%60%20to%20%60row%60.%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20flex%3A%201%2C%0A%20%20%20%20%20%20%20%20flexDirection%3A%20'column'%2C%0A%20%20%20%20%20%20%20%20justifyContent%3A%20'center'%2C%0A%20%20%20%20%20%20%20%20alignItems%3A%20'center'%2C%0A%20%20%20%20%20%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'powderblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'skyblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'steelblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%3B%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20AlignItemsBasics)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<h4><a class="anchor" aria-hidden="true" id="going-deeper"></a><a href="#going-deeper" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Going Deeper</h4>
|
||||
<p>We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented <a href="/react-native/docs/0.56/layout-props">here</a>.</p>
|
||||
<p>We're getting close to being able to build a real application. One thing we are still missing is a way to take user input, so let's move on to <a href="/react-native/docs/0.56/handling-text-input">learn how to handle text input with the TextInput component</a>.</p>
|
||||
<p>We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented <a href="/react-native/docs/layout-props">here</a>.</p>
|
||||
<p>We're getting close to being able to build a real application. One thing we are still missing is a way to take user input, so let's move on to <a href="/react-native/docs/handling-text-input">learn how to handle text input with the TextInput component</a>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/height-and-width">← Height and Width</a><a class="docs-next button" href="/react-native/docs/handling-text-input">Handling Text Input →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/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="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 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>
|
||||
var search = docsearch({
|
||||
|
||||
@@ -58,12 +58,12 @@
|
||||
</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/geolocation#setrnconfiguration"><code>setRNConfiguration</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/geolocation#requestauthorization"><code>requestAuthorization</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/geolocation#getcurrentposition"><code>getCurrentPosition</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/geolocation#watchposition"><code>watchPosition</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/geolocation#clearwatch"><code>clearWatch</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/geolocation#stopobserving"><code>stopObserving</code></a></li>
|
||||
<li><a href="/react-native/docs/geolocation#setrnconfiguration"><code>setRNConfiguration</code></a></li>
|
||||
<li><a href="/react-native/docs/geolocation#requestauthorization"><code>requestAuthorization</code></a></li>
|
||||
<li><a href="/react-native/docs/geolocation#getcurrentposition"><code>getCurrentPosition</code></a></li>
|
||||
<li><a href="/react-native/docs/geolocation#watchposition"><code>watchPosition</code></a></li>
|
||||
<li><a href="/react-native/docs/geolocation#clearwatch"><code>clearWatch</code></a></li>
|
||||
<li><a href="/react-native/docs/geolocation#stopobserving"><code>stopObserving</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -58,12 +58,12 @@
|
||||
</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/geolocation#setrnconfiguration"><code>setRNConfiguration</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/geolocation#requestauthorization"><code>requestAuthorization</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/geolocation#getcurrentposition"><code>getCurrentPosition</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/geolocation#watchposition"><code>watchPosition</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/geolocation#clearwatch"><code>clearWatch</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/geolocation#stopobserving"><code>stopObserving</code></a></li>
|
||||
<li><a href="/react-native/docs/geolocation#setrnconfiguration"><code>setRNConfiguration</code></a></li>
|
||||
<li><a href="/react-native/docs/geolocation#requestauthorization"><code>requestAuthorization</code></a></li>
|
||||
<li><a href="/react-native/docs/geolocation#getcurrentposition"><code>getCurrentPosition</code></a></li>
|
||||
<li><a href="/react-native/docs/geolocation#watchposition"><code>watchPosition</code></a></li>
|
||||
<li><a href="/react-native/docs/geolocation#clearwatch"><code>clearWatch</code></a></li>
|
||||
<li><a href="/react-native/docs/geolocation#stopobserving"><code>stopObserving</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
<li><code>View.props.onMoveShouldSetResponderCapture: (evt) => true,</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="panresponder"></a><a href="#panresponder" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>PanResponder</h3>
|
||||
<p>For higher-level gesture interpretation, check out <a href="/react-native/docs/0.56/panresponder">PanResponder</a>.</p>
|
||||
<p>For higher-level gesture interpretation, check out <a href="/react-native/docs/panresponder">PanResponder</a>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/performance">← Performance</a><a class="docs-next button" href="/react-native/docs/javascript-environment">JavaScript Environment →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/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="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 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>
|
||||
var search = docsearch({
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
<li><code>View.props.onMoveShouldSetResponderCapture: (evt) => true,</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="panresponder"></a><a href="#panresponder" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>PanResponder</h3>
|
||||
<p>For higher-level gesture interpretation, check out <a href="/react-native/docs/0.56/panresponder">PanResponder</a>.</p>
|
||||
<p>For higher-level gesture interpretation, check out <a href="/react-native/docs/panresponder">PanResponder</a>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/performance">← Performance</a><a class="docs-next button" href="/react-native/docs/javascript-environment">JavaScript Environment →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/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="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 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>
|
||||
var search = docsearch({
|
||||
|
||||
+15
-15
@@ -104,7 +104,7 @@
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<p>This page will help you install and build your first React Native app. If you already have React Native installed, you can skip ahead to the <a href="/react-native/docs/0.56/tutorial">Tutorial</a>.</p>
|
||||
<p>This page will help you install and build your first React Native app. If you already have React Native installed, you can skip ahead to the <a href="/react-native/docs/tutorial">Tutorial</a>.</p>
|
||||
<div class="toggler">
|
||||
<ul role="tablist" >
|
||||
<li id="quickstart" class="button-quickstart" aria-selected="false" role="tab" tabindex="0" aria-controls="quickstarttab" onclick="displayTab('guide', 'quickstart')">
|
||||
@@ -116,7 +116,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<p><block class="quickstart mac windows linux ios android" /></p>
|
||||
<p><a href="https://github.com/react-community/create-react-native-app">Create React Native App</a> is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code - no Xcode or Android Studio installation required (see <a href="/react-native/docs/0.56/getting-started#caveats">Caveats</a>).</p>
|
||||
<p><a href="https://github.com/react-community/create-react-native-app">Create React Native App</a> is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code - no Xcode or Android Studio installation required (see <a href="/react-native/docs/getting-started#caveats">Caveats</a>).</p>
|
||||
<p>Assuming that you have <a href="https://nodejs.org/en/download/">Node</a> installed, you can use npm to install the <code>create-react-native-app</code> command line utility:</p>
|
||||
<pre><code class="hljs"><span class="hljs-string">npm </span><span class="hljs-string">install </span>-g <span class="hljs-built_in">create-react-native-app</span>
|
||||
</code></pre>
|
||||
@@ -139,7 +139,7 @@
|
||||
<li><p>Create React Native App also has a <a href="https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md">user guide</a> you can reference if you have questions specific to the tool.</p></li>
|
||||
<li><p>If you can't get this to work, see the <a href="https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#troubleshooting">Troubleshooting</a> section in the README for Create React Native App.</p></li>
|
||||
</ul>
|
||||
<p>If you're curious to learn more about React Native, continue on to the <a href="/react-native/docs/0.56/tutorial">Tutorial</a>.</p>
|
||||
<p>If you're curious to learn more about React Native, continue on to the <a href="/react-native/docs/tutorial">Tutorial</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="running-your-app-on-a-simulator-or-virtual-device"></a><a href="#running-your-app-on-a-simulator-or-virtual-device" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Running your app on a simulator or virtual device</h3>
|
||||
<p>Create React Native App makes it really easy to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for building projects with native code to learn how to install Xcode and set up your Android development environment.</p>
|
||||
<p>Once you've set these up, you can launch your app on an Android Virtual Device by running <code>npm run android</code>, or on the iOS Simulator by running <code>npm run ios</code> (macOS only).</p>
|
||||
@@ -331,19 +331,19 @@
|
||||
<p>Use the React Native command line interface to generate a new React Native project called "AwesomeProject":</p>
|
||||
<pre><code class="hljs">react-<span class="hljs-keyword">native</span> init AwesomeProject
|
||||
</code></pre>
|
||||
<p>This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Create React Native App, or if you're adding iOS support to an existing React Native project (see <a href="/react-native/docs/0.56/platform-specific-code">Platform Specific Code</a>).</p>
|
||||
<p>This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Create React Native App, or if you're adding iOS support to an existing React Native project (see <a href="/react-native/docs/platform-specific-code">Platform Specific Code</a>).</p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="creating-a-new-application-1"></a><a href="#creating-a-new-application-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>Creating a new application</h2>
|
||||
<p>Use the React Native command line interface to generate a new React Native project called "AwesomeProject":</p>
|
||||
<pre><code class="hljs">react-<span class="hljs-keyword">native</span> init AwesomeProject
|
||||
</code></pre>
|
||||
<p>This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Create React Native App, or if you're adding Android support to an existing React Native project (see <a href="/react-native/docs/0.56/platform-specific-code">Platform Specific Code</a>).</p>
|
||||
<p>This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Create React Native App, or if you're adding Android support to an existing React Native project (see <a href="/react-native/docs/platform-specific-code">Platform Specific Code</a>).</p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="preparing-the-android-device"></a><a href="#preparing-the-android-device" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Preparing the Android device</h2>
|
||||
<p>You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer.</p>
|
||||
<p>Either way, you will need to prepare the device to run Android apps for development.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="using-a-physical-device"></a><a href="#using-a-physical-device" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using a physical device</h3>
|
||||
<p>If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions <a href="/react-native/docs/0.56/running-on-device">here</a>.</p>
|
||||
<p>If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions <a href="/react-native/docs/running-on-device">here</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="using-a-virtual-device"></a><a href="#using-a-virtual-device" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using a virtual device</h3>
|
||||
<p>You can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:</p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
@@ -382,10 +382,10 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
<p><img src="/react-native/docs/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><code>react-native run-ios</code> is just one way to run your app. You can also run it directly from within Xcode or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
<blockquote>
|
||||
<p>If you can't get this to work, see the <a href="/react-native/docs/0.56/troubleshooting#content">Troubleshooting</a> page.</p>
|
||||
<p>If you can't get this to work, see the <a href="/react-native/docs/troubleshooting#content">Troubleshooting</a> page.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="running-on-a-device"></a><a href="#running-on-a-device" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Running on a device</h3>
|
||||
<p>The above command will automatically run your app on the iOS Simulator by default. If you want to run the app on an actual physical iOS device, please follow the instructions <a href="/react-native/docs/0.56/running-on-device">here</a>.</p>
|
||||
<p>The above command will automatically run your app on the iOS Simulator by default. If you want to run the app on an actual physical iOS device, please follow the instructions <a href="/react-native/docs/running-on-device">here</a>.</p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="running-your-react-native-application-2"></a><a href="#running-your-react-native-application-2" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Running your React Native application</h2>
|
||||
<p>Run <code>react-native run-android</code> inside your React Native project folder:</p>
|
||||
@@ -400,7 +400,7 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-android
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p><code>react-native run-android</code> is just one way to run your app - you can also run it directly from within Android Studio or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
<blockquote>
|
||||
<p>If you can't get this to work, see the <a href="/react-native/docs/0.56/troubleshooting#content">Troubleshooting</a> page.</p>
|
||||
<p>If you can't get this to work, see the <a href="/react-native/docs/troubleshooting#content">Troubleshooting</a> page.</p>
|
||||
</blockquote>
|
||||
<p><block class="native mac ios android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="modifying-your-app-1"></a><a href="#modifying-your-app-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>Modifying your app</h3>
|
||||
@@ -433,17 +433,17 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-android
|
||||
<p><block class="native mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="now-what-1"></a><a href="#now-what-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>Now what?</h2>
|
||||
<ul>
|
||||
<li><p>Turn on <a href="/react-native/docs/0.56/debugging#reloading-javascript">Live Reload</a> in the Developer Menu. Your app will now reload automatically whenever you save any changes!</p></li>
|
||||
<li><p>If you want to add this new React Native code to an existing application, check out the <a href="/react-native/docs/0.56/integration-with-existing-apps">Integration guide</a>.</p></li>
|
||||
<li><p>Turn on <a href="/react-native/docs/debugging#reloading-javascript">Live Reload</a> in the Developer Menu. Your app will now reload automatically whenever you save any changes!</p></li>
|
||||
<li><p>If you want to add this new React Native code to an existing application, check out the <a href="/react-native/docs/integration-with-existing-apps">Integration guide</a>.</p></li>
|
||||
</ul>
|
||||
<p>If you're curious to learn more about React Native, continue on to the <a href="/react-native/docs/0.56/tutorial">Tutorial</a>.</p>
|
||||
<p>If you're curious to learn more about React Native, continue on to the <a href="/react-native/docs/tutorial">Tutorial</a>.</p>
|
||||
<p><block class="native windows linux mac android" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="now-what-2"></a><a href="#now-what-2" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 what?</h2>
|
||||
<ul>
|
||||
<li><p>Turn on <a href="/react-native/docs/0.56/debugging#reloading-javascript">Live Reload</a> in the Developer Menu. Your app will now reload automatically whenever you save any changes!</p></li>
|
||||
<li><p>If you want to add this new React Native code to an existing application, check out the <a href="/react-native/docs/0.56/integration-with-existing-apps">Integration guide</a>.</p></li>
|
||||
<li><p>Turn on <a href="/react-native/docs/debugging#reloading-javascript">Live Reload</a> in the Developer Menu. Your app will now reload automatically whenever you save any changes!</p></li>
|
||||
<li><p>If you want to add this new React Native code to an existing application, check out the <a href="/react-native/docs/integration-with-existing-apps">Integration guide</a>.</p></li>
|
||||
</ul>
|
||||
<p>If you're curious to learn more about React Native, continue on to the <a href="/react-native/docs/0.56/tutorial">Tutorial</a>.</p>
|
||||
<p>If you're curious to learn more about React Native, continue on to the <a href="/react-native/docs/tutorial">Tutorial</a>.</p>
|
||||
<script>
|
||||
function displayTab(type, value) {
|
||||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||
|
||||
@@ -104,7 +104,7 @@
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<p>This page will help you install and build your first React Native app. If you already have React Native installed, you can skip ahead to the <a href="/react-native/docs/0.56/tutorial">Tutorial</a>.</p>
|
||||
<p>This page will help you install and build your first React Native app. If you already have React Native installed, you can skip ahead to the <a href="/react-native/docs/tutorial">Tutorial</a>.</p>
|
||||
<div class="toggler">
|
||||
<ul role="tablist" >
|
||||
<li id="quickstart" class="button-quickstart" aria-selected="false" role="tab" tabindex="0" aria-controls="quickstarttab" onclick="displayTab('guide', 'quickstart')">
|
||||
@@ -116,7 +116,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<p><block class="quickstart mac windows linux ios android" /></p>
|
||||
<p><a href="https://github.com/react-community/create-react-native-app">Create React Native App</a> is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code - no Xcode or Android Studio installation required (see <a href="/react-native/docs/0.56/getting-started#caveats">Caveats</a>).</p>
|
||||
<p><a href="https://github.com/react-community/create-react-native-app">Create React Native App</a> is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code - no Xcode or Android Studio installation required (see <a href="/react-native/docs/getting-started#caveats">Caveats</a>).</p>
|
||||
<p>Assuming that you have <a href="https://nodejs.org/en/download/">Node</a> installed, you can use npm to install the <code>create-react-native-app</code> command line utility:</p>
|
||||
<pre><code class="hljs"><span class="hljs-string">npm </span><span class="hljs-string">install </span>-g <span class="hljs-built_in">create-react-native-app</span>
|
||||
</code></pre>
|
||||
@@ -139,7 +139,7 @@
|
||||
<li><p>Create React Native App also has a <a href="https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md">user guide</a> you can reference if you have questions specific to the tool.</p></li>
|
||||
<li><p>If you can't get this to work, see the <a href="https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#troubleshooting">Troubleshooting</a> section in the README for Create React Native App.</p></li>
|
||||
</ul>
|
||||
<p>If you're curious to learn more about React Native, continue on to the <a href="/react-native/docs/0.56/tutorial">Tutorial</a>.</p>
|
||||
<p>If you're curious to learn more about React Native, continue on to the <a href="/react-native/docs/tutorial">Tutorial</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="running-your-app-on-a-simulator-or-virtual-device"></a><a href="#running-your-app-on-a-simulator-or-virtual-device" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Running your app on a simulator or virtual device</h3>
|
||||
<p>Create React Native App makes it really easy to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for building projects with native code to learn how to install Xcode and set up your Android development environment.</p>
|
||||
<p>Once you've set these up, you can launch your app on an Android Virtual Device by running <code>npm run android</code>, or on the iOS Simulator by running <code>npm run ios</code> (macOS only).</p>
|
||||
@@ -331,19 +331,19 @@
|
||||
<p>Use the React Native command line interface to generate a new React Native project called "AwesomeProject":</p>
|
||||
<pre><code class="hljs">react-<span class="hljs-keyword">native</span> init AwesomeProject
|
||||
</code></pre>
|
||||
<p>This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Create React Native App, or if you're adding iOS support to an existing React Native project (see <a href="/react-native/docs/0.56/platform-specific-code">Platform Specific Code</a>).</p>
|
||||
<p>This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Create React Native App, or if you're adding iOS support to an existing React Native project (see <a href="/react-native/docs/platform-specific-code">Platform Specific Code</a>).</p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="creating-a-new-application-1"></a><a href="#creating-a-new-application-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>Creating a new application</h2>
|
||||
<p>Use the React Native command line interface to generate a new React Native project called "AwesomeProject":</p>
|
||||
<pre><code class="hljs">react-<span class="hljs-keyword">native</span> init AwesomeProject
|
||||
</code></pre>
|
||||
<p>This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Create React Native App, or if you're adding Android support to an existing React Native project (see <a href="/react-native/docs/0.56/platform-specific-code">Platform Specific Code</a>).</p>
|
||||
<p>This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Create React Native App, or if you're adding Android support to an existing React Native project (see <a href="/react-native/docs/platform-specific-code">Platform Specific Code</a>).</p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="preparing-the-android-device"></a><a href="#preparing-the-android-device" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Preparing the Android device</h2>
|
||||
<p>You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer.</p>
|
||||
<p>Either way, you will need to prepare the device to run Android apps for development.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="using-a-physical-device"></a><a href="#using-a-physical-device" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using a physical device</h3>
|
||||
<p>If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions <a href="/react-native/docs/0.56/running-on-device">here</a>.</p>
|
||||
<p>If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions <a href="/react-native/docs/running-on-device">here</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="using-a-virtual-device"></a><a href="#using-a-virtual-device" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using a virtual device</h3>
|
||||
<p>You can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:</p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
@@ -382,10 +382,10 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
<p><img src="/react-native/docs/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><code>react-native run-ios</code> is just one way to run your app. You can also run it directly from within Xcode or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
<blockquote>
|
||||
<p>If you can't get this to work, see the <a href="/react-native/docs/0.56/troubleshooting#content">Troubleshooting</a> page.</p>
|
||||
<p>If you can't get this to work, see the <a href="/react-native/docs/troubleshooting#content">Troubleshooting</a> page.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="running-on-a-device"></a><a href="#running-on-a-device" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Running on a device</h3>
|
||||
<p>The above command will automatically run your app on the iOS Simulator by default. If you want to run the app on an actual physical iOS device, please follow the instructions <a href="/react-native/docs/0.56/running-on-device">here</a>.</p>
|
||||
<p>The above command will automatically run your app on the iOS Simulator by default. If you want to run the app on an actual physical iOS device, please follow the instructions <a href="/react-native/docs/running-on-device">here</a>.</p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="running-your-react-native-application-2"></a><a href="#running-your-react-native-application-2" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Running your React Native application</h2>
|
||||
<p>Run <code>react-native run-android</code> inside your React Native project folder:</p>
|
||||
@@ -400,7 +400,7 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-android
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p><code>react-native run-android</code> is just one way to run your app - you can also run it directly from within Android Studio or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
<blockquote>
|
||||
<p>If you can't get this to work, see the <a href="/react-native/docs/0.56/troubleshooting#content">Troubleshooting</a> page.</p>
|
||||
<p>If you can't get this to work, see the <a href="/react-native/docs/troubleshooting#content">Troubleshooting</a> page.</p>
|
||||
</blockquote>
|
||||
<p><block class="native mac ios android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="modifying-your-app-1"></a><a href="#modifying-your-app-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>Modifying your app</h3>
|
||||
@@ -433,17 +433,17 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-android
|
||||
<p><block class="native mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="now-what-1"></a><a href="#now-what-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>Now what?</h2>
|
||||
<ul>
|
||||
<li><p>Turn on <a href="/react-native/docs/0.56/debugging#reloading-javascript">Live Reload</a> in the Developer Menu. Your app will now reload automatically whenever you save any changes!</p></li>
|
||||
<li><p>If you want to add this new React Native code to an existing application, check out the <a href="/react-native/docs/0.56/integration-with-existing-apps">Integration guide</a>.</p></li>
|
||||
<li><p>Turn on <a href="/react-native/docs/debugging#reloading-javascript">Live Reload</a> in the Developer Menu. Your app will now reload automatically whenever you save any changes!</p></li>
|
||||
<li><p>If you want to add this new React Native code to an existing application, check out the <a href="/react-native/docs/integration-with-existing-apps">Integration guide</a>.</p></li>
|
||||
</ul>
|
||||
<p>If you're curious to learn more about React Native, continue on to the <a href="/react-native/docs/0.56/tutorial">Tutorial</a>.</p>
|
||||
<p>If you're curious to learn more about React Native, continue on to the <a href="/react-native/docs/tutorial">Tutorial</a>.</p>
|
||||
<p><block class="native windows linux mac android" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="now-what-2"></a><a href="#now-what-2" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 what?</h2>
|
||||
<ul>
|
||||
<li><p>Turn on <a href="/react-native/docs/0.56/debugging#reloading-javascript">Live Reload</a> in the Developer Menu. Your app will now reload automatically whenever you save any changes!</p></li>
|
||||
<li><p>If you want to add this new React Native code to an existing application, check out the <a href="/react-native/docs/0.56/integration-with-existing-apps">Integration guide</a>.</p></li>
|
||||
<li><p>Turn on <a href="/react-native/docs/debugging#reloading-javascript">Live Reload</a> in the Developer Menu. Your app will now reload automatically whenever you save any changes!</p></li>
|
||||
<li><p>If you want to add this new React Native code to an existing application, check out the <a href="/react-native/docs/integration-with-existing-apps">Integration guide</a>.</p></li>
|
||||
</ul>
|
||||
<p>If you're curious to learn more about React Native, continue on to the <a href="/react-native/docs/0.56/tutorial">Tutorial</a>.</p>
|
||||
<p>If you're curious to learn more about React Native, continue on to the <a href="/react-native/docs/tutorial">Tutorial</a>.</p>
|
||||
<script>
|
||||
function displayTab(type, value) {
|
||||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Handling Text Input · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="[`TextInput`](/react-native/docs/0.56/textinput#content) is a basic component that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Handling Text Input · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="[`TextInput`](/react-native/docs/0.56/textinput#content) is a basic component that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Handling Text Input · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="[`TextInput`](/react-native/docs/textinput#content) is a basic component that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Handling Text Input · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="[`TextInput`](/react-native/docs/textinput#content) is a basic component that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -29,7 +29,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/handling-text-input.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Handling Text Input</h1></header><article><div><span><p><a href="/react-native/docs/0.56/textinput#content"><code>TextInput</code></a> is a basic component that allows the user to enter text. It has an <code>onChangeText</code> prop that takes a function to be called every time the text changed, and an <code>onSubmitEditing</code> prop that takes a function to be called when the text is submitted.</p>
|
||||
</script></nav></div><div class="container mainContainer"><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/handling-text-input.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Handling Text Input</h1></header><article><div><span><p><a href="/react-native/docs/textinput#content"><code>TextInput</code></a> is a basic component that allows the user to enter text. It has an <code>onChangeText</code> prop that takes a function to be called every time the text changed, and an <code>onSubmitEditing</code> prop that takes a function to be called when the text is submitted.</p>
|
||||
<p>For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕🍕🍕".</p>
|
||||
<div class="web-player"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { AppRegistry, Text, TextInput, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
@@ -61,8 +61,8 @@ AppRegistry.registerComponent('AwesomeProject', () => PizzaTranslator);
|
||||
</span></code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20PizzaTranslator%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7Btext%3A%20''%7D%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bpadding%3A%2010%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%7Bheight%3A%2040%7D%7D%0A%20%20%20%20%20%20%20%20%20%20placeholder%3D%22Type%20here%20to%20translate!%22%0A%20%20%20%20%20%20%20%20%20%20onChangeText%3D%7B(text)%20%3D%3E%20this.setState(%7Btext%7D)%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7Bpadding%3A%2010%2C%20fontSize%3A%2042%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%7Bthis.state.text.split('%20').map((word)%20%3D%3E%20word%20%26%26%20'%F0%9F%8D%95').join('%20')%7D%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20PizzaTranslator)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<p>In this example, we store <code>text</code> in the state, because it changes over time.</p>
|
||||
<p>There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the <a href="https://reactjs.org/docs/forms.html#controlled-components">React docs on controlled components</a>, or the <a href="/react-native/docs/0.56/textinput">reference docs for TextInput</a>.</p>
|
||||
<p>Text input is one of the ways the user interacts with the app. Next, let's look at another type of input and <a href="/react-native/docs/0.56/handling-touches">learn how to handle touches</a>.</p>
|
||||
<p>There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the <a href="https://reactjs.org/docs/forms.html#controlled-components">React docs on controlled components</a>, or the <a href="/react-native/docs/textinput">reference docs for TextInput</a>.</p>
|
||||
<p>Text input is one of the ways the user interacts with the app. Next, let's look at another type of input and <a href="/react-native/docs/handling-touches">learn how to handle touches</a>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/flexbox">← Layout with Flexbox</a><a class="docs-next button" href="/react-native/docs/handling-touches">Handling Touches →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/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="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 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>
|
||||
var search = docsearch({
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Handling Text Input · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="[`TextInput`](/react-native/docs/0.56/textinput#content) is a basic component that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Handling Text Input · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="[`TextInput`](/react-native/docs/0.56/textinput#content) is a basic component that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Handling Text Input · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="[`TextInput`](/react-native/docs/textinput#content) is a basic component that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Handling Text Input · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="[`TextInput`](/react-native/docs/textinput#content) is a basic component that allows the user to enter text. It has an `onChangeText` prop that takes a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -29,7 +29,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/handling-text-input.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Handling Text Input</h1></header><article><div><span><p><a href="/react-native/docs/0.56/textinput#content"><code>TextInput</code></a> is a basic component that allows the user to enter text. It has an <code>onChangeText</code> prop that takes a function to be called every time the text changed, and an <code>onSubmitEditing</code> prop that takes a function to be called when the text is submitted.</p>
|
||||
</script></nav></div><div class="container mainContainer"><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/handling-text-input.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Handling Text Input</h1></header><article><div><span><p><a href="/react-native/docs/textinput#content"><code>TextInput</code></a> is a basic component that allows the user to enter text. It has an <code>onChangeText</code> prop that takes a function to be called every time the text changed, and an <code>onSubmitEditing</code> prop that takes a function to be called when the text is submitted.</p>
|
||||
<p>For example, let's say that as the user types, you're translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated as "🍕🍕🍕".</p>
|
||||
<div class="web-player"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { AppRegistry, Text, TextInput, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
@@ -61,8 +61,8 @@ AppRegistry.registerComponent('AwesomeProject', () => PizzaTranslator);
|
||||
</span></code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20PizzaTranslator%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7Btext%3A%20''%7D%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bpadding%3A%2010%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%7Bheight%3A%2040%7D%7D%0A%20%20%20%20%20%20%20%20%20%20placeholder%3D%22Type%20here%20to%20translate!%22%0A%20%20%20%20%20%20%20%20%20%20onChangeText%3D%7B(text)%20%3D%3E%20this.setState(%7Btext%7D)%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7Bpadding%3A%2010%2C%20fontSize%3A%2042%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%7Bthis.state.text.split('%20').map((word)%20%3D%3E%20word%20%26%26%20'%F0%9F%8D%95').join('%20')%7D%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20PizzaTranslator)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<p>In this example, we store <code>text</code> in the state, because it changes over time.</p>
|
||||
<p>There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the <a href="https://reactjs.org/docs/forms.html#controlled-components">React docs on controlled components</a>, or the <a href="/react-native/docs/0.56/textinput">reference docs for TextInput</a>.</p>
|
||||
<p>Text input is one of the ways the user interacts with the app. Next, let's look at another type of input and <a href="/react-native/docs/0.56/handling-touches">learn how to handle touches</a>.</p>
|
||||
<p>There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the <a href="https://reactjs.org/docs/forms.html#controlled-components">React docs on controlled components</a>, or the <a href="/react-native/docs/textinput">reference docs for TextInput</a>.</p>
|
||||
<p>Text input is one of the ways the user interacts with the app. Next, let's look at another type of input and <a href="/react-native/docs/handling-touches">learn how to handle touches</a>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/flexbox">← Layout with Flexbox</a><a class="docs-next button" href="/react-native/docs/handling-touches">Handling Touches →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/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="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 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>
|
||||
var search = docsearch({
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Handling Touches · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive [gesture responder system](/react-native/docs/0.56/gesture-responder-system) to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Handling Touches · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive [gesture responder system](/react-native/docs/0.56/gesture-responder-system) to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Handling Touches · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive [gesture responder system](/react-native/docs/gesture-responder-system) to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Handling Touches · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive [gesture responder system](/react-native/docs/gesture-responder-system) to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -29,9 +29,9 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/handling-touches.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Handling Touches</h1></header><article><div><span><p>Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive <a href="/react-native/docs/0.56/gesture-responder-system">gesture responder system</a> to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button.</p>
|
||||
</script></nav></div><div class="container mainContainer"><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/handling-touches.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Handling Touches</h1></header><article><div><span><p>Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive <a href="/react-native/docs/gesture-responder-system">gesture responder system</a> to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="displaying-a-basic-button"></a><a href="#displaying-a-basic-button" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Displaying a basic button</h2>
|
||||
<p><a href="/react-native/docs/0.56/button">Button</a> provides a basic button component that is rendered nicely on all platforms. The minimal example to display a button looks like this:</p>
|
||||
<p><a href="/react-native/docs/button">Button</a> provides a basic button component that is rendered nicely on all platforms. The minimal example to display a button looks like this:</p>
|
||||
<pre><code class="hljs css languages- javascript"><Button
|
||||
onPress={() => {
|
||||
Alert.alert(<span class="hljs-string">'You tapped the button!'</span>);
|
||||
@@ -118,10 +118,10 @@ AppRegistry.registerComponent('AwesomeProject', () => ButtonBasics);
|
||||
<p>If the basic button doesn't look right for your app, you can build your own button using any of the "Touchable" components provided by React Native. The "Touchable" components provide the capability to capture tapping gestures, and can display feedback when a gesture is recognized. These components do not provide any default styling, however, so you will need to do a bit of work to get them looking nicely in your app.</p>
|
||||
<p>Which "Touchable" component you use will depend on what kind of feedback you want to provide:</p>
|
||||
<ul>
|
||||
<li><p>Generally, you can use <a href="/react-native/docs/0.56/touchablehighlight"><strong>TouchableHighlight</strong></a> anywhere you would use a button or link on web. The view's background will be darkened when the user presses down on the button.</p></li>
|
||||
<li><p>You may consider using <a href="/react-native/docs/0.56/touchablenativefeedback"><strong>TouchableNativeFeedback</strong></a> on Android to display ink surface reaction ripples that respond to the user's touch.</p></li>
|
||||
<li><p><a href="/react-native/docs/0.56/touchableopacity"><strong>TouchableOpacity</strong></a> can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down.</p></li>
|
||||
<li><p>If you need to handle a tap gesture but you don't want any feedback to be displayed, use <a href="/react-native/docs/0.56/touchablewithoutfeedback"><strong>TouchableWithoutFeedback</strong></a>.</p></li>
|
||||
<li><p>Generally, you can use <a href="/react-native/docs/touchablehighlight"><strong>TouchableHighlight</strong></a> anywhere you would use a button or link on web. The view's background will be darkened when the user presses down on the button.</p></li>
|
||||
<li><p>You may consider using <a href="/react-native/docs/touchablenativefeedback"><strong>TouchableNativeFeedback</strong></a> on Android to display ink surface reaction ripples that respond to the user's touch.</p></li>
|
||||
<li><p><a href="/react-native/docs/touchableopacity"><strong>TouchableOpacity</strong></a> can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down.</p></li>
|
||||
<li><p>If you need to handle a tap gesture but you don't want any feedback to be displayed, use <a href="/react-native/docs/touchablewithoutfeedback"><strong>TouchableWithoutFeedback</strong></a>.</p></li>
|
||||
</ul>
|
||||
<p>In some cases, you may want to detect when a user presses and holds a view for a set amount of time. These long presses can be handled by passing a function to the <code>onLongPress</code> props of any of the "Touchable" components.</p>
|
||||
<p>Let's see all of these in action:</p>
|
||||
@@ -210,7 +210,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'AwesomeProject'</span>,
|
||||
width: 880px;
|
||||
"
|
||||
></div></div></div><h2><a class="anchor" aria-hidden="true" id="scrolling-lists-swiping-pages-and-pinch-to-zoom"></a><a href="#scrolling-lists-swiping-pages-and-pinch-to-zoom" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Scrolling lists, swiping pages, and pinch-to-zoom</h2>
|
||||
<p>Another gesture commonly used in mobile apps is the swipe or pan. This gesture allows the user to scroll through a list of items, or swipe through pages of content. In order to handle these and other gestures, we'll learn <a href="/react-native/docs/0.56/using-a-scrollview">how to use a ScrollView</a> next.</p>
|
||||
<p>Another gesture commonly used in mobile apps is the swipe or pan. This gesture allows the user to scroll through a list of items, or swipe through pages of content. In order to handle these and other gestures, we'll learn <a href="/react-native/docs/using-a-scrollview">how to use a ScrollView</a> next.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/handling-text-input">← Handling Text Input</a><a class="docs-next button" href="/react-native/docs/using-a-scrollview">Using a ScrollView →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/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="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 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>
|
||||
var search = docsearch({
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Handling Touches · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive [gesture responder system](/react-native/docs/0.56/gesture-responder-system) to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Handling Touches · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive [gesture responder system](/react-native/docs/0.56/gesture-responder-system) to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Handling Touches · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive [gesture responder system](/react-native/docs/gesture-responder-system) to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button."/><meta name="docsearch:version" content="0.56"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Handling Touches · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive [gesture responder system](/react-native/docs/gesture-responder-system) to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
@@ -29,9 +29,9 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/handling-touches.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Handling Touches</h1></header><article><div><span><p>Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive <a href="/react-native/docs/0.56/gesture-responder-system">gesture responder system</a> to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button.</p>
|
||||
</script></nav></div><div class="container mainContainer"><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/handling-touches.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Handling Touches</h1></header><article><div><span><p>Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive <a href="/react-native/docs/gesture-responder-system">gesture responder system</a> to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="displaying-a-basic-button"></a><a href="#displaying-a-basic-button" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Displaying a basic button</h2>
|
||||
<p><a href="/react-native/docs/0.56/button">Button</a> provides a basic button component that is rendered nicely on all platforms. The minimal example to display a button looks like this:</p>
|
||||
<p><a href="/react-native/docs/button">Button</a> provides a basic button component that is rendered nicely on all platforms. The minimal example to display a button looks like this:</p>
|
||||
<pre><code class="hljs css languages- javascript"><Button
|
||||
onPress={() => {
|
||||
Alert.alert(<span class="hljs-string">'You tapped the button!'</span>);
|
||||
@@ -118,10 +118,10 @@ AppRegistry.registerComponent('AwesomeProject', () => ButtonBasics);
|
||||
<p>If the basic button doesn't look right for your app, you can build your own button using any of the "Touchable" components provided by React Native. The "Touchable" components provide the capability to capture tapping gestures, and can display feedback when a gesture is recognized. These components do not provide any default styling, however, so you will need to do a bit of work to get them looking nicely in your app.</p>
|
||||
<p>Which "Touchable" component you use will depend on what kind of feedback you want to provide:</p>
|
||||
<ul>
|
||||
<li><p>Generally, you can use <a href="/react-native/docs/0.56/touchablehighlight"><strong>TouchableHighlight</strong></a> anywhere you would use a button or link on web. The view's background will be darkened when the user presses down on the button.</p></li>
|
||||
<li><p>You may consider using <a href="/react-native/docs/0.56/touchablenativefeedback"><strong>TouchableNativeFeedback</strong></a> on Android to display ink surface reaction ripples that respond to the user's touch.</p></li>
|
||||
<li><p><a href="/react-native/docs/0.56/touchableopacity"><strong>TouchableOpacity</strong></a> can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down.</p></li>
|
||||
<li><p>If you need to handle a tap gesture but you don't want any feedback to be displayed, use <a href="/react-native/docs/0.56/touchablewithoutfeedback"><strong>TouchableWithoutFeedback</strong></a>.</p></li>
|
||||
<li><p>Generally, you can use <a href="/react-native/docs/touchablehighlight"><strong>TouchableHighlight</strong></a> anywhere you would use a button or link on web. The view's background will be darkened when the user presses down on the button.</p></li>
|
||||
<li><p>You may consider using <a href="/react-native/docs/touchablenativefeedback"><strong>TouchableNativeFeedback</strong></a> on Android to display ink surface reaction ripples that respond to the user's touch.</p></li>
|
||||
<li><p><a href="/react-native/docs/touchableopacity"><strong>TouchableOpacity</strong></a> can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down.</p></li>
|
||||
<li><p>If you need to handle a tap gesture but you don't want any feedback to be displayed, use <a href="/react-native/docs/touchablewithoutfeedback"><strong>TouchableWithoutFeedback</strong></a>.</p></li>
|
||||
</ul>
|
||||
<p>In some cases, you may want to detect when a user presses and holds a view for a set amount of time. These long presses can be handled by passing a function to the <code>onLongPress</code> props of any of the "Touchable" components.</p>
|
||||
<p>Let's see all of these in action:</p>
|
||||
@@ -210,7 +210,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'AwesomeProject'</span>,
|
||||
width: 880px;
|
||||
"
|
||||
></div></div></div><h2><a class="anchor" aria-hidden="true" id="scrolling-lists-swiping-pages-and-pinch-to-zoom"></a><a href="#scrolling-lists-swiping-pages-and-pinch-to-zoom" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Scrolling lists, swiping pages, and pinch-to-zoom</h2>
|
||||
<p>Another gesture commonly used in mobile apps is the swipe or pan. This gesture allows the user to scroll through a list of items, or swipe through pages of content. In order to handle these and other gestures, we'll learn <a href="/react-native/docs/0.56/using-a-scrollview">how to use a ScrollView</a> next.</p>
|
||||
<p>Another gesture commonly used in mobile apps is the swipe or pan. This gesture allows the user to scroll through a list of items, or swipe through pages of content. In order to handle these and other gestures, we'll learn <a href="/react-native/docs/using-a-scrollview">how to use a ScrollView</a> next.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/handling-text-input">← Handling Text Input</a><a class="docs-next button" href="/react-native/docs/using-a-scrollview">Using a ScrollView →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/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="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 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>
|
||||
var search = docsearch({
|
||||
|
||||
@@ -79,7 +79,7 @@ AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
|
||||
AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20FlexDimensionsBasics%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%2F%2F%20Try%20removing%20the%20%60flex%3A%201%60%20on%20the%20parent%20View.%0A%20%20%20%20%20%20%2F%2F%20The%20parent%20will%20not%20have%20dimensions%2C%20so%20the%20children%20can't%20expand.%0A%20%20%20%20%20%20%2F%2F%20What%20if%20you%20add%20%60height%3A%20300%60%20instead%20of%20%60flex%3A%201%60%3F%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%2C%20backgroundColor%3A%20'powderblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%202%2C%20backgroundColor%3A%20'skyblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%203%2C%20backgroundColor%3A%20'steelblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20FlexDimensionsBasics)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<p>After you can control a component's size, the next step is to <a href="/react-native/docs/0.56/flexbox">learn how to lay it out on the screen</a>.</p>
|
||||
<p>After you can control a component's size, the next step is to <a href="/react-native/docs/flexbox">learn how to lay it out on the screen</a>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/style">← Style</a><a class="docs-next button" href="/react-native/docs/flexbox">Layout with Flexbox →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/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="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 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>
|
||||
var search = docsearch({
|
||||
|
||||
@@ -79,7 +79,7 @@ AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
|
||||
AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);
|
||||
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20FlexDimensionsBasics%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%2F%2F%20Try%20removing%20the%20%60flex%3A%201%60%20on%20the%20parent%20View.%0A%20%20%20%20%20%20%2F%2F%20The%20parent%20will%20not%20have%20dimensions%2C%20so%20the%20children%20can't%20expand.%0A%20%20%20%20%20%20%2F%2F%20What%20if%20you%20add%20%60height%3A%20300%60%20instead%20of%20%60flex%3A%201%60%3F%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%2C%20backgroundColor%3A%20'powderblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%202%2C%20backgroundColor%3A%20'skyblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%203%2C%20backgroundColor%3A%20'steelblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20FlexDimensionsBasics)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<p>After you can control a component's size, the next step is to <a href="/react-native/docs/0.56/flexbox">learn how to lay it out on the screen</a>.</p>
|
||||
<p>After you can control a component's size, the next step is to <a href="/react-native/docs/flexbox">learn how to lay it out on the screen</a>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/style">← Style</a><a class="docs-next button" href="/react-native/docs/flexbox">Layout with Flexbox →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/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="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 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>
|
||||
var search = docsearch({
|
||||
|
||||
+17
-17
@@ -31,20 +31,20 @@
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/image-style-props.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Image Style Props</h1></header><article><div><span><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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#bordertoprightradius"><code>borderTopRightRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#backfacevisibility"><code>backfaceVisibility</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#borderbottomleftradius"><code>borderBottomLeftRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#borderbottomrightradius"><code>borderBottomRightRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#bordercolor"><code>borderColor</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#borderradius"><code>borderRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#bordertopleftradius"><code>borderTopLeftRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#backgroundcolor"><code>backgroundColor</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#borderwidth"><code>borderWidth</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#opacity"><code>opacity</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#overflow"><code>overflow</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#resizemode"><code>resizeMode</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#tintcolor"><code>tintColor</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#overlaycolor"><code>overlayColor</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#bordertoprightradius"><code>borderTopRightRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#backfacevisibility"><code>backfaceVisibility</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#borderbottomleftradius"><code>borderBottomLeftRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#borderbottomrightradius"><code>borderBottomRightRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#bordercolor"><code>borderColor</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#borderradius"><code>borderRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#bordertopleftradius"><code>borderTopLeftRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#backgroundcolor"><code>backgroundColor</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#borderwidth"><code>borderWidth</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#opacity"><code>opacity</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#overflow"><code>overflow</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#resizemode"><code>resizeMode</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#tintcolor"><code>tintColor</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#overlaycolor"><code>overlayColor</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -95,7 +95,7 @@
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="/react-native/docs/0.56/colors">color</a></td><td>No</td></tr>
|
||||
<tr><td><a href="/react-native/docs/colors">color</a></td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -125,7 +125,7 @@
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="/react-native/docs/0.56/colors">color</a></td><td>No</td></tr>
|
||||
<tr><td><a href="/react-native/docs/colors">color</a></td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -176,7 +176,7 @@
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="/react-native/docs/0.56/colors">color</a></td><td>No</td></tr>
|
||||
<tr><td><a href="/react-native/docs/colors">color</a></td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
|
||||
@@ -31,20 +31,20 @@
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/image-style-props.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Image Style Props</h1></header><article><div><span><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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#bordertoprightradius"><code>borderTopRightRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#backfacevisibility"><code>backfaceVisibility</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#borderbottomleftradius"><code>borderBottomLeftRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#borderbottomrightradius"><code>borderBottomRightRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#bordercolor"><code>borderColor</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#borderradius"><code>borderRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#bordertopleftradius"><code>borderTopLeftRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#backgroundcolor"><code>backgroundColor</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#borderwidth"><code>borderWidth</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#opacity"><code>opacity</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#overflow"><code>overflow</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#resizemode"><code>resizeMode</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#tintcolor"><code>tintColor</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image-style-props#overlaycolor"><code>overlayColor</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#bordertoprightradius"><code>borderTopRightRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#backfacevisibility"><code>backfaceVisibility</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#borderbottomleftradius"><code>borderBottomLeftRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#borderbottomrightradius"><code>borderBottomRightRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#bordercolor"><code>borderColor</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#borderradius"><code>borderRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#bordertopleftradius"><code>borderTopLeftRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#backgroundcolor"><code>backgroundColor</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#borderwidth"><code>borderWidth</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#opacity"><code>opacity</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#overflow"><code>overflow</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#resizemode"><code>resizeMode</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#tintcolor"><code>tintColor</code></a></li>
|
||||
<li><a href="/react-native/docs/image-style-props#overlaycolor"><code>overlayColor</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -95,7 +95,7 @@
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="/react-native/docs/0.56/colors">color</a></td><td>No</td></tr>
|
||||
<tr><td><a href="/react-native/docs/colors">color</a></td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -125,7 +125,7 @@
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="/react-native/docs/0.56/colors">color</a></td><td>No</td></tr>
|
||||
<tr><td><a href="/react-native/docs/colors">color</a></td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -176,7 +176,7 @@
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="/react-native/docs/0.56/colors">color</a></td><td>No</td></tr>
|
||||
<tr><td><a href="/react-native/docs/colors">color</a></td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
|
||||
+30
-30
@@ -112,33 +112,33 @@ AppRegistry.registerComponent(
|
||||
</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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/image#style"><code>style</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#blurradius"><code>blurRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#onlayout"><code>onLayout</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#onload"><code>onLoad</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#onloadend"><code>onLoadEnd</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#onloadstart"><code>onLoadStart</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#resizemode"><code>resizeMode</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#source"><code>source</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#loadingindicatorsource"><code>loadingIndicatorSource</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#onerror"><code>onError</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#testid"><code>testID</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#resizemethod"><code>resizeMethod</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#accessibilitylabel"><code>accessibilityLabel</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#accessible"><code>accessible</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#capinsets"><code>capInsets</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#defaultsource"><code>defaultSource</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#onpartialload"><code>onPartialLoad</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#onprogress"><code>onProgress</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#fadeduration"><code>fadeDuration</code></a></li>
|
||||
<li><a href="/react-native/docs/image#style"><code>style</code></a></li>
|
||||
<li><a href="/react-native/docs/image#blurradius"><code>blurRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/image#onlayout"><code>onLayout</code></a></li>
|
||||
<li><a href="/react-native/docs/image#onload"><code>onLoad</code></a></li>
|
||||
<li><a href="/react-native/docs/image#onloadend"><code>onLoadEnd</code></a></li>
|
||||
<li><a href="/react-native/docs/image#onloadstart"><code>onLoadStart</code></a></li>
|
||||
<li><a href="/react-native/docs/image#resizemode"><code>resizeMode</code></a></li>
|
||||
<li><a href="/react-native/docs/image#source"><code>source</code></a></li>
|
||||
<li><a href="/react-native/docs/image#loadingindicatorsource"><code>loadingIndicatorSource</code></a></li>
|
||||
<li><a href="/react-native/docs/image#onerror"><code>onError</code></a></li>
|
||||
<li><a href="/react-native/docs/image#testid"><code>testID</code></a></li>
|
||||
<li><a href="/react-native/docs/image#resizemethod"><code>resizeMethod</code></a></li>
|
||||
<li><a href="/react-native/docs/image#accessibilitylabel"><code>accessibilityLabel</code></a></li>
|
||||
<li><a href="/react-native/docs/image#accessible"><code>accessible</code></a></li>
|
||||
<li><a href="/react-native/docs/image#capinsets"><code>capInsets</code></a></li>
|
||||
<li><a href="/react-native/docs/image#defaultsource"><code>defaultSource</code></a></li>
|
||||
<li><a href="/react-native/docs/image#onpartialload"><code>onPartialLoad</code></a></li>
|
||||
<li><a href="/react-native/docs/image#onprogress"><code>onProgress</code></a></li>
|
||||
<li><a href="/react-native/docs/image#fadeduration"><code>fadeDuration</code></a></li>
|
||||
</ul>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/image#getsize"><code>getSize</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#prefetch"><code>prefetch</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#abortprefetch"><code>abortPrefetch</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#querycache"><code>queryCache</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#resolveassetsource"><code>resolveAssetSource</code></a></li>
|
||||
<li><a href="/react-native/docs/image#getsize"><code>getSize</code></a></li>
|
||||
<li><a href="/react-native/docs/image#prefetch"><code>prefetch</code></a></li>
|
||||
<li><a href="/react-native/docs/image#abortprefetch"><code>abortPrefetch</code></a></li>
|
||||
<li><a href="/react-native/docs/image#querycache"><code>queryCache</code></a></li>
|
||||
<li><a href="/react-native/docs/image#resolveassetsource"><code>resolveAssetSource</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -154,22 +154,22 @@ AppRegistry.registerComponent(
|
||||
</tbody>
|
||||
</table>
|
||||
<ul>
|
||||
<li><p><a href="/react-native/docs/0.56/layout-props#props">Layout Props...</a></p></li>
|
||||
<li><p><a href="/react-native/docs/0.56/shadow-props#props">Shadow Props...</a></p></li>
|
||||
<li><p><a href="/react-native/docs/0.56/transforms#props">Transforms...</a></p></li>
|
||||
<li><p><a href="/react-native/docs/layout-props#props">Layout Props...</a></p></li>
|
||||
<li><p><a href="/react-native/docs/shadow-props#props">Shadow Props...</a></p></li>
|
||||
<li><p><a href="/react-native/docs/transforms#props">Transforms...</a></p></li>
|
||||
<li><p><strong><code>borderTopRightRadius</code></strong>: number</p></li>
|
||||
<li><p><strong><code>backfaceVisibility</code></strong>: enum('visible', 'hidden')</p></li>
|
||||
<li><p><strong><code>borderBottomLeftRadius</code></strong>: number</p></li>
|
||||
<li><p><strong><code>borderBottomRightRadius</code></strong>: number</p></li>
|
||||
<li><p><strong><code>borderColor</code></strong>: <a href="/react-native/docs/0.56/colors">color</a></p></li>
|
||||
<li><p><strong><code>borderColor</code></strong>: <a href="/react-native/docs/colors">color</a></p></li>
|
||||
<li><p><strong><code>borderRadius</code></strong>: number</p></li>
|
||||
<li><p><strong><code>borderTopLeftRadius</code></strong>: number</p></li>
|
||||
<li><p><strong><code>backgroundColor</code></strong>: <a href="/react-native/docs/0.56/colors">color</a></p></li>
|
||||
<li><p><strong><code>backgroundColor</code></strong>: <a href="/react-native/docs/colors">color</a></p></li>
|
||||
<li><p><strong><code>borderWidth</code></strong>: number</p></li>
|
||||
<li><p><strong><code>opacity</code></strong>: number</p></li>
|
||||
<li><p><strong><code>overflow</code></strong>: enum('visible', 'hidden')</p></li>
|
||||
<li><p><strong><code>resizeMode</code></strong>: Object.keys(ImageResizeMode)</p></li>
|
||||
<li><p><strong><code>tintColor</code></strong>: <a href="/react-native/docs/0.56/colors">color</a></p>
|
||||
<li><p><strong><code>tintColor</code></strong>: <a href="/react-native/docs/colors">color</a></p>
|
||||
<p>Changes the color of all the non-transparent pixels to the tintColor.</p></li>
|
||||
<li><p><strong><code>overlayColor</code></strong>: string (<em>Android</em>)</p>
|
||||
<p>When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners:</p>
|
||||
|
||||
+30
-30
@@ -112,33 +112,33 @@ AppRegistry.registerComponent(
|
||||
</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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/image#style"><code>style</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#blurradius"><code>blurRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#onlayout"><code>onLayout</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#onload"><code>onLoad</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#onloadend"><code>onLoadEnd</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#onloadstart"><code>onLoadStart</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#resizemode"><code>resizeMode</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#source"><code>source</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#loadingindicatorsource"><code>loadingIndicatorSource</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#onerror"><code>onError</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#testid"><code>testID</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#resizemethod"><code>resizeMethod</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#accessibilitylabel"><code>accessibilityLabel</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#accessible"><code>accessible</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#capinsets"><code>capInsets</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#defaultsource"><code>defaultSource</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#onpartialload"><code>onPartialLoad</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#onprogress"><code>onProgress</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#fadeduration"><code>fadeDuration</code></a></li>
|
||||
<li><a href="/react-native/docs/image#style"><code>style</code></a></li>
|
||||
<li><a href="/react-native/docs/image#blurradius"><code>blurRadius</code></a></li>
|
||||
<li><a href="/react-native/docs/image#onlayout"><code>onLayout</code></a></li>
|
||||
<li><a href="/react-native/docs/image#onload"><code>onLoad</code></a></li>
|
||||
<li><a href="/react-native/docs/image#onloadend"><code>onLoadEnd</code></a></li>
|
||||
<li><a href="/react-native/docs/image#onloadstart"><code>onLoadStart</code></a></li>
|
||||
<li><a href="/react-native/docs/image#resizemode"><code>resizeMode</code></a></li>
|
||||
<li><a href="/react-native/docs/image#source"><code>source</code></a></li>
|
||||
<li><a href="/react-native/docs/image#loadingindicatorsource"><code>loadingIndicatorSource</code></a></li>
|
||||
<li><a href="/react-native/docs/image#onerror"><code>onError</code></a></li>
|
||||
<li><a href="/react-native/docs/image#testid"><code>testID</code></a></li>
|
||||
<li><a href="/react-native/docs/image#resizemethod"><code>resizeMethod</code></a></li>
|
||||
<li><a href="/react-native/docs/image#accessibilitylabel"><code>accessibilityLabel</code></a></li>
|
||||
<li><a href="/react-native/docs/image#accessible"><code>accessible</code></a></li>
|
||||
<li><a href="/react-native/docs/image#capinsets"><code>capInsets</code></a></li>
|
||||
<li><a href="/react-native/docs/image#defaultsource"><code>defaultSource</code></a></li>
|
||||
<li><a href="/react-native/docs/image#onpartialload"><code>onPartialLoad</code></a></li>
|
||||
<li><a href="/react-native/docs/image#onprogress"><code>onProgress</code></a></li>
|
||||
<li><a href="/react-native/docs/image#fadeduration"><code>fadeDuration</code></a></li>
|
||||
</ul>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/image#getsize"><code>getSize</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#prefetch"><code>prefetch</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#abortprefetch"><code>abortPrefetch</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#querycache"><code>queryCache</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/image#resolveassetsource"><code>resolveAssetSource</code></a></li>
|
||||
<li><a href="/react-native/docs/image#getsize"><code>getSize</code></a></li>
|
||||
<li><a href="/react-native/docs/image#prefetch"><code>prefetch</code></a></li>
|
||||
<li><a href="/react-native/docs/image#abortprefetch"><code>abortPrefetch</code></a></li>
|
||||
<li><a href="/react-native/docs/image#querycache"><code>queryCache</code></a></li>
|
||||
<li><a href="/react-native/docs/image#resolveassetsource"><code>resolveAssetSource</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -154,22 +154,22 @@ AppRegistry.registerComponent(
|
||||
</tbody>
|
||||
</table>
|
||||
<ul>
|
||||
<li><p><a href="/react-native/docs/0.56/layout-props#props">Layout Props...</a></p></li>
|
||||
<li><p><a href="/react-native/docs/0.56/shadow-props#props">Shadow Props...</a></p></li>
|
||||
<li><p><a href="/react-native/docs/0.56/transforms#props">Transforms...</a></p></li>
|
||||
<li><p><a href="/react-native/docs/layout-props#props">Layout Props...</a></p></li>
|
||||
<li><p><a href="/react-native/docs/shadow-props#props">Shadow Props...</a></p></li>
|
||||
<li><p><a href="/react-native/docs/transforms#props">Transforms...</a></p></li>
|
||||
<li><p><strong><code>borderTopRightRadius</code></strong>: number</p></li>
|
||||
<li><p><strong><code>backfaceVisibility</code></strong>: enum('visible', 'hidden')</p></li>
|
||||
<li><p><strong><code>borderBottomLeftRadius</code></strong>: number</p></li>
|
||||
<li><p><strong><code>borderBottomRightRadius</code></strong>: number</p></li>
|
||||
<li><p><strong><code>borderColor</code></strong>: <a href="/react-native/docs/0.56/colors">color</a></p></li>
|
||||
<li><p><strong><code>borderColor</code></strong>: <a href="/react-native/docs/colors">color</a></p></li>
|
||||
<li><p><strong><code>borderRadius</code></strong>: number</p></li>
|
||||
<li><p><strong><code>borderTopLeftRadius</code></strong>: number</p></li>
|
||||
<li><p><strong><code>backgroundColor</code></strong>: <a href="/react-native/docs/0.56/colors">color</a></p></li>
|
||||
<li><p><strong><code>backgroundColor</code></strong>: <a href="/react-native/docs/colors">color</a></p></li>
|
||||
<li><p><strong><code>borderWidth</code></strong>: number</p></li>
|
||||
<li><p><strong><code>opacity</code></strong>: number</p></li>
|
||||
<li><p><strong><code>overflow</code></strong>: enum('visible', 'hidden')</p></li>
|
||||
<li><p><strong><code>resizeMode</code></strong>: Object.keys(ImageResizeMode)</p></li>
|
||||
<li><p><strong><code>tintColor</code></strong>: <a href="/react-native/docs/0.56/colors">color</a></p>
|
||||
<li><p><strong><code>tintColor</code></strong>: <a href="/react-native/docs/colors">color</a></p>
|
||||
<p>Changes the color of all the non-transparent pixels to the tintColor.</p></li>
|
||||
<li><p><strong><code>overlayColor</code></strong>: string (<em>Android</em>)</p>
|
||||
<p>When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners:</p>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/imageeditor.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageEditor</h1></header><article><div><span><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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/imageeditor#cropimage"><code>cropImage</code></a></li>
|
||||
<li><a href="/react-native/docs/imageeditor#cropimage"><code>cropImage</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/imageeditor.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageEditor</h1></header><article><div><span><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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/imageeditor#cropimage"><code>cropImage</code></a></li>
|
||||
<li><a href="/react-native/docs/imageeditor#cropimage"><code>cropImage</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -31,10 +31,10 @@
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/imagepickerios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImagePickerIOS</h1></header><article><div><span><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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/imagepickerios#canrecordvideos"><code>canRecordVideos</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/imagepickerios#canusecamera"><code>canUseCamera</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/imagepickerios#opencameradialog"><code>openCameraDialog</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/imagepickerios#openselectdialog"><code>openSelectDialog</code></a></li>
|
||||
<li><a href="/react-native/docs/imagepickerios#canrecordvideos"><code>canRecordVideos</code></a></li>
|
||||
<li><a href="/react-native/docs/imagepickerios#canusecamera"><code>canUseCamera</code></a></li>
|
||||
<li><a href="/react-native/docs/imagepickerios#opencameradialog"><code>openCameraDialog</code></a></li>
|
||||
<li><a href="/react-native/docs/imagepickerios#openselectdialog"><code>openSelectDialog</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -31,10 +31,10 @@
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/imagepickerios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImagePickerIOS</h1></header><article><div><span><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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/imagepickerios#canrecordvideos"><code>canRecordVideos</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/imagepickerios#canusecamera"><code>canUseCamera</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/imagepickerios#opencameradialog"><code>openCameraDialog</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/imagepickerios#openselectdialog"><code>openSelectDialog</code></a></li>
|
||||
<li><a href="/react-native/docs/imagepickerios#canrecordvideos"><code>canRecordVideos</code></a></li>
|
||||
<li><a href="/react-native/docs/imagepickerios#canusecamera"><code>canUseCamera</code></a></li>
|
||||
<li><a href="/react-native/docs/imagepickerios#opencameradialog"><code>openCameraDialog</code></a></li>
|
||||
<li><a href="/react-native/docs/imagepickerios#openselectdialog"><code>openSelectDialog</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
+2
-2
@@ -85,7 +85,7 @@ var icon = this.props.active
|
||||
</code></pre>
|
||||
<p>These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="network-images"></a><a href="#network-images" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Network Images</h2>
|
||||
<p>Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, <em>you will need to manually specify the dimensions of your image</em>. It's highly recommended that you use https as well in order to satisfy <a href="/react-native/docs/0.56/running-on-device#app-transport-security">App Transport Security</a> requirements on iOS.</p>
|
||||
<p>Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, <em>you will need to manually specify the dimensions of your image</em>. It's highly recommended that you use https as well in order to satisfy <a href="/react-native/docs/running-on-device#app-transport-security">App Transport Security</a> requirements on iOS.</p>
|
||||
<pre><code class="hljs css languages- javascript"><span class="hljs-comment">// GOOD</span>
|
||||
<Image source={{<span class="hljs-attr">uri</span>: <span class="hljs-string">'https://facebook.github.io/react/logo-og.png'</span>}}
|
||||
style={{<span class="hljs-attr">width</span>: <span class="hljs-number">400</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">400</span>}} />
|
||||
@@ -142,7 +142,7 @@ var icon = this.props.active
|
||||
/>
|
||||
</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>
|
||||
<p>See <a href="/react-native/docs/0.56/cameraroll">CameraRoll</a> for an example of using local resources that are outside of <code>Images.xcassets</code>.</p>
|
||||
<p>See <a href="/react-native/docs/cameraroll">CameraRoll</a> for an example of using local resources that are outside of <code>Images.xcassets</code>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="best-camera-roll-image"></a><a href="#best-camera-roll-image" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Best Camera Roll Image</h3>
|
||||
<p>iOS saves multiple sizes for the same image in your Camera Roll, it is very important to pick the one that's as close as possible for performance reasons. You wouldn't want to use the full quality 3264x2448 image as source when displaying a 200x200 thumbnail. If there's an exact match, React Native will pick it, otherwise it's going to use the first one that's at least 50% bigger in order to avoid blur when resizing from a close size. All of this is done by default so you don't have to worry about writing the tedious (and error prone) code to do it yourself.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="why-not-automatically-size-everything"></a><a href="#why-not-automatically-size-everything" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Why Not Automatically Size Everything?</h2>
|
||||
|
||||
@@ -85,7 +85,7 @@ var icon = this.props.active
|
||||
</code></pre>
|
||||
<p>These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="network-images"></a><a href="#network-images" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Network Images</h2>
|
||||
<p>Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, <em>you will need to manually specify the dimensions of your image</em>. It's highly recommended that you use https as well in order to satisfy <a href="/react-native/docs/0.56/running-on-device#app-transport-security">App Transport Security</a> requirements on iOS.</p>
|
||||
<p>Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, <em>you will need to manually specify the dimensions of your image</em>. It's highly recommended that you use https as well in order to satisfy <a href="/react-native/docs/running-on-device#app-transport-security">App Transport Security</a> requirements on iOS.</p>
|
||||
<pre><code class="hljs css languages- javascript"><span class="hljs-comment">// GOOD</span>
|
||||
<Image source={{<span class="hljs-attr">uri</span>: <span class="hljs-string">'https://facebook.github.io/react/logo-og.png'</span>}}
|
||||
style={{<span class="hljs-attr">width</span>: <span class="hljs-number">400</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">400</span>}} />
|
||||
@@ -142,7 +142,7 @@ var icon = this.props.active
|
||||
/>
|
||||
</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>
|
||||
<p>See <a href="/react-native/docs/0.56/cameraroll">CameraRoll</a> for an example of using local resources that are outside of <code>Images.xcassets</code>.</p>
|
||||
<p>See <a href="/react-native/docs/cameraroll">CameraRoll</a> for an example of using local resources that are outside of <code>Images.xcassets</code>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="best-camera-roll-image"></a><a href="#best-camera-roll-image" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Best Camera Roll Image</h3>
|
||||
<p>iOS saves multiple sizes for the same image in your Camera Roll, it is very important to pick the one that's as close as possible for performance reasons. You wouldn't want to use the full quality 3264x2448 image as source when displaying a 200x200 thumbnail. If there's an exact match, React Native will pick it, otherwise it's going to use the first one that's at least 50% bigger in order to avoid blur when resizing from a close size. All of this is done by default so you don't have to worry about writing the tedious (and error prone) code to do it yourself.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="why-not-automatically-size-everything"></a><a href="#why-not-automatically-size-everything" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Why Not Automatically Size Everything?</h2>
|
||||
|
||||
@@ -31,10 +31,10 @@
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/imagestore.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageStore</h1></header><article><div><span><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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/imagestore#hasimagefortag"><code>hasImageForTag</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/imagestore#removeimagefortag"><code>removeImageForTag</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/imagestore#addimagefrombase64"><code>addImageFromBase64</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/imagestore#getbase64fortag"><code>getBase64ForTag</code></a></li>
|
||||
<li><a href="/react-native/docs/imagestore#hasimagefortag"><code>hasImageForTag</code></a></li>
|
||||
<li><a href="/react-native/docs/imagestore#removeimagefortag"><code>removeImageForTag</code></a></li>
|
||||
<li><a href="/react-native/docs/imagestore#addimagefrombase64"><code>addImageFromBase64</code></a></li>
|
||||
<li><a href="/react-native/docs/imagestore#getbase64fortag"><code>getBase64ForTag</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -31,10 +31,10 @@
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><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/imagestore.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageStore</h1></header><article><div><span><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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/imagestore#hasimagefortag"><code>hasImageForTag</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/imagestore#removeimagefortag"><code>removeImageForTag</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/imagestore#addimagefrombase64"><code>addImageFromBase64</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/imagestore#getbase64fortag"><code>getBase64ForTag</code></a></li>
|
||||
<li><a href="/react-native/docs/imagestore#hasimagefortag"><code>hasImageForTag</code></a></li>
|
||||
<li><a href="/react-native/docs/imagestore#removeimagefortag"><code>removeImageForTag</code></a></li>
|
||||
<li><a href="/react-native/docs/imagestore#addimagefrombase64"><code>addImageFromBase64</code></a></li>
|
||||
<li><a href="/react-native/docs/imagestore#getbase64fortag"><code>getBase64ForTag</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -38,19 +38,19 @@
|
||||
<li>Choose keyboard type (e.g. email, numeric)</li>
|
||||
<li>Make sure the return button focuses the next field or submits the form</li>
|
||||
</ul>
|
||||
<p>Check out <a href="/react-native/docs/0.56/textinput"><code>TextInput</code> docs</a> for more configuration options.</p>
|
||||
<p>Check out <a href="/react-native/docs/textinput"><code>TextInput</code> docs</a> for more configuration options.</p>
|
||||
<video src="/react-native/img/textinput.mp4" autoplay loop width="320" height="430"></video>
|
||||
<p><a href="https://snack.expo.io/H1iGt2vSW">Try it on your phone</a></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="manage-layout-when-keyboard-is-visible"></a><a href="#manage-layout-when-keyboard-is-visible" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Manage layout when keyboard is visible</h2>
|
||||
<p>Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the <a href="/react-native/docs/0.56/keyboardavoidingview"><code>KeyboardAvoidingView</code> component</a>.</p>
|
||||
<p>Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the <a href="/react-native/docs/keyboardavoidingview"><code>KeyboardAvoidingView</code> component</a>.</p>
|
||||
<video src="/react-native/img/keyboardavoidingview.mp4" autoplay loop width="320" height="448"></video>
|
||||
<p><a href="https://snack.expo.io/ryxRkwnrW">Try it on your phone</a></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="make-tappable-areas-larger"></a><a href="#make-tappable-areas-larger" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Make tappable areas larger</h2>
|
||||
<p>On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, <code>padding</code>, <code>minWidth</code> and <code>minHeight</code> style values can be useful for that. Alternatively, you can use <a href="/react-native/docs/0.56/touchablewithoutfeedback#hitslop"><code>hitSlop</code> prop</a> to increase interactive area without affecting the layout. Here's a demo:</p>
|
||||
<p>On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, <code>padding</code>, <code>minWidth</code> and <code>minHeight</code> style values can be useful for that. Alternatively, you can use <a href="/react-native/docs/touchablewithoutfeedback#hitslop"><code>hitSlop</code> prop</a> to increase interactive area without affecting the layout. Here's a demo:</p>
|
||||
<video src="/react-native/img/hitslop.mp4" autoplay loop width="320" height="120"></video>
|
||||
<p><a href="https://snack.expo.io/rJPwCt4HZ">Try it on your phone</a></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="use-android-ripple"></a><a href="#use-android-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>Use Android Ripple</h2>
|
||||
<p>Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the <a href="/react-native/docs/0.56/touchablenativefeedback"><code>TouchableNativeFeedback</code> component</a>. Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like <a href="https://github.com/react-community/react-native-platform-touchable">react-native-platform-touchable</a> to handle the platform differences for you.</p>
|
||||
<p>Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the <a href="/react-native/docs/touchablenativefeedback"><code>TouchableNativeFeedback</code> component</a>. Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like <a href="https://github.com/react-community/react-native-platform-touchable">react-native-platform-touchable</a> to handle the platform differences for you.</p>
|
||||
<video src="/react-native/img/ripple.mp4" autoplay loop width="320"></video>
|
||||
<p><a href="https://snack.expo.io/SJywqe3rZ">Try it on your phone</a></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="screen-orientation-lock"></a><a href="#screen-orientation-lock" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Screen orientation lock</h2>
|
||||
|
||||
@@ -38,19 +38,19 @@
|
||||
<li>Choose keyboard type (e.g. email, numeric)</li>
|
||||
<li>Make sure the return button focuses the next field or submits the form</li>
|
||||
</ul>
|
||||
<p>Check out <a href="/react-native/docs/0.56/textinput"><code>TextInput</code> docs</a> for more configuration options.</p>
|
||||
<p>Check out <a href="/react-native/docs/textinput"><code>TextInput</code> docs</a> for more configuration options.</p>
|
||||
<video src="/react-native/img/textinput.mp4" autoplay loop width="320" height="430"></video>
|
||||
<p><a href="https://snack.expo.io/H1iGt2vSW">Try it on your phone</a></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="manage-layout-when-keyboard-is-visible"></a><a href="#manage-layout-when-keyboard-is-visible" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Manage layout when keyboard is visible</h2>
|
||||
<p>Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the <a href="/react-native/docs/0.56/keyboardavoidingview"><code>KeyboardAvoidingView</code> component</a>.</p>
|
||||
<p>Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the <a href="/react-native/docs/keyboardavoidingview"><code>KeyboardAvoidingView</code> component</a>.</p>
|
||||
<video src="/react-native/img/keyboardavoidingview.mp4" autoplay loop width="320" height="448"></video>
|
||||
<p><a href="https://snack.expo.io/ryxRkwnrW">Try it on your phone</a></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="make-tappable-areas-larger"></a><a href="#make-tappable-areas-larger" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Make tappable areas larger</h2>
|
||||
<p>On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, <code>padding</code>, <code>minWidth</code> and <code>minHeight</code> style values can be useful for that. Alternatively, you can use <a href="/react-native/docs/0.56/touchablewithoutfeedback#hitslop"><code>hitSlop</code> prop</a> to increase interactive area without affecting the layout. Here's a demo:</p>
|
||||
<p>On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, <code>padding</code>, <code>minWidth</code> and <code>minHeight</code> style values can be useful for that. Alternatively, you can use <a href="/react-native/docs/touchablewithoutfeedback#hitslop"><code>hitSlop</code> prop</a> to increase interactive area without affecting the layout. Here's a demo:</p>
|
||||
<video src="/react-native/img/hitslop.mp4" autoplay loop width="320" height="120"></video>
|
||||
<p><a href="https://snack.expo.io/rJPwCt4HZ">Try it on your phone</a></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="use-android-ripple"></a><a href="#use-android-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>Use Android Ripple</h2>
|
||||
<p>Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the <a href="/react-native/docs/0.56/touchablenativefeedback"><code>TouchableNativeFeedback</code> component</a>. Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like <a href="https://github.com/react-community/react-native-platform-touchable">react-native-platform-touchable</a> to handle the platform differences for you.</p>
|
||||
<p>Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the <a href="/react-native/docs/touchablenativefeedback"><code>TouchableNativeFeedback</code> component</a>. Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like <a href="https://github.com/react-community/react-native-platform-touchable">react-native-platform-touchable</a> to handle the platform differences for you.</p>
|
||||
<video src="/react-native/img/ripple.mp4" autoplay loop width="320"></video>
|
||||
<p><a href="https://snack.expo.io/SJywqe3rZ">Try it on your phone</a></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="screen-orientation-lock"></a><a href="#screen-orientation-lock" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Screen orientation lock</h2>
|
||||
|
||||
@@ -73,9 +73,9 @@ AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);
|
||||
<p>This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a <code>TextInput</code> with the <code>InputAccessoryView</code> component, and don't set a <code>nativeID</code>. For an example, look at <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/InputAccessoryViewExample.js">InputAccessoryViewExample.js</a>.</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/inputaccessoryview#backgroundcolor"><code>backgroundColor</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/inputaccessoryview#nativeid"><code>nativeID</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/inputaccessoryview#style"><code>style</code></a></li>
|
||||
<li><a href="/react-native/docs/inputaccessoryview#backgroundcolor"><code>backgroundColor</code></a></li>
|
||||
<li><a href="/react-native/docs/inputaccessoryview#nativeid"><code>nativeID</code></a></li>
|
||||
<li><a href="/react-native/docs/inputaccessoryview#style"><code>style</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -86,7 +86,7 @@ AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="/react-native/docs/0.56/colors">color</a></td><td>No</td></tr>
|
||||
<tr><td><a href="/react-native/docs/colors">color</a></td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -107,7 +107,7 @@ AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="/react-native/docs/0.56/view-style-props">style</a></td><td>No</td></tr>
|
||||
<tr><td><a href="/react-native/docs/view-style-props">style</a></td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/image">← Image</a><a class="docs-next button" href="/react-native/docs/keyboardavoidingview">KeyboardAvoidingView →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/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="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 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'));
|
||||
|
||||
@@ -73,9 +73,9 @@ AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);
|
||||
<p>This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a <code>TextInput</code> with the <code>InputAccessoryView</code> component, and don't set a <code>nativeID</code>. For an example, look at <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/InputAccessoryViewExample.js">InputAccessoryViewExample.js</a>.</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/inputaccessoryview#backgroundcolor"><code>backgroundColor</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/inputaccessoryview#nativeid"><code>nativeID</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/inputaccessoryview#style"><code>style</code></a></li>
|
||||
<li><a href="/react-native/docs/inputaccessoryview#backgroundcolor"><code>backgroundColor</code></a></li>
|
||||
<li><a href="/react-native/docs/inputaccessoryview#nativeid"><code>nativeID</code></a></li>
|
||||
<li><a href="/react-native/docs/inputaccessoryview#style"><code>style</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
@@ -86,7 +86,7 @@ AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="/react-native/docs/0.56/colors">color</a></td><td>No</td></tr>
|
||||
<tr><td><a href="/react-native/docs/colors">color</a></td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -107,7 +107,7 @@ AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="/react-native/docs/0.56/view-style-props">style</a></td><td>No</td></tr>
|
||||
<tr><td><a href="/react-native/docs/view-style-props">style</a></td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/image">← Image</a><a class="docs-next button" href="/react-native/docs/keyboardavoidingview">KeyboardAvoidingView →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discuss.reactjs.org" target="_blank">Discussion Forum</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a></div><div><h5>More</h5><a href="/react-native/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="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2018 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'));
|
||||
|
||||
@@ -132,11 +132,11 @@
|
||||
<p><block class="objc swift android" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="prerequisites"></a><a href="#prerequisites" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Prerequisites</h2>
|
||||
<p><block class="objc swift" /></p>
|
||||
<p>Follow the instructions for building apps with native code from the <a href="/react-native/docs/0.56/getting-started">Getting Started guide</a> to configure your development environment for building React Native apps for iOS.</p>
|
||||
<p>Follow the instructions for building apps with native code from the <a href="/react-native/docs/getting-started">Getting Started guide</a> to configure your development environment for building React Native apps for iOS.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="1-set-up-directory-structure"></a><a href="#1-set-up-directory-structure" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Set up directory structure</h3>
|
||||
<p>To ensure a smooth experience, create a new folder for your integrated React Native project, then copy your existing iOS project to a <code>/ios</code> subfolder.</p>
|
||||
<p><block class="android" /></p>
|
||||
<p>Follow the instructions for building apps with native code from the <a href="/react-native/docs/0.56/getting-started">Getting Started guide</a> to configure your development environment for building React Native apps for Android.</p>
|
||||
<p>Follow the instructions for building apps with native code from the <a href="/react-native/docs/getting-started">Getting Started guide</a> to configure your development environment for building React Native apps for Android.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="1-set-up-directory-structure-1"></a><a href="#1-set-up-directory-structure-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>1. Set up directory structure</h3>
|
||||
<p>To ensure a smooth experience, create a new folder for your integrated React Native project, then copy your existing Android project to an <code>/android</code> subfolder.</p>
|
||||
<p><block class="objc swift android" /></p>
|
||||
@@ -676,7 +676,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span
|
||||
<p>Now just create a release build of your native app from within Android Studio as usual and you should be good to go!</p>
|
||||
<p><block class="objc swift android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 what?</h3>
|
||||
<p>At this point you can continue developing your app as usual. Refer to our <a href="/react-native/docs/0.56/debugging">debugging</a> and <a href="/react-native/docs/0.56/running-on-device">deployment</a> docs to learn more about working with React Native.</p>
|
||||
<p>At this point you can continue developing your app as usual. Refer to our <a href="/react-native/docs/debugging">debugging</a> and <a href="/react-native/docs/running-on-device">deployment</a> docs to learn more about working with React Native.</p>
|
||||
<script>
|
||||
function displayTab(type, value) {
|
||||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||
|
||||
@@ -132,11 +132,11 @@
|
||||
<p><block class="objc swift android" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="prerequisites"></a><a href="#prerequisites" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Prerequisites</h2>
|
||||
<p><block class="objc swift" /></p>
|
||||
<p>Follow the instructions for building apps with native code from the <a href="/react-native/docs/0.56/getting-started">Getting Started guide</a> to configure your development environment for building React Native apps for iOS.</p>
|
||||
<p>Follow the instructions for building apps with native code from the <a href="/react-native/docs/getting-started">Getting Started guide</a> to configure your development environment for building React Native apps for iOS.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="1-set-up-directory-structure"></a><a href="#1-set-up-directory-structure" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Set up directory structure</h3>
|
||||
<p>To ensure a smooth experience, create a new folder for your integrated React Native project, then copy your existing iOS project to a <code>/ios</code> subfolder.</p>
|
||||
<p><block class="android" /></p>
|
||||
<p>Follow the instructions for building apps with native code from the <a href="/react-native/docs/0.56/getting-started">Getting Started guide</a> to configure your development environment for building React Native apps for Android.</p>
|
||||
<p>Follow the instructions for building apps with native code from the <a href="/react-native/docs/getting-started">Getting Started guide</a> to configure your development environment for building React Native apps for Android.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="1-set-up-directory-structure-1"></a><a href="#1-set-up-directory-structure-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>1. Set up directory structure</h3>
|
||||
<p>To ensure a smooth experience, create a new folder for your integrated React Native project, then copy your existing Android project to an <code>/android</code> subfolder.</p>
|
||||
<p><block class="objc swift android" /></p>
|
||||
@@ -676,7 +676,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span
|
||||
<p>Now just create a release build of your native app from within Android Studio as usual and you should be good to go!</p>
|
||||
<p><block class="objc swift android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 what?</h3>
|
||||
<p>At this point you can continue developing your app as usual. Refer to our <a href="/react-native/docs/0.56/debugging">debugging</a> and <a href="/react-native/docs/0.56/running-on-device">deployment</a> docs to learn more about working with React Native.</p>
|
||||
<p>At this point you can continue developing your app as usual. Refer to our <a href="/react-native/docs/debugging">debugging</a> and <a href="/react-native/docs/running-on-device">deployment</a> docs to learn more about working with React Native.</p>
|
||||
<script>
|
||||
function displayTab(type, value) {
|
||||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||
|
||||
@@ -53,15 +53,15 @@ InteractionManager.clearInteractionHandle(handle);
|
||||
<p>By default, queued tasks are executed together in a loop in one <code>setImmediate</code> batch. If <code>setDeadline</code> is called with a positive number, then tasks will only be executed until the deadline (in terms of js event loop run time) approaches, at which point execution will yield via setTimeout, allowing events such as touches to start interactions and block queued tasks from executing, making apps more responsive.</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/interactionmanager#runafterinteractions"><code>runAfterInteractions</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/interactionmanager#createinteractionhandle"><code>createInteractionHandle</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/interactionmanager#clearinteractionhandle"><code>clearInteractionHandle</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/interactionmanager#setdeadline"><code>setDeadline</code></a></li>
|
||||
<li><a href="/react-native/docs/interactionmanager#runafterinteractions"><code>runAfterInteractions</code></a></li>
|
||||
<li><a href="/react-native/docs/interactionmanager#createinteractionhandle"><code>createInteractionHandle</code></a></li>
|
||||
<li><a href="/react-native/docs/interactionmanager#clearinteractionhandle"><code>clearInteractionHandle</code></a></li>
|
||||
<li><a href="/react-native/docs/interactionmanager#setdeadline"><code>setDeadline</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/interactionmanager#events"><code>Events</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/interactionmanager#addlistener"><code>addListener</code></a></li>
|
||||
<li><a href="/react-native/docs/interactionmanager#events"><code>Events</code></a></li>
|
||||
<li><a href="/react-native/docs/interactionmanager#addlistener"><code>addListener</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
@@ -53,15 +53,15 @@ InteractionManager.clearInteractionHandle(handle);
|
||||
<p>By default, queued tasks are executed together in a loop in one <code>setImmediate</code> batch. If <code>setDeadline</code> is called with a positive number, then tasks will only be executed until the deadline (in terms of js event loop run time) approaches, at which point execution will yield via setTimeout, allowing events such as touches to start interactions and block queued tasks from executing, making apps more responsive.</p>
|
||||
<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>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/interactionmanager#runafterinteractions"><code>runAfterInteractions</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/interactionmanager#createinteractionhandle"><code>createInteractionHandle</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/interactionmanager#clearinteractionhandle"><code>clearInteractionHandle</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/interactionmanager#setdeadline"><code>setDeadline</code></a></li>
|
||||
<li><a href="/react-native/docs/interactionmanager#runafterinteractions"><code>runAfterInteractions</code></a></li>
|
||||
<li><a href="/react-native/docs/interactionmanager#createinteractionhandle"><code>createInteractionHandle</code></a></li>
|
||||
<li><a href="/react-native/docs/interactionmanager#clearinteractionhandle"><code>clearInteractionHandle</code></a></li>
|
||||
<li><a href="/react-native/docs/interactionmanager#setdeadline"><code>setDeadline</code></a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.56/interactionmanager#events"><code>Events</code></a></li>
|
||||
<li><a href="/react-native/docs/0.56/interactionmanager#addlistener"><code>addListener</code></a></li>
|
||||
<li><a href="/react-native/docs/interactionmanager#events"><code>Events</code></a></li>
|
||||
<li><a href="/react-native/docs/interactionmanager#addlistener"><code>addListener</code></a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<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>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user