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 9f8b379b27d4ab6d328be388bdaec2d88f1c7667
This commit is contained in:
Website Deployment Script
@@ -272,8 +272,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keys</td><td>Array<string></td><td>Yes</td><td>Array of key for the items to get.</td></tr>
|
||||
<tr><td>callback</td><td>(errors, result) => void</td><td>No</td><td>Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keys</td><td><code>Array<string></code></td><td>Yes</td><td>Array of key for the items to get.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors, result) => void</code></td><td>No</td><td>Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -290,7 +290,7 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keyValuePairs</td><td>Array<Array<string>></td><td>Yes</td><td>Array of key-value array for the items to set.</td></tr>
|
||||
<tr><td>keyValuePairs</td><td><code>Array<Array<string>></code></td><td>Yes</td><td>Array of key-value array for the items to set.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -305,8 +305,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keys</td><td>Array<string></td><td>Yes</td><td>Array of key for the items to delete.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keys</td><td><code>Array<string></code></td><td>Yes</td><td>Array of key for the items to delete.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors) => void</code></td><td>No</td><td>Function that will be called an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -321,8 +321,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keyValuePairs</td><td>Array<Array<string>></td><td>Yes</td><td>Array of key-value array for the items to merge.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keyValuePairs</td><td><code>Array<Array<string>></code></td><td>Yes</td><td>Array of key-value array for the items to merge.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors) => void</code></td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#getitem"><code>getItem()</code></a></li><li><a href="#setitem"><code>setItem()</code></a></li><li><a href="#removeitem"><code>removeItem()</code></a></li><li><a href="#mergeitem"><code>mergeItem()</code></a></li><li><a href="#clear"><code>clear()</code></a></li><li><a href="#getallkeys"><code>getAllKeys()</code></a></li><li><a href="#flushgetrequests"><code>flushGetRequests()</code></a></li><li><a href="#multiget"><code>multiGet()</code></a></li><li><a href="#multiset"><code>multiSet()</code></a></li><li><a href="#multiremove"><code>multiRemove()</code></a></li><li><a href="#multimerge"><code>multiMerge()</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
|
||||
@@ -272,8 +272,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keys</td><td>Array<string></td><td>Yes</td><td>Array of key for the items to get.</td></tr>
|
||||
<tr><td>callback</td><td>(errors, result) => void</td><td>No</td><td>Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keys</td><td><code>Array<string></code></td><td>Yes</td><td>Array of key for the items to get.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors, result) => void</code></td><td>No</td><td>Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -290,7 +290,7 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keyValuePairs</td><td>Array<Array<string>></td><td>Yes</td><td>Array of key-value array for the items to set.</td></tr>
|
||||
<tr><td>keyValuePairs</td><td><code>Array<Array<string>></code></td><td>Yes</td><td>Array of key-value array for the items to set.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -305,8 +305,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keys</td><td>Array<string></td><td>Yes</td><td>Array of key for the items to delete.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keys</td><td><code>Array<string></code></td><td>Yes</td><td>Array of key for the items to delete.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors) => void</code></td><td>No</td><td>Function that will be called an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -321,8 +321,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keyValuePairs</td><td>Array<Array<string>></td><td>Yes</td><td>Array of key-value array for the items to merge.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keyValuePairs</td><td><code>Array<Array<string>></code></td><td>Yes</td><td>Array of key-value array for the items to merge.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors) => void</code></td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#getitem"><code>getItem()</code></a></li><li><a href="#setitem"><code>setItem()</code></a></li><li><a href="#removeitem"><code>removeItem()</code></a></li><li><a href="#mergeitem"><code>mergeItem()</code></a></li><li><a href="#clear"><code>clear()</code></a></li><li><a href="#getallkeys"><code>getAllKeys()</code></a></li><li><a href="#flushgetrequests"><code>flushGetRequests()</code></a></li><li><a href="#multiget"><code>multiGet()</code></a></li><li><a href="#multiset"><code>multiSet()</code></a></li><li><a href="#multiremove"><code>multiRemove()</code></a></li><li><a href="#multimerge"><code>multiMerge()</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
|
||||
@@ -145,11 +145,11 @@
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>RCTTVRemoteHandler</code>, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by <code>RCTTVNavigationEventEmitter</code> (a subclass of <code>RCTEventEmitter</code>), that fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="android"></p>
|
||||
<p><block class="android" /></p>
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>ReactAndroidTVRootViewHelper</code>, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="ios android"></p>
|
||||
<p><block class="ios android" /></p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> TVEventHandler <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'TVEventHandler'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">Game2048</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -145,11 +145,11 @@
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>RCTTVRemoteHandler</code>, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by <code>RCTTVNavigationEventEmitter</code> (a subclass of <code>RCTEventEmitter</code>), that fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="android"></p>
|
||||
<p><block class="android" /></p>
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>ReactAndroidTVRootViewHelper</code>, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="ios android"></p>
|
||||
<p><block class="ios android" /></p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> TVEventHandler <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'TVEventHandler'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">Game2048</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -213,7 +213,7 @@
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<a href="./backhandler">
|
||||
<h3>BackHandler</a></h3>
|
||||
<h3>BackHandler</h3>
|
||||
<p>Detect hardware button presses for back navigation.</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -231,7 +231,7 @@
|
||||
</div>
|
||||
<div class="component">
|
||||
<a href="./permissionsandroid">
|
||||
<h3>PermissionsAndroid</a></h3>
|
||||
<h3>PermissionsAndroid</h3>
|
||||
<p>Provides access to the permissions model introduced in Android M.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -213,7 +213,7 @@
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<a href="./backhandler">
|
||||
<h3>BackHandler</a></h3>
|
||||
<h3>BackHandler</h3>
|
||||
<p>Detect hardware button presses for back navigation.</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -231,7 +231,7 @@
|
||||
</div>
|
||||
<div class="component">
|
||||
<a href="./permissionsandroid">
|
||||
<h3>PermissionsAndroid</a></h3>
|
||||
<h3>PermissionsAndroid</h3>
|
||||
<p>Provides access to the permissions model introduced in Android M.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
<p><h3>That's it!</h3></p>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native app.</p>
|
||||
<p><center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><h2>Now what?</h3></p>
|
||||
<p><h2>Now what?</h2></p>
|
||||
<p>Expo also has <a href="https://docs.expo.io">docs</a> you can reference if you have questions specific to the tool. You can also ask for help at <a href="https://forums.expo.io">Expo forums</a>.</p>
|
||||
<p>These tools help you get started quickly, but before committing to building your app with Expo CLI, <a href="https://docs.expo.io/versions/latest/introduction/why-not-expo/">read about the limitations</a>.</p>
|
||||
<p>If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it:</p>
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
<p><h3>That's it!</h3></p>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native app.</p>
|
||||
<p><center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><h2>Now what?</h3></p>
|
||||
<p><h2>Now what?</h2></p>
|
||||
<p>Expo also has <a href="https://docs.expo.io">docs</a> you can reference if you have questions specific to the tool. You can also ask for help at <a href="https://forums.expo.io">Expo forums</a>.</p>
|
||||
<p>These tools help you get started quickly, but before committing to building your app with Expo CLI, <a href="https://docs.expo.io/versions/latest/introduction/why-not-expo/">read about the limitations</a>.</p>
|
||||
<p>If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it:</p>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="views-and-mobile-development"></a><a href="#views-and-mobile-development" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Views and mobile development</h2>
|
||||
<p>In Android and iOS development, a <strong>view</strong> is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!</p>
|
||||
<figure>
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views.">
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views." />
|
||||
<figcaption>Just a sampling of the many views used in Android and iOS apps.</figcaption>
|
||||
</figure>
|
||||
<h2><a class="anchor" aria-hidden="true" id="native-components"></a><a href="#native-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>Native Components</h2>
|
||||
@@ -82,7 +82,7 @@
|
||||
"
|
||||
></div></div></div><hr>
|
||||
<p>Because React Native uses the same API structure as React components, you’ll need to understand React component APIs to get started. The <a href="intro-react">next section</a> makes for a quick introduction or refresher on the topic. However, if you’re already familiar with React, feel free to <a href="handling-text-input">skip ahead</a>.</p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native."></p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native." /></p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#views-and-mobile-development">Views and mobile development</a></li><li><a href="#native-components">Native Components</a></li><li><a href="#core-components">Core Components</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="views-and-mobile-development"></a><a href="#views-and-mobile-development" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Views and mobile development</h2>
|
||||
<p>In Android and iOS development, a <strong>view</strong> is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!</p>
|
||||
<figure>
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views.">
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views." />
|
||||
<figcaption>Just a sampling of the many views used in Android and iOS apps.</figcaption>
|
||||
</figure>
|
||||
<h2><a class="anchor" aria-hidden="true" id="native-components"></a><a href="#native-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>Native Components</h2>
|
||||
@@ -82,7 +82,7 @@
|
||||
"
|
||||
></div></div></div><hr>
|
||||
<p>Because React Native uses the same API structure as React components, you’ll need to understand React component APIs to get started. The <a href="intro-react">next section</a> makes for a quick introduction or refresher on the topic. However, if you’re already familiar with React, feel free to <a href="handling-text-input">skip ahead</a>.</p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native."></p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native." /></p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#views-and-mobile-development">Views and mobile development</a></li><li><a href="#native-components">Native Components</a></li><li><a href="#core-components">Core Components</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
@@ -429,9 +429,9 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
</span></code></pre>
|
||||
<p><code>callNativeMethod</code> is our custom iOS method which for example changes the <code>backgroundColor</code> which is exposed through <code>MyNativeView</code>. This method uses <code>UIManager.dispatchViewManagerCommand</code> which needs 3 parameters:</p>
|
||||
<ul>
|
||||
<li>(nonnull NSNumber *)reactTag - id of react view.</li>
|
||||
<li>commandID:(NSInteger)commandID - Id of the native method that should be called</li>
|
||||
<li>commandArgs:(NSArray<id> *)commandArgs - Args of the native method that we can pass from JS to native.</li>
|
||||
<li><code>(nonnull NSNumber \*)reactTag</code> - id of react view.</li>
|
||||
<li><code>commandID:(NSInteger)commandID</code> - Id of the native method that should be called</li>
|
||||
<li><code>commandArgs:(NSArray<id> \*)commandArgs</code> - Args of the native method that we can pass from JS to native.</li>
|
||||
</ul>
|
||||
<p><code>RNCMyNativeViewManager.m</code></p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTViewManager.h></span></span>
|
||||
|
||||
@@ -429,9 +429,9 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
</span></code></pre>
|
||||
<p><code>callNativeMethod</code> is our custom iOS method which for example changes the <code>backgroundColor</code> which is exposed through <code>MyNativeView</code>. This method uses <code>UIManager.dispatchViewManagerCommand</code> which needs 3 parameters:</p>
|
||||
<ul>
|
||||
<li>(nonnull NSNumber *)reactTag - id of react view.</li>
|
||||
<li>commandID:(NSInteger)commandID - Id of the native method that should be called</li>
|
||||
<li>commandArgs:(NSArray<id> *)commandArgs - Args of the native method that we can pass from JS to native.</li>
|
||||
<li><code>(nonnull NSNumber \*)reactTag</code> - id of react view.</li>
|
||||
<li><code>commandID:(NSInteger)commandID</code> - Id of the native method that should be called</li>
|
||||
<li><code>commandArgs:(NSArray<id> \*)commandArgs</code> - Args of the native method that we can pass from JS to native.</li>
|
||||
</ul>
|
||||
<p><code>RNCMyNativeViewManager.m</code></p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTViewManager.h></span></span>
|
||||
|
||||
@@ -88,9 +88,9 @@
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</a>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</a>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</button>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</button>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</button>
|
||||
</span>
|
||||
</div>
|
||||
<p><block class="linux windows ios" /></p>
|
||||
|
||||
@@ -88,9 +88,9 @@
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</a>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</a>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</button>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</button>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</button>
|
||||
</span>
|
||||
</div>
|
||||
<p><block class="linux windows ios" /></p>
|
||||
|
||||
@@ -272,8 +272,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keys</td><td>Array<string></td><td>Yes</td><td>Array of key for the items to get.</td></tr>
|
||||
<tr><td>callback</td><td>(errors, result) => void</td><td>No</td><td>Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keys</td><td><code>Array<string></code></td><td>Yes</td><td>Array of key for the items to get.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors, result) => void</code></td><td>No</td><td>Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -290,7 +290,7 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keyValuePairs</td><td>Array<Array<string>></td><td>Yes</td><td>Array of key-value array for the items to set.</td></tr>
|
||||
<tr><td>keyValuePairs</td><td><code>Array<Array<string>></code></td><td>Yes</td><td>Array of key-value array for the items to set.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -305,8 +305,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keys</td><td>Array<string></td><td>Yes</td><td>Array of key for the items to delete.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keys</td><td><code>Array<string></code></td><td>Yes</td><td>Array of key for the items to delete.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors) => void</code></td><td>No</td><td>Function that will be called an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -321,8 +321,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keyValuePairs</td><td>Array<Array<string>></td><td>Yes</td><td>Array of key-value array for the items to merge.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keyValuePairs</td><td><code>Array<Array<string>></code></td><td>Yes</td><td>Array of key-value array for the items to merge.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors) => void</code></td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#getitem"><code>getItem()</code></a></li><li><a href="#setitem"><code>setItem()</code></a></li><li><a href="#removeitem"><code>removeItem()</code></a></li><li><a href="#mergeitem"><code>mergeItem()</code></a></li><li><a href="#clear"><code>clear()</code></a></li><li><a href="#getallkeys"><code>getAllKeys()</code></a></li><li><a href="#flushgetrequests"><code>flushGetRequests()</code></a></li><li><a href="#multiget"><code>multiGet()</code></a></li><li><a href="#multiset"><code>multiSet()</code></a></li><li><a href="#multiremove"><code>multiRemove()</code></a></li><li><a href="#multimerge"><code>multiMerge()</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
|
||||
@@ -272,8 +272,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keys</td><td>Array<string></td><td>Yes</td><td>Array of key for the items to get.</td></tr>
|
||||
<tr><td>callback</td><td>(errors, result) => void</td><td>No</td><td>Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keys</td><td><code>Array<string></code></td><td>Yes</td><td>Array of key for the items to get.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors, result) => void</code></td><td>No</td><td>Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -290,7 +290,7 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keyValuePairs</td><td>Array<Array<string>></td><td>Yes</td><td>Array of key-value array for the items to set.</td></tr>
|
||||
<tr><td>keyValuePairs</td><td><code>Array<Array<string>></code></td><td>Yes</td><td>Array of key-value array for the items to set.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -305,8 +305,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keys</td><td>Array<string></td><td>Yes</td><td>Array of key for the items to delete.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keys</td><td><code>Array<string></code></td><td>Yes</td><td>Array of key for the items to delete.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors) => void</code></td><td>No</td><td>Function that will be called an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -321,8 +321,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keyValuePairs</td><td>Array<Array<string>></td><td>Yes</td><td>Array of key-value array for the items to merge.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keyValuePairs</td><td><code>Array<Array<string>></code></td><td>Yes</td><td>Array of key-value array for the items to merge.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors) => void</code></td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#getitem"><code>getItem()</code></a></li><li><a href="#setitem"><code>setItem()</code></a></li><li><a href="#removeitem"><code>removeItem()</code></a></li><li><a href="#mergeitem"><code>mergeItem()</code></a></li><li><a href="#clear"><code>clear()</code></a></li><li><a href="#getallkeys"><code>getAllKeys()</code></a></li><li><a href="#flushgetrequests"><code>flushGetRequests()</code></a></li><li><a href="#multiget"><code>multiGet()</code></a></li><li><a href="#multiset"><code>multiSet()</code></a></li><li><a href="#multiremove"><code>multiRemove()</code></a></li><li><a href="#multimerge"><code>multiMerge()</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
|
||||
@@ -145,11 +145,11 @@
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>RCTTVRemoteHandler</code>, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by <code>RCTTVNavigationEventEmitter</code> (a subclass of <code>RCTEventEmitter</code>), that fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="android"></p>
|
||||
<p><block class="android" /></p>
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>ReactAndroidTVRootViewHelper</code>, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="ios android"></p>
|
||||
<p><block class="ios android" /></p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> TVEventHandler <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'TVEventHandler'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">Game2048</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -145,11 +145,11 @@
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>RCTTVRemoteHandler</code>, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by <code>RCTTVNavigationEventEmitter</code> (a subclass of <code>RCTEventEmitter</code>), that fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="android"></p>
|
||||
<p><block class="android" /></p>
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>ReactAndroidTVRootViewHelper</code>, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="ios android"></p>
|
||||
<p><block class="ios android" /></p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> TVEventHandler <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'TVEventHandler'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">Game2048</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -213,7 +213,7 @@
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<a href="./backhandler">
|
||||
<h3>BackHandler</a></h3>
|
||||
<h3>BackHandler</h3>
|
||||
<p>Detect hardware button presses for back navigation.</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -231,7 +231,7 @@
|
||||
</div>
|
||||
<div class="component">
|
||||
<a href="./permissionsandroid">
|
||||
<h3>PermissionsAndroid</a></h3>
|
||||
<h3>PermissionsAndroid</h3>
|
||||
<p>Provides access to the permissions model introduced in Android M.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -213,7 +213,7 @@
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<a href="./backhandler">
|
||||
<h3>BackHandler</a></h3>
|
||||
<h3>BackHandler</h3>
|
||||
<p>Detect hardware button presses for back navigation.</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -231,7 +231,7 @@
|
||||
</div>
|
||||
<div class="component">
|
||||
<a href="./permissionsandroid">
|
||||
<h3>PermissionsAndroid</a></h3>
|
||||
<h3>PermissionsAndroid</h3>
|
||||
<p>Provides access to the permissions model introduced in Android M.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
<p><h3>That's it!</h3></p>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native app.</p>
|
||||
<p><center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><h2>Now what?</h3></p>
|
||||
<p><h2>Now what?</h2></p>
|
||||
<p>Expo also has <a href="https://docs.expo.io">docs</a> you can reference if you have questions specific to the tool. You can also ask for help at <a href="https://forums.expo.io">Expo forums</a>.</p>
|
||||
<p>These tools help you get started quickly, but before committing to building your app with Expo CLI, <a href="https://docs.expo.io/versions/latest/introduction/why-not-expo/">read about the limitations</a>.</p>
|
||||
<p>If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it:</p>
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
<p><h3>That's it!</h3></p>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native app.</p>
|
||||
<p><center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><h2>Now what?</h3></p>
|
||||
<p><h2>Now what?</h2></p>
|
||||
<p>Expo also has <a href="https://docs.expo.io">docs</a> you can reference if you have questions specific to the tool. You can also ask for help at <a href="https://forums.expo.io">Expo forums</a>.</p>
|
||||
<p>These tools help you get started quickly, but before committing to building your app with Expo CLI, <a href="https://docs.expo.io/versions/latest/introduction/why-not-expo/">read about the limitations</a>.</p>
|
||||
<p>If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it:</p>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="views-and-mobile-development"></a><a href="#views-and-mobile-development" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Views and mobile development</h2>
|
||||
<p>In Android and iOS development, a <strong>view</strong> is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!</p>
|
||||
<figure>
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views.">
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views." />
|
||||
<figcaption>Just a sampling of the many views used in Android and iOS apps.</figcaption>
|
||||
</figure>
|
||||
<h2><a class="anchor" aria-hidden="true" id="native-components"></a><a href="#native-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>Native Components</h2>
|
||||
@@ -82,7 +82,7 @@
|
||||
"
|
||||
></div></div></div><hr>
|
||||
<p>Because React Native uses the same API structure as React components, you’ll need to understand React component APIs to get started. The <a href="intro-react">next section</a> makes for a quick introduction or refresher on the topic. However, if you’re already familiar with React, feel free to <a href="handling-text-input">skip ahead</a>.</p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native."></p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native." /></p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#views-and-mobile-development">Views and mobile development</a></li><li><a href="#native-components">Native Components</a></li><li><a href="#core-components">Core Components</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="views-and-mobile-development"></a><a href="#views-and-mobile-development" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Views and mobile development</h2>
|
||||
<p>In Android and iOS development, a <strong>view</strong> is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!</p>
|
||||
<figure>
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views.">
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views." />
|
||||
<figcaption>Just a sampling of the many views used in Android and iOS apps.</figcaption>
|
||||
</figure>
|
||||
<h2><a class="anchor" aria-hidden="true" id="native-components"></a><a href="#native-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>Native Components</h2>
|
||||
@@ -82,7 +82,7 @@
|
||||
"
|
||||
></div></div></div><hr>
|
||||
<p>Because React Native uses the same API structure as React components, you’ll need to understand React component APIs to get started. The <a href="intro-react">next section</a> makes for a quick introduction or refresher on the topic. However, if you’re already familiar with React, feel free to <a href="handling-text-input">skip ahead</a>.</p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native."></p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native." /></p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#views-and-mobile-development">Views and mobile development</a></li><li><a href="#native-components">Native Components</a></li><li><a href="#core-components">Core Components</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
@@ -429,9 +429,9 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
</span></code></pre>
|
||||
<p><code>callNativeMethod</code> is our custom iOS method which for example changes the <code>backgroundColor</code> which is exposed through <code>MyNativeView</code>. This method uses <code>UIManager.dispatchViewManagerCommand</code> which needs 3 parameters:</p>
|
||||
<ul>
|
||||
<li>(nonnull NSNumber *)reactTag - id of react view.</li>
|
||||
<li>commandID:(NSInteger)commandID - Id of the native method that should be called</li>
|
||||
<li>commandArgs:(NSArray<id> *)commandArgs - Args of the native method that we can pass from JS to native.</li>
|
||||
<li><code>(nonnull NSNumber \*)reactTag</code> - id of react view.</li>
|
||||
<li><code>commandID:(NSInteger)commandID</code> - Id of the native method that should be called</li>
|
||||
<li><code>commandArgs:(NSArray<id> \*)commandArgs</code> - Args of the native method that we can pass from JS to native.</li>
|
||||
</ul>
|
||||
<p><code>RNCMyNativeViewManager.m</code></p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTViewManager.h></span></span>
|
||||
|
||||
@@ -429,9 +429,9 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
</span></code></pre>
|
||||
<p><code>callNativeMethod</code> is our custom iOS method which for example changes the <code>backgroundColor</code> which is exposed through <code>MyNativeView</code>. This method uses <code>UIManager.dispatchViewManagerCommand</code> which needs 3 parameters:</p>
|
||||
<ul>
|
||||
<li>(nonnull NSNumber *)reactTag - id of react view.</li>
|
||||
<li>commandID:(NSInteger)commandID - Id of the native method that should be called</li>
|
||||
<li>commandArgs:(NSArray<id> *)commandArgs - Args of the native method that we can pass from JS to native.</li>
|
||||
<li><code>(nonnull NSNumber \*)reactTag</code> - id of react view.</li>
|
||||
<li><code>commandID:(NSInteger)commandID</code> - Id of the native method that should be called</li>
|
||||
<li><code>commandArgs:(NSArray<id> \*)commandArgs</code> - Args of the native method that we can pass from JS to native.</li>
|
||||
</ul>
|
||||
<p><code>RNCMyNativeViewManager.m</code></p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTViewManager.h></span></span>
|
||||
|
||||
@@ -88,9 +88,9 @@
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</a>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</a>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</button>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</button>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</button>
|
||||
</span>
|
||||
</div>
|
||||
<p><block class="linux windows ios" /></p>
|
||||
|
||||
@@ -88,9 +88,9 @@
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</a>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</a>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</button>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</button>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</button>
|
||||
</span>
|
||||
</div>
|
||||
<p><block class="linux windows ios" /></p>
|
||||
|
||||
@@ -272,8 +272,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keys</td><td>Array<string></td><td>Yes</td><td>Array of key for the items to get.</td></tr>
|
||||
<tr><td>callback</td><td>(errors, result) => void</td><td>No</td><td>Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keys</td><td><code>Array<string></code></td><td>Yes</td><td>Array of key for the items to get.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors, result) => void</code></td><td>No</td><td>Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -290,7 +290,7 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keyValuePairs</td><td>Array<Array<string>></td><td>Yes</td><td>Array of key-value array for the items to set.</td></tr>
|
||||
<tr><td>keyValuePairs</td><td><code>Array<Array<string>></code></td><td>Yes</td><td>Array of key-value array for the items to set.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -305,8 +305,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keys</td><td>Array<string></td><td>Yes</td><td>Array of key for the items to delete.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keys</td><td><code>Array<string></code></td><td>Yes</td><td>Array of key for the items to delete.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors) => void</code></td><td>No</td><td>Function that will be called an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -321,8 +321,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keyValuePairs</td><td>Array<Array<string>></td><td>Yes</td><td>Array of key-value array for the items to merge.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keyValuePairs</td><td><code>Array<Array<string>></code></td><td>Yes</td><td>Array of key-value array for the items to merge.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors) => void</code></td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#getitem"><code>getItem()</code></a></li><li><a href="#setitem"><code>setItem()</code></a></li><li><a href="#removeitem"><code>removeItem()</code></a></li><li><a href="#mergeitem"><code>mergeItem()</code></a></li><li><a href="#clear"><code>clear()</code></a></li><li><a href="#getallkeys"><code>getAllKeys()</code></a></li><li><a href="#flushgetrequests"><code>flushGetRequests()</code></a></li><li><a href="#multiget"><code>multiGet()</code></a></li><li><a href="#multiset"><code>multiSet()</code></a></li><li><a href="#multiremove"><code>multiRemove()</code></a></li><li><a href="#multimerge"><code>multiMerge()</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
|
||||
@@ -272,8 +272,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keys</td><td>Array<string></td><td>Yes</td><td>Array of key for the items to get.</td></tr>
|
||||
<tr><td>callback</td><td>(errors, result) => void</td><td>No</td><td>Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keys</td><td><code>Array<string></code></td><td>Yes</td><td>Array of key for the items to get.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors, result) => void</code></td><td>No</td><td>Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -290,7 +290,7 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keyValuePairs</td><td>Array<Array<string>></td><td>Yes</td><td>Array of key-value array for the items to set.</td></tr>
|
||||
<tr><td>keyValuePairs</td><td><code>Array<Array<string>></code></td><td>Yes</td><td>Array of key-value array for the items to set.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -305,8 +305,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keys</td><td>Array<string></td><td>Yes</td><td>Array of key for the items to delete.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keys</td><td><code>Array<string></code></td><td>Yes</td><td>Array of key for the items to delete.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors) => void</code></td><td>No</td><td>Function that will be called an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -321,8 +321,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keyValuePairs</td><td>Array<Array<string>></td><td>Yes</td><td>Array of key-value array for the items to merge.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keyValuePairs</td><td><code>Array<Array<string>></code></td><td>Yes</td><td>Array of key-value array for the items to merge.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors) => void</code></td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#getitem"><code>getItem()</code></a></li><li><a href="#setitem"><code>setItem()</code></a></li><li><a href="#removeitem"><code>removeItem()</code></a></li><li><a href="#mergeitem"><code>mergeItem()</code></a></li><li><a href="#clear"><code>clear()</code></a></li><li><a href="#getallkeys"><code>getAllKeys()</code></a></li><li><a href="#flushgetrequests"><code>flushGetRequests()</code></a></li><li><a href="#multiget"><code>multiGet()</code></a></li><li><a href="#multiset"><code>multiSet()</code></a></li><li><a href="#multiremove"><code>multiRemove()</code></a></li><li><a href="#multimerge"><code>multiMerge()</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
|
||||
@@ -145,11 +145,11 @@
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>RCTTVRemoteHandler</code>, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by <code>RCTTVNavigationEventEmitter</code> (a subclass of <code>RCTEventEmitter</code>), that fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="android"></p>
|
||||
<p><block class="android" /></p>
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>ReactAndroidTVRootViewHelper</code>, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="ios android"></p>
|
||||
<p><block class="ios android" /></p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> TVEventHandler <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'TVEventHandler'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">Game2048</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -145,11 +145,11 @@
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>RCTTVRemoteHandler</code>, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by <code>RCTTVNavigationEventEmitter</code> (a subclass of <code>RCTEventEmitter</code>), that fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="android"></p>
|
||||
<p><block class="android" /></p>
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>ReactAndroidTVRootViewHelper</code>, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="ios android"></p>
|
||||
<p><block class="ios android" /></p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> TVEventHandler <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'TVEventHandler'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">Game2048</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -213,7 +213,7 @@
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<a href="./backhandler">
|
||||
<h3>BackHandler</a></h3>
|
||||
<h3>BackHandler</h3>
|
||||
<p>Detect hardware button presses for back navigation.</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -231,7 +231,7 @@
|
||||
</div>
|
||||
<div class="component">
|
||||
<a href="./permissionsandroid">
|
||||
<h3>PermissionsAndroid</a></h3>
|
||||
<h3>PermissionsAndroid</h3>
|
||||
<p>Provides access to the permissions model introduced in Android M.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -213,7 +213,7 @@
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<a href="./backhandler">
|
||||
<h3>BackHandler</a></h3>
|
||||
<h3>BackHandler</h3>
|
||||
<p>Detect hardware button presses for back navigation.</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -231,7 +231,7 @@
|
||||
</div>
|
||||
<div class="component">
|
||||
<a href="./permissionsandroid">
|
||||
<h3>PermissionsAndroid</a></h3>
|
||||
<h3>PermissionsAndroid</h3>
|
||||
<p>Provides access to the permissions model introduced in Android M.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
<p><h3>That's it!</h3></p>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native app.</p>
|
||||
<p><center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><h2>Now what?</h3></p>
|
||||
<p><h2>Now what?</h2></p>
|
||||
<p>Expo also has <a href="https://docs.expo.io">docs</a> you can reference if you have questions specific to the tool. You can also ask for help at <a href="https://forums.expo.io">Expo forums</a>.</p>
|
||||
<p>These tools help you get started quickly, but before committing to building your app with Expo CLI, <a href="https://docs.expo.io/versions/latest/introduction/why-not-expo/">read about the limitations</a>.</p>
|
||||
<p>If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it:</p>
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
<p><h3>That's it!</h3></p>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native app.</p>
|
||||
<p><center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><h2>Now what?</h3></p>
|
||||
<p><h2>Now what?</h2></p>
|
||||
<p>Expo also has <a href="https://docs.expo.io">docs</a> you can reference if you have questions specific to the tool. You can also ask for help at <a href="https://forums.expo.io">Expo forums</a>.</p>
|
||||
<p>These tools help you get started quickly, but before committing to building your app with Expo CLI, <a href="https://docs.expo.io/versions/latest/introduction/why-not-expo/">read about the limitations</a>.</p>
|
||||
<p>If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it:</p>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="views-and-mobile-development"></a><a href="#views-and-mobile-development" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Views and mobile development</h2>
|
||||
<p>In Android and iOS development, a <strong>view</strong> is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!</p>
|
||||
<figure>
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views.">
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views." />
|
||||
<figcaption>Just a sampling of the many views used in Android and iOS apps.</figcaption>
|
||||
</figure>
|
||||
<h2><a class="anchor" aria-hidden="true" id="native-components"></a><a href="#native-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>Native Components</h2>
|
||||
@@ -82,7 +82,7 @@
|
||||
"
|
||||
></div></div></div><hr>
|
||||
<p>Because React Native uses the same API structure as React components, you’ll need to understand React component APIs to get started. The <a href="intro-react">next section</a> makes for a quick introduction or refresher on the topic. However, if you’re already familiar with React, feel free to <a href="handling-text-input">skip ahead</a>.</p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native."></p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native." /></p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#views-and-mobile-development">Views and mobile development</a></li><li><a href="#native-components">Native Components</a></li><li><a href="#core-components">Core Components</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="views-and-mobile-development"></a><a href="#views-and-mobile-development" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Views and mobile development</h2>
|
||||
<p>In Android and iOS development, a <strong>view</strong> is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!</p>
|
||||
<figure>
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views.">
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views." />
|
||||
<figcaption>Just a sampling of the many views used in Android and iOS apps.</figcaption>
|
||||
</figure>
|
||||
<h2><a class="anchor" aria-hidden="true" id="native-components"></a><a href="#native-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>Native Components</h2>
|
||||
@@ -82,7 +82,7 @@
|
||||
"
|
||||
></div></div></div><hr>
|
||||
<p>Because React Native uses the same API structure as React components, you’ll need to understand React component APIs to get started. The <a href="intro-react">next section</a> makes for a quick introduction or refresher on the topic. However, if you’re already familiar with React, feel free to <a href="handling-text-input">skip ahead</a>.</p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native."></p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native." /></p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#views-and-mobile-development">Views and mobile development</a></li><li><a href="#native-components">Native Components</a></li><li><a href="#core-components">Core Components</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
@@ -429,9 +429,9 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
</span></code></pre>
|
||||
<p><code>callNativeMethod</code> is our custom iOS method which for example changes the <code>backgroundColor</code> which is exposed through <code>MyNativeView</code>. This method uses <code>UIManager.dispatchViewManagerCommand</code> which needs 3 parameters:</p>
|
||||
<ul>
|
||||
<li>(nonnull NSNumber *)reactTag - id of react view.</li>
|
||||
<li>commandID:(NSInteger)commandID - Id of the native method that should be called</li>
|
||||
<li>commandArgs:(NSArray<id> *)commandArgs - Args of the native method that we can pass from JS to native.</li>
|
||||
<li><code>(nonnull NSNumber \*)reactTag</code> - id of react view.</li>
|
||||
<li><code>commandID:(NSInteger)commandID</code> - Id of the native method that should be called</li>
|
||||
<li><code>commandArgs:(NSArray<id> \*)commandArgs</code> - Args of the native method that we can pass from JS to native.</li>
|
||||
</ul>
|
||||
<p><code>RNCMyNativeViewManager.m</code></p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTViewManager.h></span></span>
|
||||
|
||||
@@ -429,9 +429,9 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
</span></code></pre>
|
||||
<p><code>callNativeMethod</code> is our custom iOS method which for example changes the <code>backgroundColor</code> which is exposed through <code>MyNativeView</code>. This method uses <code>UIManager.dispatchViewManagerCommand</code> which needs 3 parameters:</p>
|
||||
<ul>
|
||||
<li>(nonnull NSNumber *)reactTag - id of react view.</li>
|
||||
<li>commandID:(NSInteger)commandID - Id of the native method that should be called</li>
|
||||
<li>commandArgs:(NSArray<id> *)commandArgs - Args of the native method that we can pass from JS to native.</li>
|
||||
<li><code>(nonnull NSNumber \*)reactTag</code> - id of react view.</li>
|
||||
<li><code>commandID:(NSInteger)commandID</code> - Id of the native method that should be called</li>
|
||||
<li><code>commandArgs:(NSArray<id> \*)commandArgs</code> - Args of the native method that we can pass from JS to native.</li>
|
||||
</ul>
|
||||
<p><code>RNCMyNativeViewManager.m</code></p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTViewManager.h></span></span>
|
||||
|
||||
@@ -88,9 +88,9 @@
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</a>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</a>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</button>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</button>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</button>
|
||||
</span>
|
||||
</div>
|
||||
<p><block class="linux windows ios" /></p>
|
||||
|
||||
@@ -88,9 +88,9 @@
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</a>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</a>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</button>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</button>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</button>
|
||||
</span>
|
||||
</div>
|
||||
<p><block class="linux windows ios" /></p>
|
||||
|
||||
@@ -272,8 +272,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keys</td><td>Array<string></td><td>Yes</td><td>Array of key for the items to get.</td></tr>
|
||||
<tr><td>callback</td><td>(errors, result) => void</td><td>No</td><td>Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keys</td><td><code>Array<string></code></td><td>Yes</td><td>Array of key for the items to get.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors, result) => void</code></td><td>No</td><td>Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -290,7 +290,7 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keyValuePairs</td><td>Array<Array<string>></td><td>Yes</td><td>Array of key-value array for the items to set.</td></tr>
|
||||
<tr><td>keyValuePairs</td><td><code>Array<Array<string>></code></td><td>Yes</td><td>Array of key-value array for the items to set.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -305,8 +305,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keys</td><td>Array<string></td><td>Yes</td><td>Array of key for the items to delete.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keys</td><td><code>Array<string></code></td><td>Yes</td><td>Array of key for the items to delete.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors) => void</code></td><td>No</td><td>Function that will be called an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -321,8 +321,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keyValuePairs</td><td>Array<Array<string>></td><td>Yes</td><td>Array of key-value array for the items to merge.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keyValuePairs</td><td><code>Array<Array<string>></code></td><td>Yes</td><td>Array of key-value array for the items to merge.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors) => void</code></td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#getitem"><code>getItem()</code></a></li><li><a href="#setitem"><code>setItem()</code></a></li><li><a href="#removeitem"><code>removeItem()</code></a></li><li><a href="#mergeitem"><code>mergeItem()</code></a></li><li><a href="#clear"><code>clear()</code></a></li><li><a href="#getallkeys"><code>getAllKeys()</code></a></li><li><a href="#flushgetrequests"><code>flushGetRequests()</code></a></li><li><a href="#multiget"><code>multiGet()</code></a></li><li><a href="#multiset"><code>multiSet()</code></a></li><li><a href="#multiremove"><code>multiRemove()</code></a></li><li><a href="#multimerge"><code>multiMerge()</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
|
||||
@@ -272,8 +272,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keys</td><td>Array<string></td><td>Yes</td><td>Array of key for the items to get.</td></tr>
|
||||
<tr><td>callback</td><td>(errors, result) => void</td><td>No</td><td>Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keys</td><td><code>Array<string></code></td><td>Yes</td><td>Array of key for the items to get.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors, result) => void</code></td><td>No</td><td>Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -290,7 +290,7 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keyValuePairs</td><td>Array<Array<string>></td><td>Yes</td><td>Array of key-value array for the items to set.</td></tr>
|
||||
<tr><td>keyValuePairs</td><td><code>Array<Array<string>></code></td><td>Yes</td><td>Array of key-value array for the items to set.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -305,8 +305,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keys</td><td>Array<string></td><td>Yes</td><td>Array of key for the items to delete.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keys</td><td><code>Array<string></code></td><td>Yes</td><td>Array of key for the items to delete.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors) => void</code></td><td>No</td><td>Function that will be called an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -321,8 +321,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keyValuePairs</td><td>Array<Array<string>></td><td>Yes</td><td>Array of key-value array for the items to merge.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keyValuePairs</td><td><code>Array<Array<string>></code></td><td>Yes</td><td>Array of key-value array for the items to merge.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors) => void</code></td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#getitem"><code>getItem()</code></a></li><li><a href="#setitem"><code>setItem()</code></a></li><li><a href="#removeitem"><code>removeItem()</code></a></li><li><a href="#mergeitem"><code>mergeItem()</code></a></li><li><a href="#clear"><code>clear()</code></a></li><li><a href="#getallkeys"><code>getAllKeys()</code></a></li><li><a href="#flushgetrequests"><code>flushGetRequests()</code></a></li><li><a href="#multiget"><code>multiGet()</code></a></li><li><a href="#multiset"><code>multiSet()</code></a></li><li><a href="#multiremove"><code>multiRemove()</code></a></li><li><a href="#multimerge"><code>multiMerge()</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
|
||||
@@ -145,11 +145,11 @@
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>RCTTVRemoteHandler</code>, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by <code>RCTTVNavigationEventEmitter</code> (a subclass of <code>RCTEventEmitter</code>), that fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="android"></p>
|
||||
<p><block class="android" /></p>
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>ReactAndroidTVRootViewHelper</code>, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="ios android"></p>
|
||||
<p><block class="ios android" /></p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> TVEventHandler <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'TVEventHandler'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">Game2048</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -145,11 +145,11 @@
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>RCTTVRemoteHandler</code>, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by <code>RCTTVNavigationEventEmitter</code> (a subclass of <code>RCTEventEmitter</code>), that fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="android"></p>
|
||||
<p><block class="android" /></p>
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>ReactAndroidTVRootViewHelper</code>, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="ios android"></p>
|
||||
<p><block class="ios android" /></p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> TVEventHandler <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'TVEventHandler'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">Game2048</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -213,7 +213,7 @@
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<a href="./backhandler">
|
||||
<h3>BackHandler</a></h3>
|
||||
<h3>BackHandler</h3>
|
||||
<p>Detect hardware button presses for back navigation.</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -231,7 +231,7 @@
|
||||
</div>
|
||||
<div class="component">
|
||||
<a href="./permissionsandroid">
|
||||
<h3>PermissionsAndroid</a></h3>
|
||||
<h3>PermissionsAndroid</h3>
|
||||
<p>Provides access to the permissions model introduced in Android M.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -213,7 +213,7 @@
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<a href="./backhandler">
|
||||
<h3>BackHandler</a></h3>
|
||||
<h3>BackHandler</h3>
|
||||
<p>Detect hardware button presses for back navigation.</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -231,7 +231,7 @@
|
||||
</div>
|
||||
<div class="component">
|
||||
<a href="./permissionsandroid">
|
||||
<h3>PermissionsAndroid</a></h3>
|
||||
<h3>PermissionsAndroid</h3>
|
||||
<p>Provides access to the permissions model introduced in Android M.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
<p><h3>That's it!</h3></p>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native app.</p>
|
||||
<p><center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><h2>Now what?</h3></p>
|
||||
<p><h2>Now what?</h2></p>
|
||||
<p>Expo also has <a href="https://docs.expo.io">docs</a> you can reference if you have questions specific to the tool. You can also ask for help at <a href="https://forums.expo.io">Expo forums</a>.</p>
|
||||
<p>These tools help you get started quickly, but before committing to building your app with Expo CLI, <a href="https://docs.expo.io/versions/latest/introduction/why-not-expo/">read about the limitations</a>.</p>
|
||||
<p>If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it:</p>
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
<p><h3>That's it!</h3></p>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native app.</p>
|
||||
<p><center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><h2>Now what?</h3></p>
|
||||
<p><h2>Now what?</h2></p>
|
||||
<p>Expo also has <a href="https://docs.expo.io">docs</a> you can reference if you have questions specific to the tool. You can also ask for help at <a href="https://forums.expo.io">Expo forums</a>.</p>
|
||||
<p>These tools help you get started quickly, but before committing to building your app with Expo CLI, <a href="https://docs.expo.io/versions/latest/introduction/why-not-expo/">read about the limitations</a>.</p>
|
||||
<p>If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it:</p>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="views-and-mobile-development"></a><a href="#views-and-mobile-development" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Views and mobile development</h2>
|
||||
<p>In Android and iOS development, a <strong>view</strong> is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!</p>
|
||||
<figure>
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views.">
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views." />
|
||||
<figcaption>Just a sampling of the many views used in Android and iOS apps.</figcaption>
|
||||
</figure>
|
||||
<h2><a class="anchor" aria-hidden="true" id="native-components"></a><a href="#native-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>Native Components</h2>
|
||||
@@ -82,7 +82,7 @@
|
||||
"
|
||||
></div></div></div><hr>
|
||||
<p>Because React Native uses the same API structure as React components, you’ll need to understand React component APIs to get started. The <a href="intro-react">next section</a> makes for a quick introduction or refresher on the topic. However, if you’re already familiar with React, feel free to <a href="handling-text-input">skip ahead</a>.</p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native."></p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native." /></p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#views-and-mobile-development">Views and mobile development</a></li><li><a href="#native-components">Native Components</a></li><li><a href="#core-components">Core Components</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="views-and-mobile-development"></a><a href="#views-and-mobile-development" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Views and mobile development</h2>
|
||||
<p>In Android and iOS development, a <strong>view</strong> is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!</p>
|
||||
<figure>
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views.">
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views." />
|
||||
<figcaption>Just a sampling of the many views used in Android and iOS apps.</figcaption>
|
||||
</figure>
|
||||
<h2><a class="anchor" aria-hidden="true" id="native-components"></a><a href="#native-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>Native Components</h2>
|
||||
@@ -82,7 +82,7 @@
|
||||
"
|
||||
></div></div></div><hr>
|
||||
<p>Because React Native uses the same API structure as React components, you’ll need to understand React component APIs to get started. The <a href="intro-react">next section</a> makes for a quick introduction or refresher on the topic. However, if you’re already familiar with React, feel free to <a href="handling-text-input">skip ahead</a>.</p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native."></p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native." /></p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#views-and-mobile-development">Views and mobile development</a></li><li><a href="#native-components">Native Components</a></li><li><a href="#core-components">Core Components</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
@@ -429,9 +429,9 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
</span></code></pre>
|
||||
<p><code>callNativeMethod</code> is our custom iOS method which for example changes the <code>backgroundColor</code> which is exposed through <code>MyNativeView</code>. This method uses <code>UIManager.dispatchViewManagerCommand</code> which needs 3 parameters:</p>
|
||||
<ul>
|
||||
<li>(nonnull NSNumber *)reactTag - id of react view.</li>
|
||||
<li>commandID:(NSInteger)commandID - Id of the native method that should be called</li>
|
||||
<li>commandArgs:(NSArray<id> *)commandArgs - Args of the native method that we can pass from JS to native.</li>
|
||||
<li><code>(nonnull NSNumber \*)reactTag</code> - id of react view.</li>
|
||||
<li><code>commandID:(NSInteger)commandID</code> - Id of the native method that should be called</li>
|
||||
<li><code>commandArgs:(NSArray<id> \*)commandArgs</code> - Args of the native method that we can pass from JS to native.</li>
|
||||
</ul>
|
||||
<p><code>RNCMyNativeViewManager.m</code></p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTViewManager.h></span></span>
|
||||
|
||||
@@ -429,9 +429,9 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
</span></code></pre>
|
||||
<p><code>callNativeMethod</code> is our custom iOS method which for example changes the <code>backgroundColor</code> which is exposed through <code>MyNativeView</code>. This method uses <code>UIManager.dispatchViewManagerCommand</code> which needs 3 parameters:</p>
|
||||
<ul>
|
||||
<li>(nonnull NSNumber *)reactTag - id of react view.</li>
|
||||
<li>commandID:(NSInteger)commandID - Id of the native method that should be called</li>
|
||||
<li>commandArgs:(NSArray<id> *)commandArgs - Args of the native method that we can pass from JS to native.</li>
|
||||
<li><code>(nonnull NSNumber \*)reactTag</code> - id of react view.</li>
|
||||
<li><code>commandID:(NSInteger)commandID</code> - Id of the native method that should be called</li>
|
||||
<li><code>commandArgs:(NSArray<id> \*)commandArgs</code> - Args of the native method that we can pass from JS to native.</li>
|
||||
</ul>
|
||||
<p><code>RNCMyNativeViewManager.m</code></p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTViewManager.h></span></span>
|
||||
|
||||
@@ -88,9 +88,9 @@
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</a>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</a>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</button>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</button>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</button>
|
||||
</span>
|
||||
</div>
|
||||
<p><block class="linux windows ios" /></p>
|
||||
|
||||
@@ -88,9 +88,9 @@
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</a>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</a>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</button>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</button>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</button>
|
||||
</span>
|
||||
</div>
|
||||
<p><block class="linux windows ios" /></p>
|
||||
|
||||
@@ -272,8 +272,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keys</td><td>Array<string></td><td>Yes</td><td>Array of key for the items to get.</td></tr>
|
||||
<tr><td>callback</td><td>(errors, result) => void</td><td>No</td><td>Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keys</td><td><code>Array<string></code></td><td>Yes</td><td>Array of key for the items to get.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors, result) => void</code></td><td>No</td><td>Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -290,7 +290,7 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keyValuePairs</td><td>Array<Array<string>></td><td>Yes</td><td>Array of key-value array for the items to set.</td></tr>
|
||||
<tr><td>keyValuePairs</td><td><code>Array<Array<string>></code></td><td>Yes</td><td>Array of key-value array for the items to set.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -305,8 +305,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keys</td><td>Array<string></td><td>Yes</td><td>Array of key for the items to delete.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keys</td><td><code>Array<string></code></td><td>Yes</td><td>Array of key for the items to delete.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors) => void</code></td><td>No</td><td>Function that will be called an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -321,8 +321,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keyValuePairs</td><td>Array<Array<string>></td><td>Yes</td><td>Array of key-value array for the items to merge.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keyValuePairs</td><td><code>Array<Array<string>></code></td><td>Yes</td><td>Array of key-value array for the items to merge.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors) => void</code></td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#getitem"><code>getItem()</code></a></li><li><a href="#setitem"><code>setItem()</code></a></li><li><a href="#removeitem"><code>removeItem()</code></a></li><li><a href="#mergeitem"><code>mergeItem()</code></a></li><li><a href="#clear"><code>clear()</code></a></li><li><a href="#getallkeys"><code>getAllKeys()</code></a></li><li><a href="#flushgetrequests"><code>flushGetRequests()</code></a></li><li><a href="#multiget"><code>multiGet()</code></a></li><li><a href="#multiset"><code>multiSet()</code></a></li><li><a href="#multiremove"><code>multiRemove()</code></a></li><li><a href="#multimerge"><code>multiMerge()</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
|
||||
@@ -272,8 +272,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keys</td><td>Array<string></td><td>Yes</td><td>Array of key for the items to get.</td></tr>
|
||||
<tr><td>callback</td><td>(errors, result) => void</td><td>No</td><td>Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keys</td><td><code>Array<string></code></td><td>Yes</td><td>Array of key for the items to get.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors, result) => void</code></td><td>No</td><td>Function that will be called with a key-value array of the results, plus an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -290,7 +290,7 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keyValuePairs</td><td>Array<Array<string>></td><td>Yes</td><td>Array of key-value array for the items to set.</td></tr>
|
||||
<tr><td>keyValuePairs</td><td><code>Array<Array<string>></code></td><td>Yes</td><td>Array of key-value array for the items to set.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -305,8 +305,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keys</td><td>Array<string></td><td>Yes</td><td>Array of key for the items to delete.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keys</td><td><code>Array<string></code></td><td>Yes</td><td>Array of key for the items to delete.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors) => void</code></td><td>No</td><td>Function that will be called an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -321,8 +321,8 @@ AsyncStorage<span class="token punctuation">.</span><span class="token function"
|
||||
<tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>keyValuePairs</td><td>Array<Array<string>></td><td>Yes</td><td>Array of key-value array for the items to merge.</td></tr>
|
||||
<tr><td>callback</td><td>(errors) => void</td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
<tr><td>keyValuePairs</td><td><code>Array<Array<string>></code></td><td>Yes</td><td>Array of key-value array for the items to merge.</td></tr>
|
||||
<tr><td>callback</td><td><code>(errors) => void</code></td><td>No</td><td>Function that will be called with an array of any key-specific errors found.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#getitem"><code>getItem()</code></a></li><li><a href="#setitem"><code>setItem()</code></a></li><li><a href="#removeitem"><code>removeItem()</code></a></li><li><a href="#mergeitem"><code>mergeItem()</code></a></li><li><a href="#clear"><code>clear()</code></a></li><li><a href="#getallkeys"><code>getAllKeys()</code></a></li><li><a href="#flushgetrequests"><code>flushGetRequests()</code></a></li><li><a href="#multiget"><code>multiGet()</code></a></li><li><a href="#multiset"><code>multiSet()</code></a></li><li><a href="#multiremove"><code>multiRemove()</code></a></li><li><a href="#multimerge"><code>multiMerge()</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
|
||||
@@ -145,11 +145,11 @@
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>RCTTVRemoteHandler</code>, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by <code>RCTTVNavigationEventEmitter</code> (a subclass of <code>RCTEventEmitter</code>), that fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="android"></p>
|
||||
<p><block class="android" /></p>
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>ReactAndroidTVRootViewHelper</code>, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="ios android"></p>
|
||||
<p><block class="ios android" /></p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> TVEventHandler <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'TVEventHandler'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">Game2048</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -145,11 +145,11 @@
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>RCTTVRemoteHandler</code>, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by <code>RCTTVNavigationEventEmitter</code> (a subclass of <code>RCTEventEmitter</code>), that fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="android"></p>
|
||||
<p><block class="android" /></p>
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>ReactAndroidTVRootViewHelper</code>, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="ios android"></p>
|
||||
<p><block class="ios android" /></p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> TVEventHandler <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'TVEventHandler'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">Game2048</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -213,7 +213,7 @@
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<a href="./backhandler">
|
||||
<h3>BackHandler</a></h3>
|
||||
<h3>BackHandler</h3>
|
||||
<p>Detect hardware button presses for back navigation.</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -231,7 +231,7 @@
|
||||
</div>
|
||||
<div class="component">
|
||||
<a href="./permissionsandroid">
|
||||
<h3>PermissionsAndroid</a></h3>
|
||||
<h3>PermissionsAndroid</h3>
|
||||
<p>Provides access to the permissions model introduced in Android M.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -213,7 +213,7 @@
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<a href="./backhandler">
|
||||
<h3>BackHandler</a></h3>
|
||||
<h3>BackHandler</h3>
|
||||
<p>Detect hardware button presses for back navigation.</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -231,7 +231,7 @@
|
||||
</div>
|
||||
<div class="component">
|
||||
<a href="./permissionsandroid">
|
||||
<h3>PermissionsAndroid</a></h3>
|
||||
<h3>PermissionsAndroid</h3>
|
||||
<p>Provides access to the permissions model introduced in Android M.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
<p><h3>That's it!</h3></p>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native app.</p>
|
||||
<p><center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><h2>Now what?</h3></p>
|
||||
<p><h2>Now what?</h2></p>
|
||||
<p>Expo also has <a href="https://docs.expo.io">docs</a> you can reference if you have questions specific to the tool. You can also ask for help at <a href="https://forums.expo.io">Expo forums</a>.</p>
|
||||
<p>These tools help you get started quickly, but before committing to building your app with Expo CLI, <a href="https://docs.expo.io/versions/latest/introduction/why-not-expo/">read about the limitations</a>.</p>
|
||||
<p>If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it:</p>
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
<p><h3>That's it!</h3></p>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native app.</p>
|
||||
<p><center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><h2>Now what?</h3></p>
|
||||
<p><h2>Now what?</h2></p>
|
||||
<p>Expo also has <a href="https://docs.expo.io">docs</a> you can reference if you have questions specific to the tool. You can also ask for help at <a href="https://forums.expo.io">Expo forums</a>.</p>
|
||||
<p>These tools help you get started quickly, but before committing to building your app with Expo CLI, <a href="https://docs.expo.io/versions/latest/introduction/why-not-expo/">read about the limitations</a>.</p>
|
||||
<p>If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it:</p>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="views-and-mobile-development"></a><a href="#views-and-mobile-development" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Views and mobile development</h2>
|
||||
<p>In Android and iOS development, a <strong>view</strong> is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!</p>
|
||||
<figure>
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views.">
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views." />
|
||||
<figcaption>Just a sampling of the many views used in Android and iOS apps.</figcaption>
|
||||
</figure>
|
||||
<h2><a class="anchor" aria-hidden="true" id="native-components"></a><a href="#native-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>Native Components</h2>
|
||||
@@ -82,7 +82,7 @@
|
||||
"
|
||||
></div></div></div><hr>
|
||||
<p>Because React Native uses the same API structure as React components, you’ll need to understand React component APIs to get started. The <a href="intro-react">next section</a> makes for a quick introduction or refresher on the topic. However, if you’re already familiar with React, feel free to <a href="handling-text-input">skip ahead</a>.</p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native."></p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native." /></p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#views-and-mobile-development">Views and mobile development</a></li><li><a href="#native-components">Native Components</a></li><li><a href="#core-components">Core Components</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="views-and-mobile-development"></a><a href="#views-and-mobile-development" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Views and mobile development</h2>
|
||||
<p>In Android and iOS development, a <strong>view</strong> is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!</p>
|
||||
<figure>
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views.">
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views." />
|
||||
<figcaption>Just a sampling of the many views used in Android and iOS apps.</figcaption>
|
||||
</figure>
|
||||
<h2><a class="anchor" aria-hidden="true" id="native-components"></a><a href="#native-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>Native Components</h2>
|
||||
@@ -82,7 +82,7 @@
|
||||
"
|
||||
></div></div></div><hr>
|
||||
<p>Because React Native uses the same API structure as React components, you’ll need to understand React component APIs to get started. The <a href="intro-react">next section</a> makes for a quick introduction or refresher on the topic. However, if you’re already familiar with React, feel free to <a href="handling-text-input">skip ahead</a>.</p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native."></p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native." /></p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#views-and-mobile-development">Views and mobile development</a></li><li><a href="#native-components">Native Components</a></li><li><a href="#core-components">Core Components</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
@@ -429,9 +429,9 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
</span></code></pre>
|
||||
<p><code>callNativeMethod</code> is our custom iOS method which for example changes the <code>backgroundColor</code> which is exposed through <code>MyNativeView</code>. This method uses <code>UIManager.dispatchViewManagerCommand</code> which needs 3 parameters:</p>
|
||||
<ul>
|
||||
<li>(nonnull NSNumber *)reactTag - id of react view.</li>
|
||||
<li>commandID:(NSInteger)commandID - Id of the native method that should be called</li>
|
||||
<li>commandArgs:(NSArray<id> *)commandArgs - Args of the native method that we can pass from JS to native.</li>
|
||||
<li><code>(nonnull NSNumber \*)reactTag</code> - id of react view.</li>
|
||||
<li><code>commandID:(NSInteger)commandID</code> - Id of the native method that should be called</li>
|
||||
<li><code>commandArgs:(NSArray<id> \*)commandArgs</code> - Args of the native method that we can pass from JS to native.</li>
|
||||
</ul>
|
||||
<p><code>RNCMyNativeViewManager.m</code></p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTViewManager.h></span></span>
|
||||
|
||||
@@ -429,9 +429,9 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
</span></code></pre>
|
||||
<p><code>callNativeMethod</code> is our custom iOS method which for example changes the <code>backgroundColor</code> which is exposed through <code>MyNativeView</code>. This method uses <code>UIManager.dispatchViewManagerCommand</code> which needs 3 parameters:</p>
|
||||
<ul>
|
||||
<li>(nonnull NSNumber *)reactTag - id of react view.</li>
|
||||
<li>commandID:(NSInteger)commandID - Id of the native method that should be called</li>
|
||||
<li>commandArgs:(NSArray<id> *)commandArgs - Args of the native method that we can pass from JS to native.</li>
|
||||
<li><code>(nonnull NSNumber \*)reactTag</code> - id of react view.</li>
|
||||
<li><code>commandID:(NSInteger)commandID</code> - Id of the native method that should be called</li>
|
||||
<li><code>commandArgs:(NSArray<id> \*)commandArgs</code> - Args of the native method that we can pass from JS to native.</li>
|
||||
</ul>
|
||||
<p><code>RNCMyNativeViewManager.m</code></p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTViewManager.h></span></span>
|
||||
|
||||
@@ -88,9 +88,9 @@
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</a>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</a>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</button>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</button>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</button>
|
||||
</span>
|
||||
</div>
|
||||
<p><block class="linux windows ios" /></p>
|
||||
|
||||
@@ -88,9 +88,9 @@
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</a>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</a>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</button>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</button>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</button>
|
||||
</span>
|
||||
</div>
|
||||
<p><block class="linux windows ios" /></p>
|
||||
|
||||
@@ -145,11 +145,11 @@
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>RCTTVRemoteHandler</code>, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by <code>RCTTVNavigationEventEmitter</code> (a subclass of <code>RCTEventEmitter</code>), that fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="android"></p>
|
||||
<p><block class="android" /></p>
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>ReactAndroidTVRootViewHelper</code>, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="ios android"></p>
|
||||
<p><block class="ios android" /></p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> TVEventHandler <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'TVEventHandler'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">Game2048</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -145,11 +145,11 @@
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>RCTTVRemoteHandler</code>, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by <code>RCTTVNavigationEventEmitter</code> (a subclass of <code>RCTEventEmitter</code>), that fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="android"></p>
|
||||
<p><block class="android" /></p>
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>ReactAndroidTVRootViewHelper</code>, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="ios android"></p>
|
||||
<p><block class="ios android" /></p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> TVEventHandler <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'TVEventHandler'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">Game2048</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -213,7 +213,7 @@
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<a href="./backhandler">
|
||||
<h3>BackHandler</a></h3>
|
||||
<h3>BackHandler</h3>
|
||||
<p>Detect hardware button presses for back navigation.</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -231,7 +231,7 @@
|
||||
</div>
|
||||
<div class="component">
|
||||
<a href="./permissionsandroid">
|
||||
<h3>PermissionsAndroid</a></h3>
|
||||
<h3>PermissionsAndroid</h3>
|
||||
<p>Provides access to the permissions model introduced in Android M.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -213,7 +213,7 @@
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<a href="./backhandler">
|
||||
<h3>BackHandler</a></h3>
|
||||
<h3>BackHandler</h3>
|
||||
<p>Detect hardware button presses for back navigation.</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -231,7 +231,7 @@
|
||||
</div>
|
||||
<div class="component">
|
||||
<a href="./permissionsandroid">
|
||||
<h3>PermissionsAndroid</a></h3>
|
||||
<h3>PermissionsAndroid</h3>
|
||||
<p>Provides access to the permissions model introduced in Android M.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
<p><h3>That's it!</h3></p>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native app.</p>
|
||||
<p><center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><h2>Now what?</h3></p>
|
||||
<p><h2>Now what?</h2></p>
|
||||
<p>Expo also has <a href="https://docs.expo.io">docs</a> you can reference if you have questions specific to the tool. You can also ask for help at <a href="https://forums.expo.io">Expo forums</a>.</p>
|
||||
<p>These tools help you get started quickly, but before committing to building your app with Expo CLI, <a href="https://docs.expo.io/versions/latest/introduction/why-not-expo/">read about the limitations</a>.</p>
|
||||
<p>If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it:</p>
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
<p><h3>That's it!</h3></p>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native app.</p>
|
||||
<p><center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><h2>Now what?</h3></p>
|
||||
<p><h2>Now what?</h2></p>
|
||||
<p>Expo also has <a href="https://docs.expo.io">docs</a> you can reference if you have questions specific to the tool. You can also ask for help at <a href="https://forums.expo.io">Expo forums</a>.</p>
|
||||
<p>These tools help you get started quickly, but before committing to building your app with Expo CLI, <a href="https://docs.expo.io/versions/latest/introduction/why-not-expo/">read about the limitations</a>.</p>
|
||||
<p>If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it:</p>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="views-and-mobile-development"></a><a href="#views-and-mobile-development" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Views and mobile development</h2>
|
||||
<p>In Android and iOS development, a <strong>view</strong> is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!</p>
|
||||
<figure>
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views.">
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views." />
|
||||
<figcaption>Just a sampling of the many views used in Android and iOS apps.</figcaption>
|
||||
</figure>
|
||||
<h2><a class="anchor" aria-hidden="true" id="native-components"></a><a href="#native-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>Native Components</h2>
|
||||
@@ -82,7 +82,7 @@
|
||||
"
|
||||
></div></div></div><hr>
|
||||
<p>Because React Native uses the same API structure as React components, you’ll need to understand React component APIs to get started. The <a href="intro-react">next section</a> makes for a quick introduction or refresher on the topic. However, if you’re already familiar with React, feel free to <a href="handling-text-input">skip ahead</a>.</p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native."></p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native." /></p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#views-and-mobile-development">Views and mobile development</a></li><li><a href="#native-components">Native Components</a></li><li><a href="#core-components">Core Components</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="views-and-mobile-development"></a><a href="#views-and-mobile-development" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Views and mobile development</h2>
|
||||
<p>In Android and iOS development, a <strong>view</strong> is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!</p>
|
||||
<figure>
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views.">
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views." />
|
||||
<figcaption>Just a sampling of the many views used in Android and iOS apps.</figcaption>
|
||||
</figure>
|
||||
<h2><a class="anchor" aria-hidden="true" id="native-components"></a><a href="#native-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>Native Components</h2>
|
||||
@@ -82,7 +82,7 @@
|
||||
"
|
||||
></div></div></div><hr>
|
||||
<p>Because React Native uses the same API structure as React components, you’ll need to understand React component APIs to get started. The <a href="intro-react">next section</a> makes for a quick introduction or refresher on the topic. However, if you’re already familiar with React, feel free to <a href="handling-text-input">skip ahead</a>.</p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native."></p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native." /></p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#views-and-mobile-development">Views and mobile development</a></li><li><a href="#native-components">Native Components</a></li><li><a href="#core-components">Core Components</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
@@ -429,9 +429,9 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
</span></code></pre>
|
||||
<p><code>callNativeMethod</code> is our custom iOS method which for example changes the <code>backgroundColor</code> which is exposed through <code>MyNativeView</code>. This method uses <code>UIManager.dispatchViewManagerCommand</code> which needs 3 parameters:</p>
|
||||
<ul>
|
||||
<li>(nonnull NSNumber *)reactTag - id of react view.</li>
|
||||
<li>commandID:(NSInteger)commandID - Id of the native method that should be called</li>
|
||||
<li>commandArgs:(NSArray<id> *)commandArgs - Args of the native method that we can pass from JS to native.</li>
|
||||
<li><code>(nonnull NSNumber \*)reactTag</code> - id of react view.</li>
|
||||
<li><code>commandID:(NSInteger)commandID</code> - Id of the native method that should be called</li>
|
||||
<li><code>commandArgs:(NSArray<id> \*)commandArgs</code> - Args of the native method that we can pass from JS to native.</li>
|
||||
</ul>
|
||||
<p><code>RNCMyNativeViewManager.m</code></p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTViewManager.h></span></span>
|
||||
|
||||
@@ -429,9 +429,9 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
</span></code></pre>
|
||||
<p><code>callNativeMethod</code> is our custom iOS method which for example changes the <code>backgroundColor</code> which is exposed through <code>MyNativeView</code>. This method uses <code>UIManager.dispatchViewManagerCommand</code> which needs 3 parameters:</p>
|
||||
<ul>
|
||||
<li>(nonnull NSNumber *)reactTag - id of react view.</li>
|
||||
<li>commandID:(NSInteger)commandID - Id of the native method that should be called</li>
|
||||
<li>commandArgs:(NSArray<id> *)commandArgs - Args of the native method that we can pass from JS to native.</li>
|
||||
<li><code>(nonnull NSNumber \*)reactTag</code> - id of react view.</li>
|
||||
<li><code>commandID:(NSInteger)commandID</code> - Id of the native method that should be called</li>
|
||||
<li><code>commandArgs:(NSArray<id> \*)commandArgs</code> - Args of the native method that we can pass from JS to native.</li>
|
||||
</ul>
|
||||
<p><code>RNCMyNativeViewManager.m</code></p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTViewManager.h></span></span>
|
||||
|
||||
@@ -88,9 +88,9 @@
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</a>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</a>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</button>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</button>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</button>
|
||||
</span>
|
||||
</div>
|
||||
<p><block class="linux windows ios" /></p>
|
||||
|
||||
@@ -88,9 +88,9 @@
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</a>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</a>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</button>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</button>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</button>
|
||||
</span>
|
||||
</div>
|
||||
<p><block class="linux windows ios" /></p>
|
||||
|
||||
@@ -145,11 +145,11 @@
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>RCTTVRemoteHandler</code>, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by <code>RCTTVNavigationEventEmitter</code> (a subclass of <code>RCTEventEmitter</code>), that fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="android"></p>
|
||||
<p><block class="android" /></p>
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>ReactAndroidTVRootViewHelper</code>, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="ios android"></p>
|
||||
<p><block class="ios android" /></p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> TVEventHandler <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'TVEventHandler'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">Game2048</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -145,11 +145,11 @@
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>RCTTVRemoteHandler</code>, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by <code>RCTTVNavigationEventEmitter</code> (a subclass of <code>RCTEventEmitter</code>), that fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="android"></p>
|
||||
<p><block class="android" /></p>
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>ReactAndroidTVRootViewHelper</code>, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="ios android"></p>
|
||||
<p><block class="ios android" /></p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> TVEventHandler <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'TVEventHandler'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">Game2048</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -213,7 +213,7 @@
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<a href="./backhandler">
|
||||
<h3>BackHandler</a></h3>
|
||||
<h3>BackHandler</h3>
|
||||
<p>Detect hardware button presses for back navigation.</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -231,7 +231,7 @@
|
||||
</div>
|
||||
<div class="component">
|
||||
<a href="./permissionsandroid">
|
||||
<h3>PermissionsAndroid</a></h3>
|
||||
<h3>PermissionsAndroid</h3>
|
||||
<p>Provides access to the permissions model introduced in Android M.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -213,7 +213,7 @@
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<a href="./backhandler">
|
||||
<h3>BackHandler</a></h3>
|
||||
<h3>BackHandler</h3>
|
||||
<p>Detect hardware button presses for back navigation.</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -231,7 +231,7 @@
|
||||
</div>
|
||||
<div class="component">
|
||||
<a href="./permissionsandroid">
|
||||
<h3>PermissionsAndroid</a></h3>
|
||||
<h3>PermissionsAndroid</h3>
|
||||
<p>Provides access to the permissions model introduced in Android M.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
<p><h3>That's it!</h3></p>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native app.</p>
|
||||
<p><center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><h2>Now what?</h3></p>
|
||||
<p><h2>Now what?</h2></p>
|
||||
<p>Expo also has <a href="https://docs.expo.io">docs</a> you can reference if you have questions specific to the tool. You can also ask for help at <a href="https://forums.expo.io">Expo forums</a>.</p>
|
||||
<p>These tools help you get started quickly, but before committing to building your app with Expo CLI, <a href="https://docs.expo.io/versions/latest/introduction/why-not-expo/">read about the limitations</a>.</p>
|
||||
<p>If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it:</p>
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
<p><h3>That's it!</h3></p>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native app.</p>
|
||||
<p><center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><h2>Now what?</h3></p>
|
||||
<p><h2>Now what?</h2></p>
|
||||
<p>Expo also has <a href="https://docs.expo.io">docs</a> you can reference if you have questions specific to the tool. You can also ask for help at <a href="https://forums.expo.io">Expo forums</a>.</p>
|
||||
<p>These tools help you get started quickly, but before committing to building your app with Expo CLI, <a href="https://docs.expo.io/versions/latest/introduction/why-not-expo/">read about the limitations</a>.</p>
|
||||
<p>If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it:</p>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="views-and-mobile-development"></a><a href="#views-and-mobile-development" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Views and mobile development</h2>
|
||||
<p>In Android and iOS development, a <strong>view</strong> is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!</p>
|
||||
<figure>
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views.">
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views." />
|
||||
<figcaption>Just a sampling of the many views used in Android and iOS apps.</figcaption>
|
||||
</figure>
|
||||
<h2><a class="anchor" aria-hidden="true" id="native-components"></a><a href="#native-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>Native Components</h2>
|
||||
@@ -82,7 +82,7 @@
|
||||
"
|
||||
></div></div></div><hr>
|
||||
<p>Because React Native uses the same API structure as React components, you’ll need to understand React component APIs to get started. The <a href="intro-react">next section</a> makes for a quick introduction or refresher on the topic. However, if you’re already familiar with React, feel free to <a href="handling-text-input">skip ahead</a>.</p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native."></p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native." /></p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#views-and-mobile-development">Views and mobile development</a></li><li><a href="#native-components">Native Components</a></li><li><a href="#core-components">Core Components</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="views-and-mobile-development"></a><a href="#views-and-mobile-development" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Views and mobile development</h2>
|
||||
<p>In Android and iOS development, a <strong>view</strong> is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!</p>
|
||||
<figure>
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views.">
|
||||
<img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views." />
|
||||
<figcaption>Just a sampling of the many views used in Android and iOS apps.</figcaption>
|
||||
</figure>
|
||||
<h2><a class="anchor" aria-hidden="true" id="native-components"></a><a href="#native-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>Native Components</h2>
|
||||
@@ -82,7 +82,7 @@
|
||||
"
|
||||
></div></div></div><hr>
|
||||
<p>Because React Native uses the same API structure as React components, you’ll need to understand React component APIs to get started. The <a href="intro-react">next section</a> makes for a quick introduction or refresher on the topic. However, if you’re already familiar with React, feel free to <a href="handling-text-input">skip ahead</a>.</p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native."></p>
|
||||
<p><img src="/docs/assets/diagram_react-native-components.svg" width="1000" alt="A diagram showing React Native's Core Components are a subset of React Components that ship with React Native." /></p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#views-and-mobile-development">Views and mobile development</a></li><li><a href="#native-components">Native Components</a></li><li><a href="#core-components">Core Components</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
@@ -429,9 +429,9 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
</span></code></pre>
|
||||
<p><code>callNativeMethod</code> is our custom iOS method which for example changes the <code>backgroundColor</code> which is exposed through <code>MyNativeView</code>. This method uses <code>UIManager.dispatchViewManagerCommand</code> which needs 3 parameters:</p>
|
||||
<ul>
|
||||
<li>(nonnull NSNumber *)reactTag - id of react view.</li>
|
||||
<li>commandID:(NSInteger)commandID - Id of the native method that should be called</li>
|
||||
<li>commandArgs:(NSArray<id> *)commandArgs - Args of the native method that we can pass from JS to native.</li>
|
||||
<li><code>(nonnull NSNumber \*)reactTag</code> - id of react view.</li>
|
||||
<li><code>commandID:(NSInteger)commandID</code> - Id of the native method that should be called</li>
|
||||
<li><code>commandArgs:(NSArray<id> \*)commandArgs</code> - Args of the native method that we can pass from JS to native.</li>
|
||||
</ul>
|
||||
<p><code>RNCMyNativeViewManager.m</code></p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTViewManager.h></span></span>
|
||||
|
||||
@@ -429,9 +429,9 @@ MapView<span class="token punctuation">.</span>propTypes <span class="token oper
|
||||
</span></code></pre>
|
||||
<p><code>callNativeMethod</code> is our custom iOS method which for example changes the <code>backgroundColor</code> which is exposed through <code>MyNativeView</code>. This method uses <code>UIManager.dispatchViewManagerCommand</code> which needs 3 parameters:</p>
|
||||
<ul>
|
||||
<li>(nonnull NSNumber *)reactTag - id of react view.</li>
|
||||
<li>commandID:(NSInteger)commandID - Id of the native method that should be called</li>
|
||||
<li>commandArgs:(NSArray<id> *)commandArgs - Args of the native method that we can pass from JS to native.</li>
|
||||
<li><code>(nonnull NSNumber \*)reactTag</code> - id of react view.</li>
|
||||
<li><code>commandID:(NSInteger)commandID</code> - Id of the native method that should be called</li>
|
||||
<li><code>commandArgs:(NSArray<id> \*)commandArgs</code> - Args of the native method that we can pass from JS to native.</li>
|
||||
</ul>
|
||||
<p><code>RNCMyNativeViewManager.m</code></p>
|
||||
<pre><code class="hljs css language-objectivec"><span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTViewManager.h></span></span>
|
||||
|
||||
@@ -88,9 +88,9 @@
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</a>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</a>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</button>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</button>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</button>
|
||||
</span>
|
||||
</div>
|
||||
<p><block class="linux windows ios" /></p>
|
||||
|
||||
@@ -88,9 +88,9 @@
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<span role="tablist" id="toggle-os">
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</a>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</a>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
|
||||
<button role="tab" class="button-mac" onclick="displayTab('os', 'mac')">macOS</button>
|
||||
<button role="tab" class="button-linux" onclick="displayTab('os', 'linux')">Linux</button>
|
||||
<button role="tab" class="button-windows" onclick="displayTab('os', 'windows')">Windows</button>
|
||||
</span>
|
||||
</div>
|
||||
<p><block class="linux windows ios" /></p>
|
||||
|
||||
@@ -145,11 +145,11 @@
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>RCTTVRemoteHandler</code>, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by <code>RCTTVNavigationEventEmitter</code> (a subclass of <code>RCTEventEmitter</code>), that fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="android"></p>
|
||||
<p><block class="android" /></p>
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>ReactAndroidTVRootViewHelper</code>, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="ios android"></p>
|
||||
<p><block class="ios android" /></p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> TVEventHandler <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'TVEventHandler'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">Game2048</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -145,11 +145,11 @@
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>RCTTVRemoteHandler</code>, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by <code>RCTTVNavigationEventEmitter</code> (a subclass of <code>RCTEventEmitter</code>), that fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="android"></p>
|
||||
<p><block class="android" /></p>
|
||||
<ul>
|
||||
<li><em>TV remote/keyboard input</em>: A new native class, <code>ReactAndroidTVRootViewHelper</code>, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</li>
|
||||
</ul>
|
||||
<p><block class="ios android"></p>
|
||||
<p><block class="ios android" /></p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> TVEventHandler <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'TVEventHandler'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">Game2048</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||
|
||||
@@ -213,7 +213,7 @@
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<a href="./backhandler">
|
||||
<h3>BackHandler</a></h3>
|
||||
<h3>BackHandler</h3>
|
||||
<p>Detect hardware button presses for back navigation.</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -231,7 +231,7 @@
|
||||
</div>
|
||||
<div class="component">
|
||||
<a href="./permissionsandroid">
|
||||
<h3>PermissionsAndroid</a></h3>
|
||||
<h3>PermissionsAndroid</h3>
|
||||
<p>Provides access to the permissions model introduced in Android M.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -213,7 +213,7 @@
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<a href="./backhandler">
|
||||
<h3>BackHandler</a></h3>
|
||||
<h3>BackHandler</h3>
|
||||
<p>Detect hardware button presses for back navigation.</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -231,7 +231,7 @@
|
||||
</div>
|
||||
<div class="component">
|
||||
<a href="./permissionsandroid">
|
||||
<h3>PermissionsAndroid</a></h3>
|
||||
<h3>PermissionsAndroid</h3>
|
||||
<p>Provides access to the permissions model introduced in Android M.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
<p><h3>That's it!</h3></p>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native app.</p>
|
||||
<p><center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><h2>Now what?</h3></p>
|
||||
<p><h2>Now what?</h2></p>
|
||||
<p>Expo also has <a href="https://docs.expo.io">docs</a> you can reference if you have questions specific to the tool. You can also ask for help at <a href="https://forums.expo.io">Expo forums</a>.</p>
|
||||
<p>These tools help you get started quickly, but before committing to building your app with Expo CLI, <a href="https://docs.expo.io/versions/latest/introduction/why-not-expo/">read about the limitations</a>.</p>
|
||||
<p>If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it:</p>
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
<p><h3>That's it!</h3></p>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native app.</p>
|
||||
<p><center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><h2>Now what?</h3></p>
|
||||
<p><h2>Now what?</h2></p>
|
||||
<p>Expo also has <a href="https://docs.expo.io">docs</a> you can reference if you have questions specific to the tool. You can also ask for help at <a href="https://forums.expo.io">Expo forums</a>.</p>
|
||||
<p>These tools help you get started quickly, but before committing to building your app with Expo CLI, <a href="https://docs.expo.io/versions/latest/introduction/why-not-expo/">read about the limitations</a>.</p>
|
||||
<p>If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it:</p>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user