Updated docs for next

2025-11-01 09:14:26 +00:00 · 2017-08-04 23:49:49 +00:00
parent b606011c64
commit 78ed347e63
154 changed files with 304 additions and 246 deletions
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><title>0.36: Headless JS, the Keyboard API, &amp; more</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><meta property="fb:app_id" content="1677033832619985"><meta property="fb:admins" content="121800083"><meta property="og:site_name" content="React Native"><meta property="og:title" content="0.36: Headless JS, the Keyboard API, &amp; more"><meta property="og:url" content="https://facebook.github.io/react-native/blog/2016/10/25/0-36-headless-js-the-keyboard-api-and-more.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="Today we are releasing React Native 0.36. Read on to learn more about what&#x27;s new."><meta name="twitter:site" content="@reactnative"><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="article"><meta property="article:author" content="Héctor Ramos"><meta name="twitter:creator" content="@hectorramos"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><link rel="stylesheet" href="css/prism.css"><link rel="alternate" type="application/rss+xml" title="React Native Blog" href="https://facebook.github.io/react-native/blog/feed.xml"><link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><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><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="/react-native/support.html" class="">Help</a></li><li><a href="/react-native/blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><article class="entry-body"><header class="entry-header"><h4 class="entry-authordate"><a href="https://twitter.com/hectorramos" target="_blank" class="author">Héctor Ramos</a> — <time class="date">October 25, 2016</time></h4><h1 class="entry-title">0.36: Headless JS, the Keyboard API, &amp; more</h1></header><div class="entry-content"><div><p>Today we are releasing <a href="https://github.com/facebook/react-native/releases/tag/v0.36.0" target="_blank">React Native 0.36</a>. Read on to learn more about what&#x27;s new.</p><h2><a class="anchor" name="headless-js"></a>Headless JS <a class="hash-link" href="#headless-js">#</a></h2><p>Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music. It is only available on Android, for now.</p><p>To get started, define your async task in a dedicated file (e.g. <code>SomeTaskName.js</code>):</p><div class="prism language-javascript">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span>taskData<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+<!DOCTYPE html><html><head><title>0.36: Headless JS, the Keyboard API, &amp; more</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><meta property="fb:app_id" content="1677033832619985"><meta property="fb:admins" content="121800083"><meta property="og:site_name" content="React Native"><meta property="og:title" content="0.36: Headless JS, the Keyboard API, &amp; more"><meta property="og:url" content="https://facebook.github.io/react-native/blog/2016/10/25/0-36-headless-js-the-keyboard-api-and-more.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="Today we are releasing React Native 0.36. Read on to learn more about what&#x27;s new."><meta name="twitter:site" content="@reactnative"><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="article"><meta property="article:author" content="Héctor Ramos"><meta name="twitter:creator" content="@hectorramos"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><link rel="stylesheet" href="css/prism.css"><link rel="alternate" type="application/rss+xml" title="React Native Blog" href="https://facebook.github.io/react-native/blog/feed.xml"><link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><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><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="/react-native/support.html" class="">Community</a></li><li><a href="/react-native/blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><article class="entry-body"><header class="entry-header"><h4 class="entry-authordate"><a href="https://twitter.com/hectorramos" target="_blank" class="author">Héctor Ramos</a> — <time class="date">October 25, 2016</time></h4><h1 class="entry-title">0.36: Headless JS, the Keyboard API, &amp; more</h1></header><div class="entry-content"><div><p>Today we are releasing <a href="https://github.com/facebook/react-native/releases/tag/v0.36.0" target="_blank">React Native 0.36</a>. Read on to learn more about what&#x27;s new.</p><h2><a class="anchor" name="headless-js"></a>Headless JS <a class="hash-link" href="#headless-js">#</a></h2><p>Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music. It is only available on Android, for now.</p><p>To get started, define your async task in a dedicated file (e.g. <code>SomeTaskName.js</code>):</p><div class="prism language-javascript">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span>taskData<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
 <span class="token comment" spellcheck="true"> // Perform your task here.
 </span><span class="token punctuation">}</span></div><p>Next, register your task in on <code>AppRegistry</code>:</p><div class="prism language-javascript">AppRegistry<span class="token punctuation">.</span><span class="token function">registerHeadlessTask</span><span class="token punctuation">(</span><span class="token string">&#x27;SomeTaskName&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#x27;SomeTaskName&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Using Headless JS does require some native Java code to be written in order to allow you to start up the service when needed. Take a look at our new <a href="/react-native/docs/headless-js-android.html" target="">Headless JS docs</a> to learn more!</p><h2><a class="anchor" name="the-keyboard-api"></a>The Keyboard API <a class="hash-link" href="#the-keyboard-api">#</a></h2><p>Working with the on-screen keyboard is now easier with <a href="/react-native/docs/keyboard.html" target=""><code>Keyboard</code></a>. You can now listen for native keyboard events and react to them. For example, to dismiss the active keyboard, simply call <code>Keyboard.dismiss()</code>:</p><div class="prism language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> Keyboard <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#x27;react-native&#x27;</span>
 <span class="token comment" spellcheck="true">
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><title>idx: The Existential Function</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><meta property="fb:app_id" content="1677033832619985"><meta property="fb:admins" content="121800083"><meta property="og:site_name" content="React Native"><meta property="og:title" content="idx: The Existential Function"><meta property="og:url" content="https://facebook.github.io/react-native/blog/2017/03/13/idx-the-existential-function.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="At Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors."><meta name="twitter:site" content="@reactnative"><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="article"><meta property="article:author" content="Timothy Yung"><meta name="twitter:creator" content="@yungsters"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><link rel="stylesheet" href="css/prism.css"><link rel="alternate" type="application/rss+xml" title="React Native Blog" href="https://facebook.github.io/react-native/blog/feed.xml"><link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><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><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="/react-native/support.html" class="">Help</a></li><li><a href="/react-native/blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><article class="entry-body"><header class="entry-header"><h4 class="entry-authordate"><a href="https://github.com/yungsters" target="_blank" class="author">Timothy Yung</a> — <time class="date">March 13, 2017</time></h4><h1 class="entry-title">idx: The Existential Function</h1></header><div class="entry-content"><div><p>At Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors.</p><p>Unfortunately, accessing these deeply nested values is currently tedious and verbose.</p><div class="prism language-javascript">props<span class="token punctuation">.</span>user <span class="token operator">&amp;&amp;</span>
+<!DOCTYPE html><html><head><title>idx: The Existential Function</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><meta property="fb:app_id" content="1677033832619985"><meta property="fb:admins" content="121800083"><meta property="og:site_name" content="React Native"><meta property="og:title" content="idx: The Existential Function"><meta property="og:url" content="https://facebook.github.io/react-native/blog/2017/03/13/idx-the-existential-function.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="At Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors."><meta name="twitter:site" content="@reactnative"><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="article"><meta property="article:author" content="Timothy Yung"><meta name="twitter:creator" content="@yungsters"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><link rel="stylesheet" href="css/prism.css"><link rel="alternate" type="application/rss+xml" title="React Native Blog" href="https://facebook.github.io/react-native/blog/feed.xml"><link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><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><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="/react-native/support.html" class="">Community</a></li><li><a href="/react-native/blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><article class="entry-body"><header class="entry-header"><h4 class="entry-authordate"><a href="https://github.com/yungsters" target="_blank" class="author">Timothy Yung</a> — <time class="date">March 13, 2017</time></h4><h1 class="entry-title">idx: The Existential Function</h1></header><div class="entry-content"><div><p>At Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors.</p><p>Unfortunately, accessing these deeply nested values is currently tedious and verbose.</p><div class="prism language-javascript">props<span class="token punctuation">.</span>user <span class="token operator">&amp;&amp;</span>
 props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends <span class="token operator">&amp;&amp;</span>
 props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span>
 props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>friends</div><p>There is <a href="https://github.com/claudepache/es-optional-chaining" target="_blank">an ECMAScript proposal to introduce the existential operator</a> which will make this much more convenient. But until a time when that proposal is finalized, we want a solution that improves our quality of life, maintains existing language semantics, and encourages type safety with Flow.</p><p>We came up with an existential <em>function</em> we call <code>idx</code>.</p><div class="prism language-javascript"><span class="token function">idx</span><span class="token punctuation">(</span>props<span class="token punctuation">,</span> _ <span class="token operator">=&gt;</span> _<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>friends<span class="token punctuation">)</span></div><p>The invocation in this code snippet behaves similarly to the boolean expression in the code snippet above, except with significantly less repetition. The <code>idx</code> function takes exactly two arguments:</p><ul><li>Any value, typically an object or array into which you want to access a nested value.</li><li>A function that receives the first argument and accesses a nested value on it.</li></ul><p>In theory, the <code>idx</code> function will try-catch errors that are the result of accessing properties on null or undefined. If such an error is caught, it will return either null or undefined. (And you can see how this might be implemented in <a href="https://github.com/facebookincubator/idx/blob/master/packages/idx/src/idx.js" target="_blank">idx.js</a>.)</p><p>In practice, try-catching every nested property access is slow, and differentiating between specific kinds of TypeErrors is fragile. To deal with these shortcomings, we created a Babel plugin that transforms the above <code>idx</code> invocation into the following expression:</p><div class="prism language-javascript">props<span class="token punctuation">.</span>user <span class="token operator">==</span> <span class="token keyword">null</span> <span class="token operator">?</span> props<span class="token punctuation">.</span>user <span class="token punctuation">:</span>
--- a/Show More
+++ b/Show More