Deploy website

Deploy website version based on 7fa08f0ef0e3e783dd21e4b2eb286898a30bdaa8
This commit is contained in:
Website Deployment Script
2019-10-17 10:27:51 +00:00
parent 352e0fbbcf
commit baebb5e5c6
78 changed files with 268 additions and 278 deletions
+5 -5
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution."/><meta name="docsearch:version" content="0.44"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The `Animated` library is designed to make animations fluid, powerful, and easy to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution."/><meta name="docsearch:version" content="0.44"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The `Animated` library is designed to make animations fluid, powerful, and easy to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and painless to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and easy to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
<p>The simplest workflow for creating an animation is to to create an <code>Animated.Value</code>, hook it up to one or more style attributes of an animated component, and then drive updates via animations using <code>Animated.timing()</code>:</p>
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span>
<span class="token comment">// Animate value over time</span>
@@ -90,7 +90,7 @@
<p><code>Animated</code> provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:</p>
<ul>
<li><a href="/react-native/docs/0.44/animated#decay"><code>Animated.decay()</code></a> starts with an initial velocity and gradually slows to a stop.</li>
<li><a href="/react-native/docs/0.44/animated#spring"><code>Animated.spring()</code></a> provides a basic spring physics model.</li>
<li><a href="/react-native/docs/0.44/animated#spring"><code>Animated.spring()</code></a> provides a simple spring physics model.</li>
<li><a href="/react-native/docs/0.44/animated#timing"><code>Animated.timing()</code></a> animates a value over time using <a href="/react-native/docs/0.44/easing">easing functions</a>.</li>
</ul>
<p>In most cases, you will be using <code>timing()</code>. By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.</p>
@@ -100,7 +100,7 @@
<p>By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.</p>
<p>You can use the native driver by specifying <code>useNativeDriver: true</code> in your animation configuration. See the <a href="/react-native/docs/0.44/animations#using-the-native-driver">Animations</a> guide to learn more.</p>
<h3><a class="anchor" aria-hidden="true" id="animatable-components"></a><a href="#animatable-components" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Animatable components</h3>
<p>Only animatable components can be animated. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
<p>Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
<ul>
<li><a href="/react-native/docs/0.44/animated#createanimatedcomponent"><code>createAnimatedComponent()</code></a> can be used to make a component animatable.</li>
</ul>
@@ -119,7 +119,7 @@
<li><a href="/react-native/docs/0.44/animated#sequence"><code>Animated.sequence()</code></a> starts the animations in order, waiting for each to complete before starting the next.</li>
<li><a href="/react-native/docs/0.44/animated#stagger"><code>Animated.stagger()</code></a> starts animations in order and in parallel, but with successive delays.</li>
</ul>
<p>Animations can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.44/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
<p>Animations can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.44/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
<p>By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.</p>
<h3><a class="anchor" aria-hidden="true" id="combining-animated-values"></a><a href="#combining-animated-values" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Combining animated values</h3>
<p>You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:</p>
+5 -5
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution."/><meta name="docsearch:version" content="0.44"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The `Animated` library is designed to make animations fluid, powerful, and easy to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution."/><meta name="docsearch:version" content="0.44"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The `Animated` library is designed to make animations fluid, powerful, and easy to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and painless to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and easy to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
<p>The simplest workflow for creating an animation is to to create an <code>Animated.Value</code>, hook it up to one or more style attributes of an animated component, and then drive updates via animations using <code>Animated.timing()</code>:</p>
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span>
<span class="token comment">// Animate value over time</span>
@@ -90,7 +90,7 @@
<p><code>Animated</code> provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:</p>
<ul>
<li><a href="/react-native/docs/0.44/animated#decay"><code>Animated.decay()</code></a> starts with an initial velocity and gradually slows to a stop.</li>
<li><a href="/react-native/docs/0.44/animated#spring"><code>Animated.spring()</code></a> provides a basic spring physics model.</li>
<li><a href="/react-native/docs/0.44/animated#spring"><code>Animated.spring()</code></a> provides a simple spring physics model.</li>
<li><a href="/react-native/docs/0.44/animated#timing"><code>Animated.timing()</code></a> animates a value over time using <a href="/react-native/docs/0.44/easing">easing functions</a>.</li>
</ul>
<p>In most cases, you will be using <code>timing()</code>. By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.</p>
@@ -100,7 +100,7 @@
<p>By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.</p>
<p>You can use the native driver by specifying <code>useNativeDriver: true</code> in your animation configuration. See the <a href="/react-native/docs/0.44/animations#using-the-native-driver">Animations</a> guide to learn more.</p>
<h3><a class="anchor" aria-hidden="true" id="animatable-components"></a><a href="#animatable-components" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Animatable components</h3>
<p>Only animatable components can be animated. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
<p>Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
<ul>
<li><a href="/react-native/docs/0.44/animated#createanimatedcomponent"><code>createAnimatedComponent()</code></a> can be used to make a component animatable.</li>
</ul>
@@ -119,7 +119,7 @@
<li><a href="/react-native/docs/0.44/animated#sequence"><code>Animated.sequence()</code></a> starts the animations in order, waiting for each to complete before starting the next.</li>
<li><a href="/react-native/docs/0.44/animated#stagger"><code>Animated.stagger()</code></a> starts animations in order and in parallel, but with successive delays.</li>
</ul>
<p>Animations can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.44/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
<p>Animations can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.44/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
<p>By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.</p>
<h3><a class="anchor" aria-hidden="true" id="combining-animated-values"></a><a href="#combining-animated-values" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Combining animated values</h3>
<p>You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:</p>
+4 -4
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>FlatList · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A performant interface for rendering basic, flat lists, supporting the most handy features:"/><meta name="docsearch:version" content="0.44"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="FlatList · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A performant interface for rendering basic, flat lists, supporting the most handy features:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>FlatList · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A performant interface for rendering simple, flat lists, supporting the most handy features:"/><meta name="docsearch:version" content="0.44"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="FlatList · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A performant interface for rendering simple, flat lists, supporting the most handy features:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/flatlist.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">FlatList</h1></header><article><div><span><p>A performant interface for rendering basic, flat lists, supporting the most handy features:</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/flatlist.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">FlatList</h1></header><article><div><span><p>A performant interface for rendering simple, flat lists, supporting the most handy features:</p>
<ul>
<li>Fully cross-platform.</li>
<li>Optional horizontal mode.</li>
@@ -198,7 +198,7 @@ class MyList extends React.PureComponent {
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="data"></a><a href="#data" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>data</code></h3>
<p>For simplicity, data is a plain array. If you want to use something else, like an immutable list, use the underlying <code>VirtualizedList</code> directly.</p>
<p>For simplicity, data is just a plain array. If you want to use something else, like an immutable list, use the underlying <code>VirtualizedList</code> directly.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
@@ -282,7 +282,7 @@ class MyList extends React.PureComponent {
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="getitemlayout"></a><a href="#getitemlayout" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getItemLayout</code></h3>
<p><code>getItemLayout</code> is an optional optimizations that let us skip measurement of dynamic content if you know the height of items a priori. <code>getItemLayout</code> is efficient if you have fixed sized items, for example:</p>
<p><code>getItemLayout</code> is an optional optimizations that let us skip measurement of dynamic content if you know the height of items a priori. <code>getItemLayout</code> is the most efficient, and is easy to use if you have fixed height items, for example:</p>
<pre><code class="hljs">getItemLayout={(data, index) =&gt; (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
+4 -4
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>FlatList · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A performant interface for rendering basic, flat lists, supporting the most handy features:"/><meta name="docsearch:version" content="0.44"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="FlatList · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A performant interface for rendering basic, flat lists, supporting the most handy features:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>FlatList · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A performant interface for rendering simple, flat lists, supporting the most handy features:"/><meta name="docsearch:version" content="0.44"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="FlatList · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A performant interface for rendering simple, flat lists, supporting the most handy features:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/flatlist.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">FlatList</h1></header><article><div><span><p>A performant interface for rendering basic, flat lists, supporting the most handy features:</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/flatlist.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">FlatList</h1></header><article><div><span><p>A performant interface for rendering simple, flat lists, supporting the most handy features:</p>
<ul>
<li>Fully cross-platform.</li>
<li>Optional horizontal mode.</li>
@@ -198,7 +198,7 @@ class MyList extends React.PureComponent {
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="data"></a><a href="#data" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>data</code></h3>
<p>For simplicity, data is a plain array. If you want to use something else, like an immutable list, use the underlying <code>VirtualizedList</code> directly.</p>
<p>For simplicity, data is just a plain array. If you want to use something else, like an immutable list, use the underlying <code>VirtualizedList</code> directly.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
@@ -282,7 +282,7 @@ class MyList extends React.PureComponent {
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="getitemlayout"></a><a href="#getitemlayout" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getItemLayout</code></h3>
<p><code>getItemLayout</code> is an optional optimizations that let us skip measurement of dynamic content if you know the height of items a priori. <code>getItemLayout</code> is efficient if you have fixed sized items, for example:</p>
<p><code>getItemLayout</code> is an optional optimizations that let us skip measurement of dynamic content if you know the height of items a priori. <code>getItemLayout</code> is the most efficient, and is easy to use if you have fixed height items, for example:</p>
<pre><code class="hljs">getItemLayout={(data, index) =&gt; (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
+2 -2
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListView · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](listviewdatasource.md), populate it with an array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component."/><meta name="docsearch:version" content="0.44"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListView · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](listviewdatasource.md), populate it with an array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListView · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](listviewdatasource.md), populate it with a simple array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component."/><meta name="docsearch:version" content="0.44"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListView · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](listviewdatasource.md), populate it with a simple array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListView</h1></header><article><div><span><p>ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a <a href="listviewdatasource.md"><code>ListView.DataSource</code></a>, populate it with an array of data blobs, and instantiate a <code>ListView</code> component with that data source and a <code>renderRow</code> callback which takes a blob from the data array and returns a renderable component.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListView</h1></header><article><div><span><p>ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a <a href="listviewdatasource.md"><code>ListView.DataSource</code></a>, populate it with a simple array of data blobs, and instantiate a <code>ListView</code> component with that data source and a <code>renderRow</code> callback which takes a blob from the data array and returns a renderable component.</p>
<p>Minimal example:</p>
<pre><code class="hljs"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
<span class="hljs-keyword">constructor</span>() {
+2 -2
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListView · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](listviewdatasource.md), populate it with an array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component."/><meta name="docsearch:version" content="0.44"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListView · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](listviewdatasource.md), populate it with an array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListView · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](listviewdatasource.md), populate it with a simple array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component."/><meta name="docsearch:version" content="0.44"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListView · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](listviewdatasource.md), populate it with a simple array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListView</h1></header><article><div><span><p>ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a <a href="listviewdatasource.md"><code>ListView.DataSource</code></a>, populate it with an array of data blobs, and instantiate a <code>ListView</code> component with that data source and a <code>renderRow</code> callback which takes a blob from the data array and returns a renderable component.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListView</h1></header><article><div><span><p>ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a <a href="listviewdatasource.md"><code>ListView.DataSource</code></a>, populate it with a simple array of data blobs, and instantiate a <code>ListView</code> component with that data source and a <code>renderRow</code> callback which takes a blob from the data array and returns a renderable component.</p>
<p>Minimal example:</p>
<pre><code class="hljs"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
<span class="hljs-keyword">constructor</span>() {
+5 -5
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects."/><meta name="docsearch:version" content="0.44"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><meta name="docsearch:version" content="0.44"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,8 +68,8 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listviewdatasource.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects.</p>
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods feed from the new data and compute a diff for each row so ListView knows whether to re-render it or not.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listviewdatasource.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects.</p>
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods suck in the new data and compute a diff for each row so ListView knows whether to re-render it or not.</p>
<p>In this example, a component receives data in chunks, handled by <code>_onDataArrived</code>, which concats the new data onto the old data and updates the data source. We use <code>concat</code> to create a new array - mutating <code>this._data</code>, e.g. with <code>this._data.push(newRowData)</code>, would be an error. <code>_rowHasChanged</code> understands the shape of the row data and knows how to efficiently compare it.</p>
<pre><code class="hljs">getInitialState: function() {
<span class="hljs-keyword">var</span> ds = new ListViewDataSource({rowHasChanged: <span class="hljs-keyword">this</span>._rowHasChanged});
@@ -124,9 +124,9 @@ _onDataArrived(newData) {
<h3><a class="anchor" aria-hidden="true" id="clonewithrows"></a><a href="#clonewithrows" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>cloneWithRows()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRows</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is only an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is just an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
<p>The <code>rowIdentities</code> is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities.</p>
<p>Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
<p>Note: This function does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="clonewithrowsandsections"></a><a href="#clonewithrowsandsections" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>cloneWithRowsAndSections()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRowsAndSections</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> sectionIdentities<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</span><span class="token punctuation">;</span>
+5 -5
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects."/><meta name="docsearch:version" content="0.44"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><meta name="docsearch:version" content="0.44"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,8 +68,8 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listviewdatasource.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects.</p>
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods feed from the new data and compute a diff for each row so ListView knows whether to re-render it or not.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listviewdatasource.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects.</p>
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods suck in the new data and compute a diff for each row so ListView knows whether to re-render it or not.</p>
<p>In this example, a component receives data in chunks, handled by <code>_onDataArrived</code>, which concats the new data onto the old data and updates the data source. We use <code>concat</code> to create a new array - mutating <code>this._data</code>, e.g. with <code>this._data.push(newRowData)</code>, would be an error. <code>_rowHasChanged</code> understands the shape of the row data and knows how to efficiently compare it.</p>
<pre><code class="hljs">getInitialState: function() {
<span class="hljs-keyword">var</span> ds = new ListViewDataSource({rowHasChanged: <span class="hljs-keyword">this</span>._rowHasChanged});
@@ -124,9 +124,9 @@ _onDataArrived(newData) {
<h3><a class="anchor" aria-hidden="true" id="clonewithrows"></a><a href="#clonewithrows" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>cloneWithRows()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRows</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is only an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is just an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
<p>The <code>rowIdentities</code> is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities.</p>
<p>Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
<p>Note: This function does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="clonewithrowsandsections"></a><a href="#clonewithrowsandsections" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>cloneWithRowsAndSections()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRowsAndSections</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> sectionIdentities<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</span><span class="token punctuation">;</span>
+2 -2
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Modal · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The Modal component is a basic way to present content above an enclosing view."/><meta name="docsearch:version" content="0.44"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Modal · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The Modal component is a basic way to present content above an enclosing view."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Modal · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The Modal component is a simple way to present content above an enclosing view."/><meta name="docsearch:version" content="0.44"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Modal · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The Modal component is a simple way to present content above an enclosing view."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/modal.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Modal</h1></header><article><div><span><p>The Modal component is a basic way to present content above an enclosing view.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/modal.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Modal</h1></header><article><div><span><p>The Modal component is a simple way to present content above an enclosing view.</p>
<p><em>Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.</em></p>
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>Modal<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">,</span> View<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
+2 -2
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Modal · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The Modal component is a basic way to present content above an enclosing view."/><meta name="docsearch:version" content="0.44"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Modal · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The Modal component is a basic way to present content above an enclosing view."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Modal · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The Modal component is a simple way to present content above an enclosing view."/><meta name="docsearch:version" content="0.44"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Modal · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The Modal component is a simple way to present content above an enclosing view."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/modal.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Modal</h1></header><article><div><span><p>The Modal component is a basic way to present content above an enclosing view.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/modal.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Modal</h1></header><article><div><span><p>The Modal component is a simple way to present content above an enclosing view.</p>
<p><em>Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.</em></p>
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>Modal<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">,</span> View<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
+2 -3
View File
@@ -248,7 +248,6 @@ render() {
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="interactivepopgestureenabled"></a><a href="#interactivepopgestureenabled" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>interactivePopGestureEnabled</code></h3>
<!-- alex ignore retext-equality -->
<p>Boolean value that indicates whether the interactive pop gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture.</p>
<p>If this prop is not provided, the default behavior is for the back swipe gesture to be enabled when the navigation bar is shown and disabled when the navigation bar is hidden. Once you've provided the <code>interactivePopGestureEnabled</code> prop, you can never restore the default behavior.</p>
<table>
@@ -357,7 +356,7 @@ render() {
<h3><a class="anchor" aria-hidden="true" id="pop"></a><a href="#pop" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>pop()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Get and remove the previous scene.</p>
<p>Pop back to the previous scene.</p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="replaceatindex"></a><a href="#replaceatindex" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>replaceAtIndex()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">replaceAtIndex</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>index<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@@ -438,7 +437,7 @@ render() {
<h3><a class="anchor" aria-hidden="true" id="resetto"></a><a href="#resetto" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>resetTo()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">resetTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Replaces the top item, gets back to and removes it.</p>
<p>Replaces the top item and pop to it.</p>
<p><strong>Parameters:</strong></p>
<table>
<thead>
+2 -3
View File
@@ -248,7 +248,6 @@ render() {
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="interactivepopgestureenabled"></a><a href="#interactivepopgestureenabled" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>interactivePopGestureEnabled</code></h3>
<!-- alex ignore retext-equality -->
<p>Boolean value that indicates whether the interactive pop gesture is enabled. This is useful for enabling/disabling the back swipe navigation gesture.</p>
<p>If this prop is not provided, the default behavior is for the back swipe gesture to be enabled when the navigation bar is shown and disabled when the navigation bar is hidden. Once you've provided the <code>interactivePopGestureEnabled</code> prop, you can never restore the default behavior.</p>
<table>
@@ -357,7 +356,7 @@ render() {
<h3><a class="anchor" aria-hidden="true" id="pop"></a><a href="#pop" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>pop()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Get and remove the previous scene.</p>
<p>Pop back to the previous scene.</p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="replaceatindex"></a><a href="#replaceatindex" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>replaceAtIndex()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">replaceAtIndex</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>index<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@@ -438,7 +437,7 @@ render() {
<h3><a class="anchor" aria-hidden="true" id="resetto"></a><a href="#resetto" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>resetTo()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">resetTo</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Replaces the top item, gets back to and removes it.</p>
<p>Replaces the top item and pop to it.</p>
<p><strong>Parameters:</strong></p>
<table>
<thead>
+4 -5
View File
@@ -69,12 +69,12 @@
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/scrollview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ScrollView</h1></header><article><div><span><p>Component that wraps platform ScrollView while providing integration with touch locking &quot;responder&quot; system.</p>
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes quick to debug.</p>
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes easy to debug.</p>
<p>Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.</p>
<p><code>&lt;ScrollView&gt;</code> vs <a href="/react-native/docs/0.44/flatlist"><code>&lt;FlatList&gt;</code></a> - which one to use?</p>
<p><code>ScrollView</code> renders all its react child components at once, but this has a performance downside.</p>
<p>Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everythign all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.</p>
<p>This is where <code>FlatList</code> comes into play. <code>FlatList</code> renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.</p>
<p><code>ScrollView</code> simply renders all its react child components at once. That makes it very easy to understand and use.</p>
<p>On the other hand, this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everythign all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.</p>
<p>This is where <code>FlatList</code> comes into play. <code>FlatList</code> renders items lazily, just when they are about to appear, and removes items that scroll way off screen to save memory and processing time.</p>
<p><code>FlatList</code> is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.</p>
<h3><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h3>
<ul>
@@ -490,7 +490,6 @@
<hr>
<h3><a class="anchor" aria-hidden="true" id="indicatorstyle"></a><a href="#indicatorstyle" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>indicatorStyle</code></h3>
<p>The style of the scroll indicators.</p>
<!-- alex ignore retext-profanities -->
<ul>
<li><code>default</code> (the default), same as <code>black</code>.</li>
<li><code>black</code>, scroll indicator is black. This style is good against a light background.</li>
+4 -5
View File
@@ -69,12 +69,12 @@
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/scrollview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ScrollView</h1></header><article><div><span><p>Component that wraps platform ScrollView while providing integration with touch locking &quot;responder&quot; system.</p>
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes quick to debug.</p>
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes easy to debug.</p>
<p>Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.</p>
<p><code>&lt;ScrollView&gt;</code> vs <a href="/react-native/docs/0.44/flatlist"><code>&lt;FlatList&gt;</code></a> - which one to use?</p>
<p><code>ScrollView</code> renders all its react child components at once, but this has a performance downside.</p>
<p>Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everythign all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.</p>
<p>This is where <code>FlatList</code> comes into play. <code>FlatList</code> renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.</p>
<p><code>ScrollView</code> simply renders all its react child components at once. That makes it very easy to understand and use.</p>
<p>On the other hand, this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everythign all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.</p>
<p>This is where <code>FlatList</code> comes into play. <code>FlatList</code> renders items lazily, just when they are about to appear, and removes items that scroll way off screen to save memory and processing time.</p>
<p><code>FlatList</code> is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.</p>
<h3><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h3>
<ul>
@@ -490,7 +490,6 @@
<hr>
<h3><a class="anchor" aria-hidden="true" id="indicatorstyle"></a><a href="#indicatorstyle" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>indicatorStyle</code></h3>
<p>The style of the scroll indicators.</p>
<!-- alex ignore retext-profanities -->
<ul>
<li><code>default</code> (the default), same as <code>black</code>.</li>
<li><code>black</code>, scroll indicator is black. This style is good against a light background.</li>
+1 -1
View File
@@ -83,7 +83,7 @@
</ul>
<p>If you don't need section support and want a simpler interface, use <a href="/react-native/docs/0.44/flatlist"><code>&lt;FlatList&gt;</code></a>.</p>
<p>If you need <em>sticky</em> section header support, use <code>ListView</code> for now.</p>
<p>Examples:</p>
<p>Simple Examples:</p>
<pre><code class="hljs">&lt;SectionList
renderItem={({item}) =&gt; &lt;ListItem title={item.title}}
renderSectionHeader={({section}) =&gt; &lt;H1 title={section.key} /&gt;}
+1 -1
View File
@@ -83,7 +83,7 @@
</ul>
<p>If you don't need section support and want a simpler interface, use <a href="/react-native/docs/0.44/flatlist"><code>&lt;FlatList&gt;</code></a>.</p>
<p>If you need <em>sticky</em> section header support, use <code>ListView</code> for now.</p>
<p>Examples:</p>
<p>Simple Examples:</p>
<pre><code class="hljs">&lt;SectionList
renderItem={({item}) =&gt; &lt;ListItem title={item.title}}
renderSectionHeader={({section}) =&gt; &lt;H1 title={section.key} /&gt;}
+3 -3
View File
@@ -69,7 +69,7 @@
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/textinput.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">TextInput</h1></header><article><div><span><p>A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.</p>
<p>The most basic use case is to plop down a <code>TextInput</code> and subscribe to the <code>onChangeText</code> events to read the user input. There are also other events, such as <code>onSubmitEditing</code> and <code>onFocus</code> that can be subscribed to. A minimal example:</p>
<p>The simplest use case is to plop down a <code>TextInput</code> and subscribe to the <code>onChangeText</code> events to read the user input. There are also other events, such as <code>onSubmitEditing</code> and <code>onFocus</code> that can be subscribed to. A simple example:</p>
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> { AppRegistry, TextInput } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
@@ -316,7 +316,7 @@ AppRegistry.registerComponent(
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="defaultvalue"></a><a href="#defaultvalue" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>defaultValue</code></h3>
<p>Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.</p>
<p>Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
@@ -578,7 +578,7 @@ AppRegistry.registerComponent(
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="value"></a><a href="#value" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>value</code></h3>
<p>The value to show for the text input. <code>TextInput</code> is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent unwanted edits without flicker.</p>
<p>The value to show for the text input. <code>TextInput</code> is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent unwanted edits without flicker.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
+3 -3
View File
@@ -69,7 +69,7 @@
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/textinput.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">TextInput</h1></header><article><div><span><p>A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.</p>
<p>The most basic use case is to plop down a <code>TextInput</code> and subscribe to the <code>onChangeText</code> events to read the user input. There are also other events, such as <code>onSubmitEditing</code> and <code>onFocus</code> that can be subscribed to. A minimal example:</p>
<p>The simplest use case is to plop down a <code>TextInput</code> and subscribe to the <code>onChangeText</code> events to read the user input. There are also other events, such as <code>onSubmitEditing</code> and <code>onFocus</code> that can be subscribed to. A simple example:</p>
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> { AppRegistry, TextInput } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
@@ -316,7 +316,7 @@ AppRegistry.registerComponent(
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="defaultvalue"></a><a href="#defaultvalue" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>defaultValue</code></h3>
<p>Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.</p>
<p>Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
@@ -578,7 +578,7 @@ AppRegistry.registerComponent(
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="value"></a><a href="#value" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>value</code></h3>
<p>The value to show for the text input. <code>TextInput</code> is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent unwanted edits without flicker.</p>
<p>The value to show for the text input. <code>TextInput</code> is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent unwanted edits without flicker.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
+2 -2
View File
@@ -371,7 +371,7 @@
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="removeclippedsubviews"></a><a href="#removeclippedsubviews" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeClippedSubviews</code></h3>
<p>This is a reserved performance property exposed by <code>RCTView</code> and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have <code>overflow: hidden</code>, as should the containing view (or one of its superviews).</p>
<p>This is a special performance property exposed by <code>RCTView</code> and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have <code>overflow: hidden</code>, as should the containing view (or one of its superviews).</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
@@ -484,7 +484,7 @@
<hr>
<h3><a class="anchor" aria-hidden="true" id="rendertohardwaretextureandroid"></a><a href="#rendertohardwaretextureandroid" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>renderToHardwareTextureAndroid</code></h3>
<p>Whether this <code>View</code> should render itself (and all of its children) into a single hardware texture on the GPU.</p>
<p>On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.</p>
<p>On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can just be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
+2 -2
View File
@@ -371,7 +371,7 @@
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="removeclippedsubviews"></a><a href="#removeclippedsubviews" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeClippedSubviews</code></h3>
<p>This is a reserved performance property exposed by <code>RCTView</code> and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have <code>overflow: hidden</code>, as should the containing view (or one of its superviews).</p>
<p>This is a special performance property exposed by <code>RCTView</code> and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have <code>overflow: hidden</code>, as should the containing view (or one of its superviews).</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
@@ -484,7 +484,7 @@
<hr>
<h3><a class="anchor" aria-hidden="true" id="rendertohardwaretextureandroid"></a><a href="#rendertohardwaretextureandroid" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>renderToHardwareTextureAndroid</code></h3>
<p>Whether this <code>View</code> should render itself (and all of its children) into a single hardware texture on the GPU.</p>
<p>On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.</p>
<p>On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can just be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
+5 -5
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution."/><meta name="docsearch:version" content="0.45"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The `Animated` library is designed to make animations fluid, powerful, and easy to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution."/><meta name="docsearch:version" content="0.45"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The `Animated` library is designed to make animations fluid, powerful, and easy to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and painless to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and easy to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
<p>The simplest workflow for creating an animation is to to create an <code>Animated.Value</code>, hook it up to one or more style attributes of an animated component, and then drive updates via animations using <code>Animated.timing()</code>:</p>
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span>
<span class="token comment">// Animate value over time</span>
@@ -90,7 +90,7 @@
<p><code>Animated</code> provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:</p>
<ul>
<li><a href="/react-native/docs/0.45/animated#decay"><code>Animated.decay()</code></a> starts with an initial velocity and gradually slows to a stop.</li>
<li><a href="/react-native/docs/0.45/animated#spring"><code>Animated.spring()</code></a> provides a basic spring physics model.</li>
<li><a href="/react-native/docs/0.45/animated#spring"><code>Animated.spring()</code></a> provides a simple spring physics model.</li>
<li><a href="/react-native/docs/0.45/animated#timing"><code>Animated.timing()</code></a> animates a value over time using <a href="/react-native/docs/0.45/easing">easing functions</a>.</li>
</ul>
<p>In most cases, you will be using <code>timing()</code>. By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.</p>
@@ -100,7 +100,7 @@
<p>By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.</p>
<p>You can use the native driver by specifying <code>useNativeDriver: true</code> in your animation configuration. See the <a href="/react-native/docs/0.45/animations#using-the-native-driver">Animations</a> guide to learn more.</p>
<h3><a class="anchor" aria-hidden="true" id="animatable-components"></a><a href="#animatable-components" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Animatable components</h3>
<p>Only animatable components can be animated. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
<p>Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
<ul>
<li><a href="/react-native/docs/0.45/animated#createanimatedcomponent"><code>createAnimatedComponent()</code></a> can be used to make a component animatable.</li>
</ul>
@@ -119,7 +119,7 @@
<li><a href="/react-native/docs/0.45/animated#sequence"><code>Animated.sequence()</code></a> starts the animations in order, waiting for each to complete before starting the next.</li>
<li><a href="/react-native/docs/0.45/animated#stagger"><code>Animated.stagger()</code></a> starts animations in order and in parallel, but with successive delays.</li>
</ul>
<p>Animations can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.45/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
<p>Animations can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.45/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
<p>By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.</p>
<h3><a class="anchor" aria-hidden="true" id="combining-animated-values"></a><a href="#combining-animated-values" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Combining animated values</h3>
<p>You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:</p>
+5 -5
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution."/><meta name="docsearch:version" content="0.45"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The `Animated` library is designed to make animations fluid, powerful, and easy to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution."/><meta name="docsearch:version" content="0.45"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The `Animated` library is designed to make animations fluid, powerful, and easy to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and painless to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and easy to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
<p>The simplest workflow for creating an animation is to to create an <code>Animated.Value</code>, hook it up to one or more style attributes of an animated component, and then drive updates via animations using <code>Animated.timing()</code>:</p>
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span>
<span class="token comment">// Animate value over time</span>
@@ -90,7 +90,7 @@
<p><code>Animated</code> provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:</p>
<ul>
<li><a href="/react-native/docs/0.45/animated#decay"><code>Animated.decay()</code></a> starts with an initial velocity and gradually slows to a stop.</li>
<li><a href="/react-native/docs/0.45/animated#spring"><code>Animated.spring()</code></a> provides a basic spring physics model.</li>
<li><a href="/react-native/docs/0.45/animated#spring"><code>Animated.spring()</code></a> provides a simple spring physics model.</li>
<li><a href="/react-native/docs/0.45/animated#timing"><code>Animated.timing()</code></a> animates a value over time using <a href="/react-native/docs/0.45/easing">easing functions</a>.</li>
</ul>
<p>In most cases, you will be using <code>timing()</code>. By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.</p>
@@ -100,7 +100,7 @@
<p>By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.</p>
<p>You can use the native driver by specifying <code>useNativeDriver: true</code> in your animation configuration. See the <a href="/react-native/docs/0.45/animations#using-the-native-driver">Animations</a> guide to learn more.</p>
<h3><a class="anchor" aria-hidden="true" id="animatable-components"></a><a href="#animatable-components" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Animatable components</h3>
<p>Only animatable components can be animated. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
<p>Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
<ul>
<li><a href="/react-native/docs/0.45/animated#createanimatedcomponent"><code>createAnimatedComponent()</code></a> can be used to make a component animatable.</li>
</ul>
@@ -119,7 +119,7 @@
<li><a href="/react-native/docs/0.45/animated#sequence"><code>Animated.sequence()</code></a> starts the animations in order, waiting for each to complete before starting the next.</li>
<li><a href="/react-native/docs/0.45/animated#stagger"><code>Animated.stagger()</code></a> starts animations in order and in parallel, but with successive delays.</li>
</ul>
<p>Animations can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.45/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
<p>Animations can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.45/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
<p>By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.</p>
<h3><a class="anchor" aria-hidden="true" id="combining-animated-values"></a><a href="#combining-animated-values" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Combining animated values</h3>
<p>You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:</p>
+2 -2
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListView · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](listviewdatasource.md), populate it with an array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component."/><meta name="docsearch:version" content="0.45"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListView · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](listviewdatasource.md), populate it with an array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListView · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](listviewdatasource.md), populate it with a simple array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component."/><meta name="docsearch:version" content="0.45"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListView · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](listviewdatasource.md), populate it with a simple array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListView</h1></header><article><div><span><p>ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a <a href="listviewdatasource.md"><code>ListView.DataSource</code></a>, populate it with an array of data blobs, and instantiate a <code>ListView</code> component with that data source and a <code>renderRow</code> callback which takes a blob from the data array and returns a renderable component.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListView</h1></header><article><div><span><p>ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a <a href="listviewdatasource.md"><code>ListView.DataSource</code></a>, populate it with a simple array of data blobs, and instantiate a <code>ListView</code> component with that data source and a <code>renderRow</code> callback which takes a blob from the data array and returns a renderable component.</p>
<p>Minimal example:</p>
<pre><code class="hljs"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
<span class="hljs-keyword">constructor</span>() {
+2 -2
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListView · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](listviewdatasource.md), populate it with an array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component."/><meta name="docsearch:version" content="0.45"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListView · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](listviewdatasource.md), populate it with an array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListView · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](listviewdatasource.md), populate it with a simple array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component."/><meta name="docsearch:version" content="0.45"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListView · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a [`ListView.DataSource`](listviewdatasource.md), populate it with a simple array of data blobs, and instantiate a `ListView` component with that data source and a `renderRow` callback which takes a blob from the data array and returns a renderable component."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListView</h1></header><article><div><span><p>ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a <a href="listviewdatasource.md"><code>ListView.DataSource</code></a>, populate it with an array of data blobs, and instantiate a <code>ListView</code> component with that data source and a <code>renderRow</code> callback which takes a blob from the data array and returns a renderable component.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListView</h1></header><article><div><span><p>ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a <a href="listviewdatasource.md"><code>ListView.DataSource</code></a>, populate it with a simple array of data blobs, and instantiate a <code>ListView</code> component with that data source and a <code>renderRow</code> callback which takes a blob from the data array and returns a renderable component.</p>
<p>Minimal example:</p>
<pre><code class="hljs"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
<span class="hljs-keyword">constructor</span>() {
+5 -5
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects."/><meta name="docsearch:version" content="0.45"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><meta name="docsearch:version" content="0.45"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,8 +68,8 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listviewdatasource.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects.</p>
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods feed from the new data and compute a diff for each row so ListView knows whether to re-render it or not.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listviewdatasource.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects.</p>
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods suck in the new data and compute a diff for each row so ListView knows whether to re-render it or not.</p>
<p>In this example, a component receives data in chunks, handled by <code>_onDataArrived</code>, which concats the new data onto the old data and updates the data source. We use <code>concat</code> to create a new array - mutating <code>this._data</code>, e.g. with <code>this._data.push(newRowData)</code>, would be an error. <code>_rowHasChanged</code> understands the shape of the row data and knows how to efficiently compare it.</p>
<pre><code class="hljs">getInitialState: function() {
<span class="hljs-keyword">var</span> ds = new ListViewDataSource({rowHasChanged: <span class="hljs-keyword">this</span>._rowHasChanged});
@@ -124,9 +124,9 @@ _onDataArrived(newData) {
<h3><a class="anchor" aria-hidden="true" id="clonewithrows"></a><a href="#clonewithrows" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>cloneWithRows()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRows</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is only an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is just an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
<p>The <code>rowIdentities</code> is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities.</p>
<p>Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
<p>Note: This function does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="clonewithrowsandsections"></a><a href="#clonewithrowsandsections" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>cloneWithRowsAndSections()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRowsAndSections</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> sectionIdentities<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</span><span class="token punctuation">;</span>
+5 -5
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects."/><meta name="docsearch:version" content="0.45"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><meta name="docsearch:version" content="0.45"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,8 +68,8 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listviewdatasource.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects.</p>
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods feed from the new data and compute a diff for each row so ListView knows whether to re-render it or not.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listviewdatasource.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects.</p>
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods suck in the new data and compute a diff for each row so ListView knows whether to re-render it or not.</p>
<p>In this example, a component receives data in chunks, handled by <code>_onDataArrived</code>, which concats the new data onto the old data and updates the data source. We use <code>concat</code> to create a new array - mutating <code>this._data</code>, e.g. with <code>this._data.push(newRowData)</code>, would be an error. <code>_rowHasChanged</code> understands the shape of the row data and knows how to efficiently compare it.</p>
<pre><code class="hljs">getInitialState: function() {
<span class="hljs-keyword">var</span> ds = new ListViewDataSource({rowHasChanged: <span class="hljs-keyword">this</span>._rowHasChanged});
@@ -124,9 +124,9 @@ _onDataArrived(newData) {
<h3><a class="anchor" aria-hidden="true" id="clonewithrows"></a><a href="#clonewithrows" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>cloneWithRows()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRows</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is only an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is just an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
<p>The <code>rowIdentities</code> is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities.</p>
<p>Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
<p>Note: This function does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="clonewithrowsandsections"></a><a href="#clonewithrowsandsections" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>cloneWithRowsAndSections()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRowsAndSections</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> sectionIdentities<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</span><span class="token punctuation">;</span>
+2 -2
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Modal · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The Modal component is a basic way to present content above an enclosing view."/><meta name="docsearch:version" content="0.45"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Modal · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The Modal component is a basic way to present content above an enclosing view."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Modal · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The Modal component is a simple way to present content above an enclosing view."/><meta name="docsearch:version" content="0.45"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Modal · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The Modal component is a simple way to present content above an enclosing view."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/modal.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Modal</h1></header><article><div><span><p>The Modal component is a basic way to present content above an enclosing view.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/modal.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Modal</h1></header><article><div><span><p>The Modal component is a simple way to present content above an enclosing view.</p>
<p><em>Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.</em></p>
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>Modal<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">,</span> View<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
+2 -2
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Modal · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The Modal component is a basic way to present content above an enclosing view."/><meta name="docsearch:version" content="0.45"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Modal · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The Modal component is a basic way to present content above an enclosing view."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Modal · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The Modal component is a simple way to present content above an enclosing view."/><meta name="docsearch:version" content="0.45"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Modal · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The Modal component is a simple way to present content above an enclosing view."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/modal.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Modal</h1></header><article><div><span><p>The Modal component is a basic way to present content above an enclosing view.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/modal.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Modal</h1></header><article><div><span><p>The Modal component is a simple way to present content above an enclosing view.</p>
<p><em>Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.</em></p>
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>Modal<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">,</span> View<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
+5 -5
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects."/><meta name="docsearch:version" content="0.46"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><meta name="docsearch:version" content="0.46"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,8 +68,8 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listviewdatasource.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects.</p>
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods feed from the new data and compute a diff for each row so ListView knows whether to re-render it or not.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listviewdatasource.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects.</p>
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods suck in the new data and compute a diff for each row so ListView knows whether to re-render it or not.</p>
<p>In this example, a component receives data in chunks, handled by <code>_onDataArrived</code>, which concats the new data onto the old data and updates the data source. We use <code>concat</code> to create a new array - mutating <code>this._data</code>, e.g. with <code>this._data.push(newRowData)</code>, would be an error. <code>_rowHasChanged</code> understands the shape of the row data and knows how to efficiently compare it.</p>
<pre><code class="hljs">getInitialState: function() {
<span class="hljs-keyword">var</span> ds = new ListViewDataSource({rowHasChanged: <span class="hljs-keyword">this</span>._rowHasChanged});
@@ -124,9 +124,9 @@ _onDataArrived(newData) {
<h3><a class="anchor" aria-hidden="true" id="clonewithrows"></a><a href="#clonewithrows" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>cloneWithRows()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRows</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is only an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is just an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
<p>The <code>rowIdentities</code> is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities.</p>
<p>Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
<p>Note: This function does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="clonewithrowsandsections"></a><a href="#clonewithrowsandsections" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>cloneWithRowsAndSections()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRowsAndSections</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> sectionIdentities<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</span><span class="token punctuation">;</span>
+5 -5
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects."/><meta name="docsearch:version" content="0.46"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><meta name="docsearch:version" content="0.46"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,8 +68,8 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listviewdatasource.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects.</p>
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods feed from the new data and compute a diff for each row so ListView knows whether to re-render it or not.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listviewdatasource.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects.</p>
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods suck in the new data and compute a diff for each row so ListView knows whether to re-render it or not.</p>
<p>In this example, a component receives data in chunks, handled by <code>_onDataArrived</code>, which concats the new data onto the old data and updates the data source. We use <code>concat</code> to create a new array - mutating <code>this._data</code>, e.g. with <code>this._data.push(newRowData)</code>, would be an error. <code>_rowHasChanged</code> understands the shape of the row data and knows how to efficiently compare it.</p>
<pre><code class="hljs">getInitialState: function() {
<span class="hljs-keyword">var</span> ds = new ListViewDataSource({rowHasChanged: <span class="hljs-keyword">this</span>._rowHasChanged});
@@ -124,9 +124,9 @@ _onDataArrived(newData) {
<h3><a class="anchor" aria-hidden="true" id="clonewithrows"></a><a href="#clonewithrows" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>cloneWithRows()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRows</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is only an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is just an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
<p>The <code>rowIdentities</code> is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities.</p>
<p>Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
<p>Note: This function does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="clonewithrowsandsections"></a><a href="#clonewithrowsandsections" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>cloneWithRowsAndSections()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRowsAndSections</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> sectionIdentities<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</span><span class="token punctuation">;</span>
+2 -2
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Modal · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The Modal component is a basic way to present content above an enclosing view."/><meta name="docsearch:version" content="0.46"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Modal · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The Modal component is a basic way to present content above an enclosing view."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Modal · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The Modal component is a simple way to present content above an enclosing view."/><meta name="docsearch:version" content="0.46"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Modal · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The Modal component is a simple way to present content above an enclosing view."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/modal.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Modal</h1></header><article><div><span><p>The Modal component is a basic way to present content above an enclosing view.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/modal.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Modal</h1></header><article><div><span><p>The Modal component is a simple way to present content above an enclosing view.</p>
<p><em>Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.</em></p>
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>Modal<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">,</span> View<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
+2 -2
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Modal · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The Modal component is a basic way to present content above an enclosing view."/><meta name="docsearch:version" content="0.46"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Modal · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The Modal component is a basic way to present content above an enclosing view."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Modal · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The Modal component is a simple way to present content above an enclosing view."/><meta name="docsearch:version" content="0.46"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Modal · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The Modal component is a simple way to present content above an enclosing view."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/modal.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Modal</h1></header><article><div><span><p>The Modal component is a basic way to present content above an enclosing view.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/modal.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Modal</h1></header><article><div><span><p>The Modal component is a simple way to present content above an enclosing view.</p>
<p><em>Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.</em></p>
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>Modal<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">,</span> View<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
+4 -4
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>FlatList · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A performant interface for rendering basic, flat lists, supporting the most handy features:"/><meta name="docsearch:version" content="0.47"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="FlatList · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A performant interface for rendering basic, flat lists, supporting the most handy features:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>FlatList · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A performant interface for rendering simple, flat lists, supporting the most handy features:"/><meta name="docsearch:version" content="0.47"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="FlatList · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A performant interface for rendering simple, flat lists, supporting the most handy features:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/flatlist.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">FlatList</h1></header><article><div><span><p>A performant interface for rendering basic, flat lists, supporting the most handy features:</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/flatlist.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">FlatList</h1></header><article><div><span><p>A performant interface for rendering simple, flat lists, supporting the most handy features:</p>
<ul>
<li>Fully cross-platform.</li>
<li>Optional horizontal mode.</li>
@@ -202,7 +202,7 @@ class MyList extends React.PureComponent {
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="data"></a><a href="#data" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>data</code></h3>
<p>For simplicity, data is a plain array. If you want to use something else, like an immutable list, use the underlying <code>VirtualizedList</code> directly.</p>
<p>For simplicity, data is just a plain array. If you want to use something else, like an immutable list, use the underlying <code>VirtualizedList</code> directly.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
@@ -286,7 +286,7 @@ class MyList extends React.PureComponent {
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="getitemlayout"></a><a href="#getitemlayout" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getItemLayout</code></h3>
<p><code>getItemLayout</code> is an optional optimizations that let us skip measurement of dynamic content if you know the height of items a priori. <code>getItemLayout</code> is efficient if you have fixed sized items, for example:</p>
<p><code>getItemLayout</code> is an optional optimizations that let us skip measurement of dynamic content if you know the height of items a priori. <code>getItemLayout</code> is the most efficient, and is easy to use if you have fixed height items, for example:</p>
<pre><code class="hljs">getItemLayout={(data, index) =&gt; (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
+4 -4
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>FlatList · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A performant interface for rendering basic, flat lists, supporting the most handy features:"/><meta name="docsearch:version" content="0.47"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="FlatList · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A performant interface for rendering basic, flat lists, supporting the most handy features:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>FlatList · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A performant interface for rendering simple, flat lists, supporting the most handy features:"/><meta name="docsearch:version" content="0.47"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="FlatList · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A performant interface for rendering simple, flat lists, supporting the most handy features:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/flatlist.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">FlatList</h1></header><article><div><span><p>A performant interface for rendering basic, flat lists, supporting the most handy features:</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/flatlist.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">FlatList</h1></header><article><div><span><p>A performant interface for rendering simple, flat lists, supporting the most handy features:</p>
<ul>
<li>Fully cross-platform.</li>
<li>Optional horizontal mode.</li>
@@ -202,7 +202,7 @@ class MyList extends React.PureComponent {
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="data"></a><a href="#data" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>data</code></h3>
<p>For simplicity, data is a plain array. If you want to use something else, like an immutable list, use the underlying <code>VirtualizedList</code> directly.</p>
<p>For simplicity, data is just a plain array. If you want to use something else, like an immutable list, use the underlying <code>VirtualizedList</code> directly.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
@@ -286,7 +286,7 @@ class MyList extends React.PureComponent {
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="getitemlayout"></a><a href="#getitemlayout" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>getItemLayout</code></h3>
<p><code>getItemLayout</code> is an optional optimizations that let us skip measurement of dynamic content if you know the height of items a priori. <code>getItemLayout</code> is efficient if you have fixed sized items, for example:</p>
<p><code>getItemLayout</code> is an optional optimizations that let us skip measurement of dynamic content if you know the height of items a priori. <code>getItemLayout</code> is the most efficient, and is easy to use if you have fixed height items, for example:</p>
<pre><code class="hljs">getItemLayout={(data, index) =&gt; (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
+2 -2
View File
@@ -571,9 +571,9 @@
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="position"></a><a href="#position" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>position</code></h3>
<p><code>position</code> in React Native is similar to regular CSS, but everything is set to <code>relative</code> by default, so <code>absolute</code> positioning is always relative to the parent.</p>
<p><code>position</code> in React Native is similar to regular CSS, but everything is set to <code>relative</code> by default, so <code>absolute</code> positioning is always just relative to the parent.</p>
<p>If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have <code>absolute</code> position.</p>
<p>If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree.</p>
<p>If you want to position a child relative to something that is not its parent, just don't use styles for that. Use the component tree.</p>
<p>See <a href="https://github.com/facebook/yoga">https://github.com/facebook/yoga</a> for more details on how <code>position</code> differs between React Native and CSS.</p>
<table>
<thead>
+2 -2
View File
@@ -571,9 +571,9 @@
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="position"></a><a href="#position" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>position</code></h3>
<p><code>position</code> in React Native is similar to regular CSS, but everything is set to <code>relative</code> by default, so <code>absolute</code> positioning is always relative to the parent.</p>
<p><code>position</code> in React Native is similar to regular CSS, but everything is set to <code>relative</code> by default, so <code>absolute</code> positioning is always just relative to the parent.</p>
<p>If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have <code>absolute</code> position.</p>
<p>If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree.</p>
<p>If you want to position a child relative to something that is not its parent, just don't use styles for that. Use the component tree.</p>
<p>See <a href="https://github.com/facebook/yoga">https://github.com/facebook/yoga</a> for more details on how <code>position</code> differs between React Native and CSS.</p>
<table>
<thead>
+5 -5
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects."/><meta name="docsearch:version" content="0.47"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><meta name="docsearch:version" content="0.47"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,8 +68,8 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listviewdatasource.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects.</p>
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods feed from the new data and compute a diff for each row so ListView knows whether to re-render it or not.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listviewdatasource.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects.</p>
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods suck in the new data and compute a diff for each row so ListView knows whether to re-render it or not.</p>
<p>In this example, a component receives data in chunks, handled by <code>_onDataArrived</code>, which concats the new data onto the old data and updates the data source. We use <code>concat</code> to create a new array - mutating <code>this._data</code>, e.g. with <code>this._data.push(newRowData)</code>, would be an error. <code>_rowHasChanged</code> understands the shape of the row data and knows how to efficiently compare it.</p>
<pre><code class="hljs">getInitialState: function() {
<span class="hljs-keyword">var</span> ds = new ListViewDataSource({rowHasChanged: <span class="hljs-keyword">this</span>._rowHasChanged});
@@ -124,9 +124,9 @@ _onDataArrived(newData) {
<h3><a class="anchor" aria-hidden="true" id="clonewithrows"></a><a href="#clonewithrows" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>cloneWithRows()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRows</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is only an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is just an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
<p>The <code>rowIdentities</code> is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities.</p>
<p>Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
<p>Note: This function does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="clonewithrowsandsections"></a><a href="#clonewithrowsandsections" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>cloneWithRowsAndSections()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRowsAndSections</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> sectionIdentities<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</span><span class="token punctuation">;</span>
+5 -5
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects."/><meta name="docsearch:version" content="0.47"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><meta name="docsearch:version" content="0.47"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,8 +68,8 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listviewdatasource.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be an array of strings, or an object with rows nested inside section objects.</p>
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods feed from the new data and compute a diff for each row so ListView knows whether to re-render it or not.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listviewdatasource.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects.</p>
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods suck in the new data and compute a diff for each row so ListView knows whether to re-render it or not.</p>
<p>In this example, a component receives data in chunks, handled by <code>_onDataArrived</code>, which concats the new data onto the old data and updates the data source. We use <code>concat</code> to create a new array - mutating <code>this._data</code>, e.g. with <code>this._data.push(newRowData)</code>, would be an error. <code>_rowHasChanged</code> understands the shape of the row data and knows how to efficiently compare it.</p>
<pre><code class="hljs">getInitialState: function() {
<span class="hljs-keyword">var</span> ds = new ListViewDataSource({rowHasChanged: <span class="hljs-keyword">this</span>._rowHasChanged});
@@ -124,9 +124,9 @@ _onDataArrived(newData) {
<h3><a class="anchor" aria-hidden="true" id="clonewithrows"></a><a href="#clonewithrows" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>cloneWithRows()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRows</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is only an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is just an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
<p>The <code>rowIdentities</code> is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities.</p>
<p>Note: This function does NOT clone the data in this data source. It passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
<p>Note: This function does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="clonewithrowsandsections"></a><a href="#clonewithrowsandsections" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>cloneWithRowsAndSections()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">cloneWithRowsAndSections</span><span class="token punctuation">(</span>dataBlob<span class="token punctuation">,</span> sectionIdentities<span class="token punctuation">,</span> rowIdentities<span class="token punctuation">)</span><span class="token punctuation">;</span>
+2 -2
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Modal · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The Modal component is a basic way to present content above an enclosing view."/><meta name="docsearch:version" content="0.47"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Modal · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The Modal component is a basic way to present content above an enclosing view."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Modal · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The Modal component is a simple way to present content above an enclosing view."/><meta name="docsearch:version" content="0.47"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Modal · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The Modal component is a simple way to present content above an enclosing view."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/modal.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Modal</h1></header><article><div><span><p>The Modal component is a basic way to present content above an enclosing view.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/modal.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Modal</h1></header><article><div><span><p>The Modal component is a simple way to present content above an enclosing view.</p>
<p><em>Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.</em></p>
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>Modal<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">,</span> View<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
+2 -2
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Modal · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The Modal component is a basic way to present content above an enclosing view."/><meta name="docsearch:version" content="0.47"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Modal · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The Modal component is a basic way to present content above an enclosing view."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Modal · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The Modal component is a simple way to present content above an enclosing view."/><meta name="docsearch:version" content="0.47"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Modal · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The Modal component is a simple way to present content above an enclosing view."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/modal.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Modal</h1></header><article><div><span><p>The Modal component is a basic way to present content above an enclosing view.</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/modal.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Modal</h1></header><article><div><span><p>The Modal component is a simple way to present content above an enclosing view.</p>
<p><em>Note: If you need more control over how to present modals over the rest of your app, then consider using a top-level Navigator.</em></p>
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>Modal<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">,</span> View<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
+4 -5
View File
@@ -69,12 +69,12 @@
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/scrollview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ScrollView</h1></header><article><div><span><p>Component that wraps platform ScrollView while providing integration with touch locking &quot;responder&quot; system.</p>
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes quick to debug.</p>
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes easy to debug.</p>
<p>Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.</p>
<p><code>&lt;ScrollView&gt;</code> vs <a href="/react-native/docs/0.47/flatlist"><code>&lt;FlatList&gt;</code></a> - which one to use?</p>
<p><code>ScrollView</code> renders all its react child components at once, but this has a performance downside.</p>
<p>Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.</p>
<p>This is where <code>FlatList</code> comes into play. <code>FlatList</code> renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.</p>
<p><code>ScrollView</code> simply renders all its react child components at once. That makes it very easy to understand and use.</p>
<p>On the other hand, this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.</p>
<p>This is where <code>FlatList</code> comes into play. <code>FlatList</code> renders items lazily, just when they are about to appear, and removes items that scroll way off screen to save memory and processing time.</p>
<p><code>FlatList</code> is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.</p>
<h3><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h3>
<ul>
@@ -514,7 +514,6 @@ const styles = StyleSheet.create({
<hr>
<h3><a class="anchor" aria-hidden="true" id="indicatorstyle"></a><a href="#indicatorstyle" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>indicatorStyle</code></h3>
<p>The style of the scroll indicators.</p>
<!-- alex ignore retext-profanities -->
<ul>
<li><code>'default'</code> (the default), same as <code>black</code>.</li>
<li><code>'black'</code>, scroll indicator is black. This style is good against a light background.</li>
+4 -5
View File
@@ -69,12 +69,12 @@
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/scrollview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ScrollView</h1></header><article><div><span><p>Component that wraps platform ScrollView while providing integration with touch locking &quot;responder&quot; system.</p>
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes quick to debug.</p>
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes easy to debug.</p>
<p>Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.</p>
<p><code>&lt;ScrollView&gt;</code> vs <a href="/react-native/docs/0.47/flatlist"><code>&lt;FlatList&gt;</code></a> - which one to use?</p>
<p><code>ScrollView</code> renders all its react child components at once, but this has a performance downside.</p>
<p>Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.</p>
<p>This is where <code>FlatList</code> comes into play. <code>FlatList</code> renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.</p>
<p><code>ScrollView</code> simply renders all its react child components at once. That makes it very easy to understand and use.</p>
<p>On the other hand, this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.</p>
<p>This is where <code>FlatList</code> comes into play. <code>FlatList</code> renders items lazily, just when they are about to appear, and removes items that scroll way off screen to save memory and processing time.</p>
<p><code>FlatList</code> is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.</p>
<h3><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h3>
<ul>
@@ -514,7 +514,6 @@ const styles = StyleSheet.create({
<hr>
<h3><a class="anchor" aria-hidden="true" id="indicatorstyle"></a><a href="#indicatorstyle" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>indicatorStyle</code></h3>
<p>The style of the scroll indicators.</p>
<!-- alex ignore retext-profanities -->
<ul>
<li><code>'default'</code> (the default), same as <code>black</code>.</li>
<li><code>'black'</code>, scroll indicator is black. This style is good against a light background.</li>
+1 -1
View File
@@ -82,7 +82,7 @@
<li>Scroll loading.</li>
</ul>
<p>If you don't need section support and want a simpler interface, use <a href="/react-native/docs/0.47/flatlist"><code>&lt;FlatList&gt;</code></a>.</p>
<p>Examples:</p>
<p>Simple Examples:</p>
<pre><code class="hljs">&lt;SectionList
renderItem={({item}) =&gt; &lt;ListItem title={item.title} /&gt;}
renderSectionHeader={({section}) =&gt; &lt;H1 title={section.title} /&gt;}
+1 -1
View File
@@ -82,7 +82,7 @@
<li>Scroll loading.</li>
</ul>
<p>If you don't need section support and want a simpler interface, use <a href="/react-native/docs/0.47/flatlist"><code>&lt;FlatList&gt;</code></a>.</p>
<p>Examples:</p>
<p>Simple Examples:</p>
<pre><code class="hljs">&lt;SectionList
renderItem={({item}) =&gt; &lt;ListItem title={item.title} /&gt;}
renderSectionHeader={({section}) =&gt; &lt;H1 title={section.title} /&gt;}
+2 -2
View File
@@ -386,7 +386,7 @@
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="removeclippedsubviews"></a><a href="#removeclippedsubviews" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeClippedSubviews</code></h3>
<p>This is a reserved performance property exposed by <code>RCTView</code> and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have <code>overflow: hidden</code>, as should the containing view (or one of its superviews).</p>
<p>This is a special performance property exposed by <code>RCTView</code> and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have <code>overflow: hidden</code>, as should the containing view (or one of its superviews).</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
@@ -499,7 +499,7 @@
<hr>
<h3><a class="anchor" aria-hidden="true" id="rendertohardwaretextureandroid"></a><a href="#rendertohardwaretextureandroid" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>renderToHardwareTextureAndroid</code></h3>
<p>Whether this <code>View</code> should render itself (and all of its children) into a single hardware texture on the GPU.</p>
<p>On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.</p>
<p>On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can just be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
+2 -2
View File
@@ -386,7 +386,7 @@
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="removeclippedsubviews"></a><a href="#removeclippedsubviews" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeClippedSubviews</code></h3>
<p>This is a reserved performance property exposed by <code>RCTView</code> and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have <code>overflow: hidden</code>, as should the containing view (or one of its superviews).</p>
<p>This is a special performance property exposed by <code>RCTView</code> and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have <code>overflow: hidden</code>, as should the containing view (or one of its superviews).</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
@@ -499,7 +499,7 @@
<hr>
<h3><a class="anchor" aria-hidden="true" id="rendertohardwaretextureandroid"></a><a href="#rendertohardwaretextureandroid" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>renderToHardwareTextureAndroid</code></h3>
<p>Whether this <code>View</code> should render itself (and all of its children) into a single hardware texture on the GPU.</p>
<p>On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.</p>
<p>On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can just be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
+8 -8
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution."/><meta name="docsearch:version" content="0.51"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The `Animated` library is designed to make animations fluid, powerful, and easy to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution."/><meta name="docsearch:version" content="0.51"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The `Animated` library is designed to make animations fluid, powerful, and easy to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,8 +68,8 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and painless to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
<p>The most basic workflow for creating an animation is to create an <code>Animated.Value</code>, hook it up to one or more style attributes of an animated component, and then drive updates via animations using <code>Animated.timing()</code>:</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and easy to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
<p>The simplest workflow for creating an animation is to create an <code>Animated.Value</code>, hook it up to one or more style attributes of an animated component, and then drive updates via animations using <code>Animated.timing()</code>:</p>
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span>
<span class="token comment">// Animate value over time</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// The value to drive</span>
@@ -90,7 +90,7 @@
<p><code>Animated</code> provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:</p>
<ul>
<li><a href="/react-native/docs/0.51/animated#decay"><code>Animated.decay()</code></a> starts with an initial velocity and gradually slows to a stop.</li>
<li><a href="/react-native/docs/0.51/animated#spring"><code>Animated.spring()</code></a> provides a basic spring physics model.</li>
<li><a href="/react-native/docs/0.51/animated#spring"><code>Animated.spring()</code></a> provides a simple spring physics model.</li>
<li><a href="/react-native/docs/0.51/animated#timing"><code>Animated.timing()</code></a> animates a value over time using <a href="/react-native/docs/0.51/easing">easing functions</a>.</li>
</ul>
<p>In most cases, you will be using <code>timing()</code>. By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.</p>
@@ -100,7 +100,7 @@
<p>By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.</p>
<p>You can use the native driver by specifying <code>useNativeDriver: true</code> in your animation configuration. See the <a href="/react-native/docs/0.51/animations#using-the-native-driver">Animations</a> guide to learn more.</p>
<h3><a class="anchor" aria-hidden="true" id="animatable-components"></a><a href="#animatable-components" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Animatable components</h3>
<p>Only animatable components can be animated. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
<p>Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
<ul>
<li><a href="/react-native/docs/0.51/animated#createanimatedcomponent"><code>createAnimatedComponent()</code></a> can be used to make a component animatable.</li>
</ul>
@@ -119,7 +119,7 @@
<li><a href="/react-native/docs/0.51/animated#sequence"><code>Animated.sequence()</code></a> starts the animations in order, waiting for each to complete before starting the next.</li>
<li><a href="/react-native/docs/0.51/animated#stagger"><code>Animated.stagger()</code></a> starts animations in order and in parallel, but with successive delays.</li>
</ul>
<p>Animations can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.51/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
<p>Animations can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.51/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
<p>By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.</p>
<h3><a class="anchor" aria-hidden="true" id="combining-animated-values"></a><a href="#combining-animated-values" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Combining animated values</h3>
<p>You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:</p>
@@ -213,14 +213,14 @@
<p>Animates a value according to an analytical spring model based on <a href="https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator">damped harmonic oscillation</a>. Tracks velocity state to create fluid motions as the <code>toValue</code> updates, and can be chained together.</p>
<p>Config is an object that may have the following options.</p>
<p>Note that you can only define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one:</p>
<p>The friction/tension or bounciness/speed options match the spring model in <a href="https://github.com/facebook/pop"><code>Facebook Pop</code></a>, <a href="http://facebook.github.io/rebound/">Rebound</a>, and <a href="http://origami.design/">Origami</a>.</p>
<p>The friction/tension or bounciness/speed options match the spring model in <a href="https://github.com/facebook/pop">Facebook Pop</a>, <a href="http://facebook.github.io/rebound/">Rebound</a>, and <a href="http://origami.design/">Origami</a>.</p>
<ul>
<li><code>friction</code>: Controls &quot;bounciness&quot;/overshoot. Default 7.</li>
<li><code>tension</code>: Controls speed. Default 40.</li>
<li><code>speed</code>: Controls speed of the animation. Default 12.</li>
<li><code>bounciness</code>: Controls bounciness. Default 8.</li>
</ul>
<p>Specifying stiffness/damping/mass as parameters makes <code>Animated.spring</code> use an analytical spring model based on the motion equations of a <a href="https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator">damped harmonic oscillator</a>. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation.</p>
<p>Specifying stiffness/damping/mass as parameters makes <code>Animated.spring</code> use an analytical spring model based on the motion equations of a <a href="https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator">damped harmonic oscillator</a>. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation primitive.</p>
<ul>
<li><code>stiffness</code>: The spring stiffness coefficient. Default 100.</li>
<li><code>damping</code>: Defines how the springs motion should be damped due to the forces of friction. Default 10.</li>
+8 -8
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution."/><meta name="docsearch:version" content="0.51"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="The `Animated` library is designed to make animations fluid, powerful, and easy to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution."/><meta name="docsearch:version" content="0.51"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="The `Animated` library is designed to make animations fluid, powerful, and easy to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,8 +68,8 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and painless to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
<p>The most basic workflow for creating an animation is to create an <code>Animated.Value</code>, hook it up to one or more style attributes of an animated component, and then drive updates via animations using <code>Animated.timing()</code>:</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and easy to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
<p>The simplest workflow for creating an animation is to create an <code>Animated.Value</code>, hook it up to one or more style attributes of an animated component, and then drive updates via animations using <code>Animated.timing()</code>:</p>
<pre><code class="hljs css language-jsx">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span>
<span class="token comment">// Animate value over time</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// The value to drive</span>
@@ -90,7 +90,7 @@
<p><code>Animated</code> provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:</p>
<ul>
<li><a href="/react-native/docs/0.51/animated#decay"><code>Animated.decay()</code></a> starts with an initial velocity and gradually slows to a stop.</li>
<li><a href="/react-native/docs/0.51/animated#spring"><code>Animated.spring()</code></a> provides a basic spring physics model.</li>
<li><a href="/react-native/docs/0.51/animated#spring"><code>Animated.spring()</code></a> provides a simple spring physics model.</li>
<li><a href="/react-native/docs/0.51/animated#timing"><code>Animated.timing()</code></a> animates a value over time using <a href="/react-native/docs/0.51/easing">easing functions</a>.</li>
</ul>
<p>In most cases, you will be using <code>timing()</code>. By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.</p>
@@ -100,7 +100,7 @@
<p>By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.</p>
<p>You can use the native driver by specifying <code>useNativeDriver: true</code> in your animation configuration. See the <a href="/react-native/docs/0.51/animations#using-the-native-driver">Animations</a> guide to learn more.</p>
<h3><a class="anchor" aria-hidden="true" id="animatable-components"></a><a href="#animatable-components" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Animatable components</h3>
<p>Only animatable components can be animated. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
<p>Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
<ul>
<li><a href="/react-native/docs/0.51/animated#createanimatedcomponent"><code>createAnimatedComponent()</code></a> can be used to make a component animatable.</li>
</ul>
@@ -119,7 +119,7 @@
<li><a href="/react-native/docs/0.51/animated#sequence"><code>Animated.sequence()</code></a> starts the animations in order, waiting for each to complete before starting the next.</li>
<li><a href="/react-native/docs/0.51/animated#stagger"><code>Animated.stagger()</code></a> starts animations in order and in parallel, but with successive delays.</li>
</ul>
<p>Animations can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.51/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
<p>Animations can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.51/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
<p>By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.</p>
<h3><a class="anchor" aria-hidden="true" id="combining-animated-values"></a><a href="#combining-animated-values" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Combining animated values</h3>
<p>You can combine two animated values via addition, multiplication, division, or modulo to make a new animated value:</p>
@@ -213,14 +213,14 @@
<p>Animates a value according to an analytical spring model based on <a href="https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator">damped harmonic oscillation</a>. Tracks velocity state to create fluid motions as the <code>toValue</code> updates, and can be chained together.</p>
<p>Config is an object that may have the following options.</p>
<p>Note that you can only define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one:</p>
<p>The friction/tension or bounciness/speed options match the spring model in <a href="https://github.com/facebook/pop"><code>Facebook Pop</code></a>, <a href="http://facebook.github.io/rebound/">Rebound</a>, and <a href="http://origami.design/">Origami</a>.</p>
<p>The friction/tension or bounciness/speed options match the spring model in <a href="https://github.com/facebook/pop">Facebook Pop</a>, <a href="http://facebook.github.io/rebound/">Rebound</a>, and <a href="http://origami.design/">Origami</a>.</p>
<ul>
<li><code>friction</code>: Controls &quot;bounciness&quot;/overshoot. Default 7.</li>
<li><code>tension</code>: Controls speed. Default 40.</li>
<li><code>speed</code>: Controls speed of the animation. Default 12.</li>
<li><code>bounciness</code>: Controls bounciness. Default 8.</li>
</ul>
<p>Specifying stiffness/damping/mass as parameters makes <code>Animated.spring</code> use an analytical spring model based on the motion equations of a <a href="https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator">damped harmonic oscillator</a>. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation.</p>
<p>Specifying stiffness/damping/mass as parameters makes <code>Animated.spring</code> use an analytical spring model based on the motion equations of a <a href="https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator">damped harmonic oscillator</a>. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS's CASpringAnimation primitive.</p>
<ul>
<li><code>stiffness</code>: The spring stiffness coefficient. Default 100.</li>
<li><code>damping</code>: Defines how the springs motion should be damped due to the forces of friction. Default 10.</li>
+7 -7
View File
@@ -73,10 +73,10 @@
<h3><a class="anchor" aria-hidden="true" id="predefined-animations"></a><a href="#predefined-animations" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Predefined animations</h3>
<p>The <code>Easing</code> module provides several predefined animations through the following methods:</p>
<ul>
<li><a href="/react-native/docs/0.51/easing#back"><code>back</code></a> provides a basic animation where the object goes slightly back before moving forward</li>
<li><a href="/react-native/docs/0.51/easing#back"><code>back</code></a> provides a simple animation where the object goes slightly back before moving forward</li>
<li><a href="/react-native/docs/0.51/easing#bounce"><code>bounce</code></a> provides a bouncing animation</li>
<li><a href="/react-native/docs/0.51/easing#ease"><code>ease</code></a> provides a basic inertial animation</li>
<li><a href="/react-native/docs/0.51/easing#elastic"><code>elastic</code></a> provides a basic spring interaction</li>
<li><a href="/react-native/docs/0.51/easing#ease"><code>ease</code></a> provides a simple inertial animation</li>
<li><a href="/react-native/docs/0.51/easing#elastic"><code>elastic</code></a> provides a simple spring interaction</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="standard-functions"></a><a href="#standard-functions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Standard functions</h3>
<p>Three standard easing functions are provided:</p>
@@ -142,7 +142,7 @@
<h3><a class="anchor" aria-hidden="true" id="ease"></a><a href="#ease" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ease()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">ease</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span>
</code></pre>
<p>A basic inertial interaction, similar to an object slowly accelerating to speed.</p>
<p>A simple inertial interaction, similar to an object slowly accelerating to speed.</p>
<p><a href="http://cubic-bezier.com/#.42,0,1,1">http://cubic-bezier.com/#.42,0,1,1</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="quad"></a><a href="#quad" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>quad()</code></h3>
@@ -184,14 +184,14 @@
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
</code></pre>
<p>A basic elastic interaction, similar to a spring oscillating back and forth.</p>
<p>A simple elastic interaction, similar to a spring oscillating back and forth.</p>
<p>Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N &gt; 1 will overshoot about N times.</p>
<p><a href="http://easings.net/#easeInElastic">http://easings.net/#easeInElastic</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="back"></a><a href="#back" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>back()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">back</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span>
</code></pre>
<p>Use with <code>Animated.parallel()</code> to create a basic effect where the object animates back slightly as the animation starts.</p>
<p>Use with <code>Animated.parallel()</code> to create a simple effect where the object animates back slightly as the animation starts.</p>
<p>Wolfram Plot:</p>
<ul>
<li><a href="http://tiny.cc/back_default">http://tiny.cc/back_default</a> (s = 1.70158, default)</li>
@@ -200,7 +200,7 @@
<h3><a class="anchor" aria-hidden="true" id="bounce"></a><a href="#bounce" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>bounce()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">bounce</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span>
</code></pre>
<p>Provides a basic bouncing effect.</p>
<p>Provides a simple bouncing effect.</p>
<p><a href="http://easings.net/#easeInBounce">http://easings.net/#easeInBounce</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="bezier"></a><a href="#bezier" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>bezier()</code></h3>
+7 -7
View File
@@ -73,10 +73,10 @@
<h3><a class="anchor" aria-hidden="true" id="predefined-animations"></a><a href="#predefined-animations" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Predefined animations</h3>
<p>The <code>Easing</code> module provides several predefined animations through the following methods:</p>
<ul>
<li><a href="/react-native/docs/0.51/easing#back"><code>back</code></a> provides a basic animation where the object goes slightly back before moving forward</li>
<li><a href="/react-native/docs/0.51/easing#back"><code>back</code></a> provides a simple animation where the object goes slightly back before moving forward</li>
<li><a href="/react-native/docs/0.51/easing#bounce"><code>bounce</code></a> provides a bouncing animation</li>
<li><a href="/react-native/docs/0.51/easing#ease"><code>ease</code></a> provides a basic inertial animation</li>
<li><a href="/react-native/docs/0.51/easing#elastic"><code>elastic</code></a> provides a basic spring interaction</li>
<li><a href="/react-native/docs/0.51/easing#ease"><code>ease</code></a> provides a simple inertial animation</li>
<li><a href="/react-native/docs/0.51/easing#elastic"><code>elastic</code></a> provides a simple spring interaction</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="standard-functions"></a><a href="#standard-functions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Standard functions</h3>
<p>Three standard easing functions are provided:</p>
@@ -142,7 +142,7 @@
<h3><a class="anchor" aria-hidden="true" id="ease"></a><a href="#ease" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ease()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">ease</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span>
</code></pre>
<p>A basic inertial interaction, similar to an object slowly accelerating to speed.</p>
<p>A simple inertial interaction, similar to an object slowly accelerating to speed.</p>
<p><a href="http://cubic-bezier.com/#.42,0,1,1">http://cubic-bezier.com/#.42,0,1,1</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="quad"></a><a href="#quad" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>quad()</code></h3>
@@ -184,14 +184,14 @@
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
</code></pre>
<p>A basic elastic interaction, similar to a spring oscillating back and forth.</p>
<p>A simple elastic interaction, similar to a spring oscillating back and forth.</p>
<p>Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N &gt; 1 will overshoot about N times.</p>
<p><a href="http://easings.net/#easeInElastic">http://easings.net/#easeInElastic</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="back"></a><a href="#back" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>back()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">back</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span>
</code></pre>
<p>Use with <code>Animated.parallel()</code> to create a basic effect where the object animates back slightly as the animation starts.</p>
<p>Use with <code>Animated.parallel()</code> to create a simple effect where the object animates back slightly as the animation starts.</p>
<p>Wolfram Plot:</p>
<ul>
<li><a href="http://tiny.cc/back_default">http://tiny.cc/back_default</a> (s = 1.70158, default)</li>
@@ -200,7 +200,7 @@
<h3><a class="anchor" aria-hidden="true" id="bounce"></a><a href="#bounce" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>bounce()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">bounce</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span>
</code></pre>
<p>Provides a basic bouncing effect.</p>
<p>Provides a simple bouncing effect.</p>
<p><a href="http://easings.net/#easeInBounce">http://easings.net/#easeInBounce</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="bezier"></a><a href="#bezier" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>bezier()</code></h3>
+2 -2
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>FlatList · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A performant interface for rendering basic, flat lists, supporting the most handy features:"/><meta name="docsearch:version" content="0.51"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="FlatList · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A performant interface for rendering basic, flat lists, supporting the most handy features:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>FlatList · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A performant interface for rendering simple, flat lists, supporting the most handy features:"/><meta name="docsearch:version" content="0.51"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="FlatList · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A performant interface for rendering simple, flat lists, supporting the most handy features:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/flatlist.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">FlatList</h1></header><article><div><span><p>A performant interface for rendering basic, flat lists, supporting the most handy features:</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/flatlist.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">FlatList</h1></header><article><div><span><p>A performant interface for rendering simple, flat lists, supporting the most handy features:</p>
<ul>
<li>Fully cross-platform.</li>
<li>Optional horizontal mode.</li>
+2 -2
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>FlatList · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A performant interface for rendering basic, flat lists, supporting the most handy features:"/><meta name="docsearch:version" content="0.51"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="FlatList · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A performant interface for rendering basic, flat lists, supporting the most handy features:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>FlatList · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A performant interface for rendering simple, flat lists, supporting the most handy features:"/><meta name="docsearch:version" content="0.51"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="FlatList · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A performant interface for rendering simple, flat lists, supporting the most handy features:"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -68,7 +68,7 @@
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/flatlist.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">FlatList</h1></header><article><div><span><p>A performant interface for rendering basic, flat lists, supporting the most handy features:</p>
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/flatlist.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">FlatList</h1></header><article><div><span><p>A performant interface for rendering simple, flat lists, supporting the most handy features:</p>
<ul>
<li>Fully cross-platform.</li>
<li>Optional horizontal mode.</li>
+2 -2
View File
@@ -657,9 +657,9 @@
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="position"></a><a href="#position" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>position</code></h3>
<p><code>position</code> in React Native is similar to regular CSS, but everything is set to <code>relative</code> by default, so <code>absolute</code> positioning is always relative to the parent.</p>
<p><code>position</code> in React Native is similar to regular CSS, but everything is set to <code>relative</code> by default, so <code>absolute</code> positioning is always just relative to the parent.</p>
<p>If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have <code>absolute</code> position.</p>
<p>If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree.</p>
<p>If you want to position a child relative to something that is not its parent, just don't use styles for that. Use the component tree.</p>
<p>See <a href="https://github.com/facebook/yoga">https://github.com/facebook/yoga</a> for more details on how <code>position</code> differs between React Native and CSS.</p>
<table>
<thead>
+2 -2
View File
@@ -657,9 +657,9 @@
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="position"></a><a href="#position" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>position</code></h3>
<p><code>position</code> in React Native is similar to regular CSS, but everything is set to <code>relative</code> by default, so <code>absolute</code> positioning is always relative to the parent.</p>
<p><code>position</code> in React Native is similar to regular CSS, but everything is set to <code>relative</code> by default, so <code>absolute</code> positioning is always just relative to the parent.</p>
<p>If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have <code>absolute</code> position.</p>
<p>If you want to position a child relative to something that is not its parent, don't use styles for that. Use the component tree.</p>
<p>If you want to position a child relative to something that is not its parent, just don't use styles for that. Use the component tree.</p>
<p>See <a href="https://github.com/facebook/yoga">https://github.com/facebook/yoga</a> for more details on how <code>position</code> differs between React Native and CSS.</p>
<table>
<thead>
+4 -5
View File
@@ -69,12 +69,12 @@
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/scrollview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ScrollView</h1></header><article><div><span><p>Component that wraps platform ScrollView while providing integration with touch locking &quot;responder&quot; system.</p>
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes quick to debug.</p>
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes easy to debug.</p>
<p>Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.</p>
<p><code>&lt;ScrollView&gt;</code> vs <a href="/react-native/docs/0.51/flatlist"><code>&lt;FlatList&gt;</code></a> - which one to use?</p>
<p><code>ScrollView</code> renders all its react child components at once, but this has a performance downside.</p>
<p>Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.</p>
<p>This is where <code>FlatList</code> comes into play. <code>FlatList</code> renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.</p>
<p><code>ScrollView</code> simply renders all its react child components at once. That makes it very easy to understand and use.</p>
<p>On the other hand, this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.</p>
<p>This is where <code>FlatList</code> comes into play. <code>FlatList</code> renders items lazily, just when they are about to appear, and removes items that scroll way off screen to save memory and processing time.</p>
<p><code>FlatList</code> is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.</p>
<h3><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h3>
<ul>
@@ -518,7 +518,6 @@ const styles = StyleSheet.create({
<hr>
<h3><a class="anchor" aria-hidden="true" id="indicatorstyle"></a><a href="#indicatorstyle" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>indicatorStyle</code></h3>
<p>The style of the scroll indicators.</p>
<!-- alex ignore retext-profanities -->
<ul>
<li><code>'default'</code> (the default), same as <code>black</code>.</li>
<li><code>'black'</code>, scroll indicator is black. This style is good against a light background.</li>
+4 -5
View File
@@ -69,12 +69,12 @@
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/scrollview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ScrollView</h1></header><article><div><span><p>Component that wraps platform ScrollView while providing integration with touch locking &quot;responder&quot; system.</p>
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes quick to debug.</p>
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes easy to debug.</p>
<p>Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.</p>
<p><code>&lt;ScrollView&gt;</code> vs <a href="/react-native/docs/0.51/flatlist"><code>&lt;FlatList&gt;</code></a> - which one to use?</p>
<p><code>ScrollView</code> renders all its react child components at once, but this has a performance downside.</p>
<p>Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.</p>
<p>This is where <code>FlatList</code> comes into play. <code>FlatList</code> renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.</p>
<p><code>ScrollView</code> simply renders all its react child components at once. That makes it very easy to understand and use.</p>
<p>On the other hand, this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.</p>
<p>This is where <code>FlatList</code> comes into play. <code>FlatList</code> renders items lazily, just when they are about to appear, and removes items that scroll way off screen to save memory and processing time.</p>
<p><code>FlatList</code> is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.</p>
<h3><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h3>
<ul>
@@ -518,7 +518,6 @@ const styles = StyleSheet.create({
<hr>
<h3><a class="anchor" aria-hidden="true" id="indicatorstyle"></a><a href="#indicatorstyle" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>indicatorStyle</code></h3>
<p>The style of the scroll indicators.</p>
<!-- alex ignore retext-profanities -->
<ul>
<li><code>'default'</code> (the default), same as <code>black</code>.</li>
<li><code>'black'</code>, scroll indicator is black. This style is good against a light background.</li>
+1 -1
View File
@@ -82,7 +82,7 @@
<li>Scroll loading.</li>
</ul>
<p>If you don't need section support and want a simpler interface, use <a href="/react-native/docs/0.51/flatlist"><code>&lt;FlatList&gt;</code></a>.</p>
<p>Examples:</p>
<p>Simple Examples:</p>
<pre><code class="hljs">&lt;SectionList
renderItem={({item}) =&gt; &lt;ListItem title={item} /&gt;}
renderSectionHeader={({section}) =&gt; &lt;Header title={section.title} /&gt;}
+1 -1
View File
@@ -82,7 +82,7 @@
<li>Scroll loading.</li>
</ul>
<p>If you don't need section support and want a simpler interface, use <a href="/react-native/docs/0.51/flatlist"><code>&lt;FlatList&gt;</code></a>.</p>
<p>Examples:</p>
<p>Simple Examples:</p>
<pre><code class="hljs">&lt;SectionList
renderItem={({item}) =&gt; &lt;ListItem title={item} /&gt;}
renderSectionHeader={({section}) =&gt; &lt;Header title={section.title} /&gt;}
+2 -2
View File
@@ -199,7 +199,7 @@ AppRegistry.registerComponent('AwesomeProject', () =&gt; BlueIsCool);
<p>In order to use this feature, you must give the view a <code>width</code> and a <code>height</code>.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="containers"></a><a href="#containers" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Containers</h2>
<p>The <code>&lt;Text&gt;</code> element is unique relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <code>&lt;Text&gt;</code> are no longer rectangles, but wrap when they see the end of the line.</p>
<p>The <code>&lt;Text&gt;</code> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <code>&lt;Text&gt;</code> are no longer rectangles, but wrap when they see the end of the line.</p>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>First part and <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>second part<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
@@ -248,7 +248,7 @@ AppRegistry.registerComponent('AwesomeProject', () =&gt; BlueIsCool);
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyAppHeaderText</span></span><span class="token punctuation">></span></span>Text styled <span class="token keyword">as</span> a header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MyAppHeaderText</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
</code></pre>
<p>Assuming that <code>MyAppText</code> is a component that only renders out its children into a <code>Text</code> component with styling, then <code>MyAppHeaderText</code> can be defined as follows:</p>
<p>Assuming that <code>MyAppText</code> is a component that simply renders out its children into a <code>Text</code> component with styling, then <code>MyAppHeaderText</code> can be defined as follows:</p>
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">MyAppHeaderText</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyAppText</span></span><span class="token punctuation">></span></span>
+2 -2
View File
@@ -199,7 +199,7 @@ AppRegistry.registerComponent('AwesomeProject', () =&gt; BlueIsCool);
<p>In order to use this feature, you must give the view a <code>width</code> and a <code>height</code>.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="containers"></a><a href="#containers" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Containers</h2>
<p>The <code>&lt;Text&gt;</code> element is unique relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <code>&lt;Text&gt;</code> are no longer rectangles, but wrap when they see the end of the line.</p>
<p>The <code>&lt;Text&gt;</code> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <code>&lt;Text&gt;</code> are no longer rectangles, but wrap when they see the end of the line.</p>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>First part and <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>second part<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
@@ -248,7 +248,7 @@ AppRegistry.registerComponent('AwesomeProject', () =&gt; BlueIsCool);
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyAppHeaderText</span></span><span class="token punctuation">></span></span>Text styled <span class="token keyword">as</span> a header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MyAppHeaderText</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
</code></pre>
<p>Assuming that <code>MyAppText</code> is a component that only renders out its children into a <code>Text</code> component with styling, then <code>MyAppHeaderText</code> can be defined as follows:</p>
<p>Assuming that <code>MyAppText</code> is a component that simply renders out its children into a <code>Text</code> component with styling, then <code>MyAppHeaderText</code> can be defined as follows:</p>
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">MyAppHeaderText</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyAppText</span></span><span class="token punctuation">></span></span>
+3 -3
View File
@@ -69,7 +69,7 @@
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/textinput.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">TextInput</h1></header><article><div><span><p>A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.</p>
<p>The most basic use case is to plop down a <code>TextInput</code> and subscribe to the <code>onChangeText</code> events to read the user input. There are also other events, such as <code>onSubmitEditing</code> and <code>onFocus</code> that can be subscribed to. A minimal example:</p>
<p>The simplest use case is to plop down a <code>TextInput</code> and subscribe to the <code>onChangeText</code> events to read the user input. There are also other events, such as <code>onSubmitEditing</code> and <code>onFocus</code> that can be subscribed to. A simple example:</p>
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> { AppRegistry, TextInput } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
@@ -300,7 +300,7 @@ AppRegistry.registerComponent(
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="defaultvalue"></a><a href="#defaultvalue" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>defaultValue</code></h3>
<p>Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.</p>
<p>Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
@@ -632,7 +632,7 @@ AppRegistry.registerComponent(
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="value"></a><a href="#value" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>value</code></h3>
<p>The value to show for the text input. <code>TextInput</code> is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent unwanted edits without flicker.</p>
<p>The value to show for the text input. <code>TextInput</code> is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent unwanted edits without flicker.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
+3 -3
View File
@@ -69,7 +69,7 @@
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/textinput.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">TextInput</h1></header><article><div><span><p>A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.</p>
<p>The most basic use case is to plop down a <code>TextInput</code> and subscribe to the <code>onChangeText</code> events to read the user input. There are also other events, such as <code>onSubmitEditing</code> and <code>onFocus</code> that can be subscribed to. A minimal example:</p>
<p>The simplest use case is to plop down a <code>TextInput</code> and subscribe to the <code>onChangeText</code> events to read the user input. There are also other events, such as <code>onSubmitEditing</code> and <code>onFocus</code> that can be subscribed to. A simple example:</p>
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> { AppRegistry, TextInput } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
@@ -300,7 +300,7 @@ AppRegistry.registerComponent(
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="defaultvalue"></a><a href="#defaultvalue" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>defaultValue</code></h3>
<p>Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.</p>
<p>Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
@@ -632,7 +632,7 @@ AppRegistry.registerComponent(
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="value"></a><a href="#value" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>value</code></h3>
<p>The value to show for the text input. <code>TextInput</code> is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent unwanted edits without flicker.</p>
<p>The value to show for the text input. <code>TextInput</code> is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent unwanted edits without flicker.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
+7 -7
View File
@@ -73,10 +73,10 @@
<h3><a class="anchor" aria-hidden="true" id="predefined-animations"></a><a href="#predefined-animations" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Predefined animations</h3>
<p>The <code>Easing</code> module provides several predefined animations through the following methods:</p>
<ul>
<li><a href="/react-native/docs/0.52/easing#back"><code>back</code></a> provides a basic animation where the object goes slightly back before moving forward</li>
<li><a href="/react-native/docs/0.52/easing#back"><code>back</code></a> provides a simple animation where the object goes slightly back before moving forward</li>
<li><a href="/react-native/docs/0.52/easing#bounce"><code>bounce</code></a> provides a bouncing animation</li>
<li><a href="/react-native/docs/0.52/easing#ease"><code>ease</code></a> provides a basic inertial animation</li>
<li><a href="/react-native/docs/0.52/easing#elastic"><code>elastic</code></a> provides a basic spring interaction</li>
<li><a href="/react-native/docs/0.52/easing#ease"><code>ease</code></a> provides a simple inertial animation</li>
<li><a href="/react-native/docs/0.52/easing#elastic"><code>elastic</code></a> provides a simple spring interaction</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="standard-functions"></a><a href="#standard-functions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Standard functions</h3>
<p>Three standard easing functions are provided:</p>
@@ -142,7 +142,7 @@
<h3><a class="anchor" aria-hidden="true" id="ease"></a><a href="#ease" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ease()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">ease</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span>
</code></pre>
<p>A basic inertial interaction, similar to an object slowly accelerating to speed.</p>
<p>A simple inertial interaction, similar to an object slowly accelerating to speed.</p>
<p><a href="http://cubic-bezier.com/#.42,0,1,1">http://cubic-bezier.com/#.42,0,1,1</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="quad"></a><a href="#quad" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>quad()</code></h3>
@@ -184,14 +184,14 @@
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
</code></pre>
<p>A basic elastic interaction, similar to a spring oscillating back and forth.</p>
<p>A simple elastic interaction, similar to a spring oscillating back and forth.</p>
<p>Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N &gt; 1 will overshoot about N times.</p>
<p><a href="http://easings.net/#easeInElastic">http://easings.net/#easeInElastic</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="back"></a><a href="#back" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>back()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">back</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span>
</code></pre>
<p>Use with <code>Animated.parallel()</code> to create a basic effect where the object animates back slightly as the animation starts.</p>
<p>Use with <code>Animated.parallel()</code> to create a simple effect where the object animates back slightly as the animation starts.</p>
<p>Wolfram Plot:</p>
<ul>
<li><a href="http://tiny.cc/back_default">http://tiny.cc/back_default</a> (s = 1.70158, default)</li>
@@ -200,7 +200,7 @@
<h3><a class="anchor" aria-hidden="true" id="bounce"></a><a href="#bounce" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>bounce()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">bounce</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span>
</code></pre>
<p>Provides a basic bouncing effect.</p>
<p>Provides a simple bouncing effect.</p>
<p><a href="http://easings.net/#easeInBounce">http://easings.net/#easeInBounce</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="bezier"></a><a href="#bezier" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>bezier()</code></h3>
+7 -7
View File
@@ -73,10 +73,10 @@
<h3><a class="anchor" aria-hidden="true" id="predefined-animations"></a><a href="#predefined-animations" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Predefined animations</h3>
<p>The <code>Easing</code> module provides several predefined animations through the following methods:</p>
<ul>
<li><a href="/react-native/docs/0.52/easing#back"><code>back</code></a> provides a basic animation where the object goes slightly back before moving forward</li>
<li><a href="/react-native/docs/0.52/easing#back"><code>back</code></a> provides a simple animation where the object goes slightly back before moving forward</li>
<li><a href="/react-native/docs/0.52/easing#bounce"><code>bounce</code></a> provides a bouncing animation</li>
<li><a href="/react-native/docs/0.52/easing#ease"><code>ease</code></a> provides a basic inertial animation</li>
<li><a href="/react-native/docs/0.52/easing#elastic"><code>elastic</code></a> provides a basic spring interaction</li>
<li><a href="/react-native/docs/0.52/easing#ease"><code>ease</code></a> provides a simple inertial animation</li>
<li><a href="/react-native/docs/0.52/easing#elastic"><code>elastic</code></a> provides a simple spring interaction</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="standard-functions"></a><a href="#standard-functions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Standard functions</h3>
<p>Three standard easing functions are provided:</p>
@@ -142,7 +142,7 @@
<h3><a class="anchor" aria-hidden="true" id="ease"></a><a href="#ease" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ease()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">ease</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span>
</code></pre>
<p>A basic inertial interaction, similar to an object slowly accelerating to speed.</p>
<p>A simple inertial interaction, similar to an object slowly accelerating to speed.</p>
<p><a href="http://cubic-bezier.com/#.42,0,1,1">http://cubic-bezier.com/#.42,0,1,1</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="quad"></a><a href="#quad" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>quad()</code></h3>
@@ -184,14 +184,14 @@
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
</code></pre>
<p>A basic elastic interaction, similar to a spring oscillating back and forth.</p>
<p>A simple elastic interaction, similar to a spring oscillating back and forth.</p>
<p>Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N &gt; 1 will overshoot about N times.</p>
<p><a href="http://easings.net/#easeInElastic">http://easings.net/#easeInElastic</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="back"></a><a href="#back" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>back()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">back</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span>
</code></pre>
<p>Use with <code>Animated.parallel()</code> to create a basic effect where the object animates back slightly as the animation starts.</p>
<p>Use with <code>Animated.parallel()</code> to create a simple effect where the object animates back slightly as the animation starts.</p>
<p>Wolfram Plot:</p>
<ul>
<li><a href="http://tiny.cc/back_default">http://tiny.cc/back_default</a> (s = 1.70158, default)</li>
@@ -200,7 +200,7 @@
<h3><a class="anchor" aria-hidden="true" id="bounce"></a><a href="#bounce" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>bounce()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">bounce</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span>
</code></pre>
<p>Provides a basic bouncing effect.</p>
<p>Provides a simple bouncing effect.</p>
<p><a href="http://easings.net/#easeInBounce">http://easings.net/#easeInBounce</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="bezier"></a><a href="#bezier" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>bezier()</code></h3>
+4 -5
View File
@@ -69,12 +69,12 @@
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/scrollview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ScrollView</h1></header><article><div><span><p>Component that wraps platform ScrollView while providing integration with touch locking &quot;responder&quot; system.</p>
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes quick to debug.</p>
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes easy to debug.</p>
<p>Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.</p>
<p><code>&lt;ScrollView&gt;</code> vs <a href="/react-native/docs/0.52/flatlist"><code>&lt;FlatList&gt;</code></a> - which one to use?</p>
<p><code>ScrollView</code> renders all its react child components at once, but this has a performance downside.</p>
<p>Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.</p>
<p>This is where <code>FlatList</code> comes into play. <code>FlatList</code> renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.</p>
<p><code>ScrollView</code> simply renders all its react child components at once. That makes it very easy to understand and use.</p>
<p>On the other hand, this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.</p>
<p>This is where <code>FlatList</code> comes into play. <code>FlatList</code> renders items lazily, just when they are about to appear, and removes items that scroll way off screen to save memory and processing time.</p>
<p><code>FlatList</code> is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.</p>
<h3><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h3>
<ul>
@@ -518,7 +518,6 @@ const styles = StyleSheet.create({
<hr>
<h3><a class="anchor" aria-hidden="true" id="indicatorstyle"></a><a href="#indicatorstyle" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>indicatorStyle</code></h3>
<p>The style of the scroll indicators.</p>
<!-- alex ignore retext-profanities -->
<ul>
<li><code>'default'</code> (the default), same as <code>black</code>.</li>
<li><code>'black'</code>, scroll indicator is black. This style is good against a light background.</li>
+4 -5
View File
@@ -69,12 +69,12 @@
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/scrollview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ScrollView</h1></header><article><div><span><p>Component that wraps platform ScrollView while providing integration with touch locking &quot;responder&quot; system.</p>
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes quick to debug.</p>
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes easy to debug.</p>
<p>Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.</p>
<p><code>&lt;ScrollView&gt;</code> vs <a href="/react-native/docs/0.52/flatlist"><code>&lt;FlatList&gt;</code></a> - which one to use?</p>
<p><code>ScrollView</code> renders all its react child components at once, but this has a performance downside.</p>
<p>Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.</p>
<p>This is where <code>FlatList</code> comes into play. <code>FlatList</code> renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.</p>
<p><code>ScrollView</code> simply renders all its react child components at once. That makes it very easy to understand and use.</p>
<p>On the other hand, this has a performance downside. Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.</p>
<p>This is where <code>FlatList</code> comes into play. <code>FlatList</code> renders items lazily, just when they are about to appear, and removes items that scroll way off screen to save memory and processing time.</p>
<p><code>FlatList</code> is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.</p>
<h3><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h3>
<ul>
@@ -518,7 +518,6 @@ const styles = StyleSheet.create({
<hr>
<h3><a class="anchor" aria-hidden="true" id="indicatorstyle"></a><a href="#indicatorstyle" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>indicatorStyle</code></h3>
<p>The style of the scroll indicators.</p>
<!-- alex ignore retext-profanities -->
<ul>
<li><code>'default'</code> (the default), same as <code>black</code>.</li>
<li><code>'black'</code>, scroll indicator is black. This style is good against a light background.</li>
+2 -2
View File
@@ -199,7 +199,7 @@ AppRegistry.registerComponent('AwesomeProject', () =&gt; BlueIsCool);
<p>In order to use this feature, you must give the view a <code>width</code> and a <code>height</code>.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="containers"></a><a href="#containers" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Containers</h2>
<p>The <code>&lt;Text&gt;</code> element is unique relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <code>&lt;Text&gt;</code> are no longer rectangles, but wrap when they see the end of the line.</p>
<p>The <code>&lt;Text&gt;</code> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <code>&lt;Text&gt;</code> are no longer rectangles, but wrap when they see the end of the line.</p>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>First part and <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>second part<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
@@ -248,7 +248,7 @@ AppRegistry.registerComponent('AwesomeProject', () =&gt; BlueIsCool);
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyAppHeaderText</span></span><span class="token punctuation">></span></span>Text styled <span class="token keyword">as</span> a header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MyAppHeaderText</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
</code></pre>
<p>Assuming that <code>MyAppText</code> is a component that only renders out its children into a <code>Text</code> component with styling, then <code>MyAppHeaderText</code> can be defined as follows:</p>
<p>Assuming that <code>MyAppText</code> is a component that simply renders out its children into a <code>Text</code> component with styling, then <code>MyAppHeaderText</code> can be defined as follows:</p>
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">MyAppHeaderText</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyAppText</span></span><span class="token punctuation">></span></span>
+2 -2
View File
@@ -199,7 +199,7 @@ AppRegistry.registerComponent('AwesomeProject', () =&gt; BlueIsCool);
<p>In order to use this feature, you must give the view a <code>width</code> and a <code>height</code>.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="containers"></a><a href="#containers" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Containers</h2>
<p>The <code>&lt;Text&gt;</code> element is unique relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <code>&lt;Text&gt;</code> are no longer rectangles, but wrap when they see the end of the line.</p>
<p>The <code>&lt;Text&gt;</code> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <code>&lt;Text&gt;</code> are no longer rectangles, but wrap when they see the end of the line.</p>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>First part and <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>second part<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
@@ -248,7 +248,7 @@ AppRegistry.registerComponent('AwesomeProject', () =&gt; BlueIsCool);
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyAppHeaderText</span></span><span class="token punctuation">></span></span>Text styled <span class="token keyword">as</span> a header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MyAppHeaderText</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
</code></pre>
<p>Assuming that <code>MyAppText</code> is a component that only renders out its children into a <code>Text</code> component with styling, then <code>MyAppHeaderText</code> can be defined as follows:</p>
<p>Assuming that <code>MyAppText</code> is a component that simply renders out its children into a <code>Text</code> component with styling, then <code>MyAppHeaderText</code> can be defined as follows:</p>
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">MyAppHeaderText</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyAppText</span></span><span class="token punctuation">></span></span>
+3 -3
View File
@@ -69,7 +69,7 @@
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/textinput.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">TextInput</h1></header><article><div><span><p>A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.</p>
<p>The most basic use case is to plop down a <code>TextInput</code> and subscribe to the <code>onChangeText</code> events to read the user input. There are also other events, such as <code>onSubmitEditing</code> and <code>onFocus</code> that can be subscribed to. A minimal example:</p>
<p>The simplest use case is to plop down a <code>TextInput</code> and subscribe to the <code>onChangeText</code> events to read the user input. There are also other events, such as <code>onSubmitEditing</code> and <code>onFocus</code> that can be subscribed to. A simple example:</p>
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> { AppRegistry, TextInput } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
@@ -300,7 +300,7 @@ AppRegistry.registerComponent(
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="defaultvalue"></a><a href="#defaultvalue" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>defaultValue</code></h3>
<p>Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.</p>
<p>Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
@@ -632,7 +632,7 @@ AppRegistry.registerComponent(
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="value"></a><a href="#value" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>value</code></h3>
<p>The value to show for the text input. <code>TextInput</code> is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent unwanted edits without flicker.</p>
<p>The value to show for the text input. <code>TextInput</code> is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent unwanted edits without flicker.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
+3 -3
View File
@@ -69,7 +69,7 @@
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/textinput.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">TextInput</h1></header><article><div><span><p>A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.</p>
<p>The most basic use case is to plop down a <code>TextInput</code> and subscribe to the <code>onChangeText</code> events to read the user input. There are also other events, such as <code>onSubmitEditing</code> and <code>onFocus</code> that can be subscribed to. A minimal example:</p>
<p>The simplest use case is to plop down a <code>TextInput</code> and subscribe to the <code>onChangeText</code> events to read the user input. There are also other events, such as <code>onSubmitEditing</code> and <code>onFocus</code> that can be subscribed to. A simple example:</p>
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> { AppRegistry, TextInput } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
@@ -300,7 +300,7 @@ AppRegistry.registerComponent(
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="defaultvalue"></a><a href="#defaultvalue" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>defaultValue</code></h3>
<p>Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.</p>
<p>Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
@@ -632,7 +632,7 @@ AppRegistry.registerComponent(
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="value"></a><a href="#value" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>value</code></h3>
<p>The value to show for the text input. <code>TextInput</code> is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent unwanted edits without flicker.</p>
<p>The value to show for the text input. <code>TextInput</code> is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent unwanted edits without flicker.</p>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
+7 -7
View File
@@ -73,10 +73,10 @@
<h3><a class="anchor" aria-hidden="true" id="predefined-animations"></a><a href="#predefined-animations" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Predefined animations</h3>
<p>The <code>Easing</code> module provides several predefined animations through the following methods:</p>
<ul>
<li><a href="/react-native/docs/0.53/easing#back"><code>back</code></a> provides a basic animation where the object goes slightly back before moving forward</li>
<li><a href="/react-native/docs/0.53/easing#back"><code>back</code></a> provides a simple animation where the object goes slightly back before moving forward</li>
<li><a href="/react-native/docs/0.53/easing#bounce"><code>bounce</code></a> provides a bouncing animation</li>
<li><a href="/react-native/docs/0.53/easing#ease"><code>ease</code></a> provides a basic inertial animation</li>
<li><a href="/react-native/docs/0.53/easing#elastic"><code>elastic</code></a> provides a basic spring interaction</li>
<li><a href="/react-native/docs/0.53/easing#ease"><code>ease</code></a> provides a simple inertial animation</li>
<li><a href="/react-native/docs/0.53/easing#elastic"><code>elastic</code></a> provides a simple spring interaction</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="standard-functions"></a><a href="#standard-functions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Standard functions</h3>
<p>Three standard easing functions are provided:</p>
@@ -142,7 +142,7 @@
<h3><a class="anchor" aria-hidden="true" id="ease"></a><a href="#ease" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ease()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">ease</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span>
</code></pre>
<p>A basic inertial interaction, similar to an object slowly accelerating to speed.</p>
<p>A simple inertial interaction, similar to an object slowly accelerating to speed.</p>
<p><a href="http://cubic-bezier.com/#.42,0,1,1">http://cubic-bezier.com/#.42,0,1,1</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="quad"></a><a href="#quad" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>quad()</code></h3>
@@ -184,14 +184,14 @@
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
</code></pre>
<p>A basic elastic interaction, similar to a spring oscillating back and forth.</p>
<p>A simple elastic interaction, similar to a spring oscillating back and forth.</p>
<p>Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N &gt; 1 will overshoot about N times.</p>
<p><a href="http://easings.net/#easeInElastic">http://easings.net/#easeInElastic</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="back"></a><a href="#back" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>back()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">back</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span>
</code></pre>
<p>Use with <code>Animated.parallel()</code> to create a basic effect where the object animates back slightly as the animation starts.</p>
<p>Use with <code>Animated.parallel()</code> to create a simple effect where the object animates back slightly as the animation starts.</p>
<p>Wolfram Plot:</p>
<ul>
<li><a href="http://tiny.cc/back_default">http://tiny.cc/back_default</a> (s = 1.70158, default)</li>
@@ -200,7 +200,7 @@
<h3><a class="anchor" aria-hidden="true" id="bounce"></a><a href="#bounce" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>bounce()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">bounce</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span>
</code></pre>
<p>Provides a basic bouncing effect.</p>
<p>Provides a simple bouncing effect.</p>
<p><a href="http://easings.net/#easeInBounce">http://easings.net/#easeInBounce</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="bezier"></a><a href="#bezier" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>bezier()</code></h3>
+7 -7
View File
@@ -73,10 +73,10 @@
<h3><a class="anchor" aria-hidden="true" id="predefined-animations"></a><a href="#predefined-animations" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Predefined animations</h3>
<p>The <code>Easing</code> module provides several predefined animations through the following methods:</p>
<ul>
<li><a href="/react-native/docs/0.53/easing#back"><code>back</code></a> provides a basic animation where the object goes slightly back before moving forward</li>
<li><a href="/react-native/docs/0.53/easing#back"><code>back</code></a> provides a simple animation where the object goes slightly back before moving forward</li>
<li><a href="/react-native/docs/0.53/easing#bounce"><code>bounce</code></a> provides a bouncing animation</li>
<li><a href="/react-native/docs/0.53/easing#ease"><code>ease</code></a> provides a basic inertial animation</li>
<li><a href="/react-native/docs/0.53/easing#elastic"><code>elastic</code></a> provides a basic spring interaction</li>
<li><a href="/react-native/docs/0.53/easing#ease"><code>ease</code></a> provides a simple inertial animation</li>
<li><a href="/react-native/docs/0.53/easing#elastic"><code>elastic</code></a> provides a simple spring interaction</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="standard-functions"></a><a href="#standard-functions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Standard functions</h3>
<p>Three standard easing functions are provided:</p>
@@ -142,7 +142,7 @@
<h3><a class="anchor" aria-hidden="true" id="ease"></a><a href="#ease" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ease()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">ease</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span>
</code></pre>
<p>A basic inertial interaction, similar to an object slowly accelerating to speed.</p>
<p>A simple inertial interaction, similar to an object slowly accelerating to speed.</p>
<p><a href="http://cubic-bezier.com/#.42,0,1,1">http://cubic-bezier.com/#.42,0,1,1</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="quad"></a><a href="#quad" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>quad()</code></h3>
@@ -184,14 +184,14 @@
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
</code></pre>
<p>A basic elastic interaction, similar to a spring oscillating back and forth.</p>
<p>A simple elastic interaction, similar to a spring oscillating back and forth.</p>
<p>Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N &gt; 1 will overshoot about N times.</p>
<p><a href="http://easings.net/#easeInElastic">http://easings.net/#easeInElastic</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="back"></a><a href="#back" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>back()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">back</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span>
</code></pre>
<p>Use with <code>Animated.parallel()</code> to create a basic effect where the object animates back slightly as the animation starts.</p>
<p>Use with <code>Animated.parallel()</code> to create a simple effect where the object animates back slightly as the animation starts.</p>
<p>Wolfram Plot:</p>
<ul>
<li><a href="http://tiny.cc/back_default">http://tiny.cc/back_default</a> (s = 1.70158, default)</li>
@@ -200,7 +200,7 @@
<h3><a class="anchor" aria-hidden="true" id="bounce"></a><a href="#bounce" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>bounce()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">bounce</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span>
</code></pre>
<p>Provides a basic bouncing effect.</p>
<p>Provides a simple bouncing effect.</p>
<p><a href="http://easings.net/#easeInBounce">http://easings.net/#easeInBounce</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="bezier"></a><a href="#bezier" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>bezier()</code></h3>
+2 -2
View File
@@ -199,7 +199,7 @@ AppRegistry.registerComponent('AwesomeProject', () =&gt; BlueIsCool);
<p>In order to use this feature, you must give the view a <code>width</code> and a <code>height</code>.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="containers"></a><a href="#containers" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Containers</h2>
<p>The <code>&lt;Text&gt;</code> element is unique relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <code>&lt;Text&gt;</code> are no longer rectangles, but wrap when they see the end of the line.</p>
<p>The <code>&lt;Text&gt;</code> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <code>&lt;Text&gt;</code> are no longer rectangles, but wrap when they see the end of the line.</p>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>First part and <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>second part<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
@@ -248,7 +248,7 @@ AppRegistry.registerComponent('AwesomeProject', () =&gt; BlueIsCool);
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyAppHeaderText</span></span><span class="token punctuation">></span></span>Text styled <span class="token keyword">as</span> a header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MyAppHeaderText</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
</code></pre>
<p>Assuming that <code>MyAppText</code> is a component that only renders out its children into a <code>Text</code> component with styling, then <code>MyAppHeaderText</code> can be defined as follows:</p>
<p>Assuming that <code>MyAppText</code> is a component that simply renders out its children into a <code>Text</code> component with styling, then <code>MyAppHeaderText</code> can be defined as follows:</p>
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">MyAppHeaderText</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyAppText</span></span><span class="token punctuation">></span></span>
+2 -2
View File
@@ -199,7 +199,7 @@ AppRegistry.registerComponent('AwesomeProject', () =&gt; BlueIsCool);
<p>In order to use this feature, you must give the view a <code>width</code> and a <code>height</code>.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="containers"></a><a href="#containers" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Containers</h2>
<p>The <code>&lt;Text&gt;</code> element is unique relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <code>&lt;Text&gt;</code> are no longer rectangles, but wrap when they see the end of the line.</p>
<p>The <code>&lt;Text&gt;</code> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <code>&lt;Text&gt;</code> are no longer rectangles, but wrap when they see the end of the line.</p>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>First part and <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>second part<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
@@ -248,7 +248,7 @@ AppRegistry.registerComponent('AwesomeProject', () =&gt; BlueIsCool);
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyAppHeaderText</span></span><span class="token punctuation">></span></span>Text styled <span class="token keyword">as</span> a header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MyAppHeaderText</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
</code></pre>
<p>Assuming that <code>MyAppText</code> is a component that only renders out its children into a <code>Text</code> component with styling, then <code>MyAppHeaderText</code> can be defined as follows:</p>
<p>Assuming that <code>MyAppText</code> is a component that simply renders out its children into a <code>Text</code> component with styling, then <code>MyAppHeaderText</code> can be defined as follows:</p>
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">MyAppHeaderText</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyAppText</span></span><span class="token punctuation">></span></span>
+7 -7
View File
@@ -73,10 +73,10 @@
<h3><a class="anchor" aria-hidden="true" id="predefined-animations"></a><a href="#predefined-animations" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Predefined animations</h3>
<p>The <code>Easing</code> module provides several predefined animations through the following methods:</p>
<ul>
<li><a href="/react-native/docs/0.54/easing#back"><code>back</code></a> provides a basic animation where the object goes slightly back before moving forward</li>
<li><a href="/react-native/docs/0.54/easing#back"><code>back</code></a> provides a simple animation where the object goes slightly back before moving forward</li>
<li><a href="/react-native/docs/0.54/easing#bounce"><code>bounce</code></a> provides a bouncing animation</li>
<li><a href="/react-native/docs/0.54/easing#ease"><code>ease</code></a> provides a basic inertial animation</li>
<li><a href="/react-native/docs/0.54/easing#elastic"><code>elastic</code></a> provides a basic spring interaction</li>
<li><a href="/react-native/docs/0.54/easing#ease"><code>ease</code></a> provides a simple inertial animation</li>
<li><a href="/react-native/docs/0.54/easing#elastic"><code>elastic</code></a> provides a simple spring interaction</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="standard-functions"></a><a href="#standard-functions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Standard functions</h3>
<p>Three standard easing functions are provided:</p>
@@ -142,7 +142,7 @@
<h3><a class="anchor" aria-hidden="true" id="ease"></a><a href="#ease" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ease()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">ease</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span>
</code></pre>
<p>A basic inertial interaction, similar to an object slowly accelerating to speed.</p>
<p>A simple inertial interaction, similar to an object slowly accelerating to speed.</p>
<p><a href="http://cubic-bezier.com/#.42,0,1,1">http://cubic-bezier.com/#.42,0,1,1</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="quad"></a><a href="#quad" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>quad()</code></h3>
@@ -184,14 +184,14 @@
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
</code></pre>
<p>A basic elastic interaction, similar to a spring oscillating back and forth.</p>
<p>A simple elastic interaction, similar to a spring oscillating back and forth.</p>
<p>Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N &gt; 1 will overshoot about N times.</p>
<p><a href="http://easings.net/#easeInElastic">http://easings.net/#easeInElastic</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="back"></a><a href="#back" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>back()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">back</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span>
</code></pre>
<p>Use with <code>Animated.parallel()</code> to create a basic effect where the object animates back slightly as the animation starts.</p>
<p>Use with <code>Animated.parallel()</code> to create a simple effect where the object animates back slightly as the animation starts.</p>
<p>Wolfram Plot:</p>
<ul>
<li><a href="http://tiny.cc/back_default">http://tiny.cc/back_default</a> (s = 1.70158, default)</li>
@@ -200,7 +200,7 @@
<h3><a class="anchor" aria-hidden="true" id="bounce"></a><a href="#bounce" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>bounce()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">bounce</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span>
</code></pre>
<p>Provides a basic bouncing effect.</p>
<p>Provides a simple bouncing effect.</p>
<p><a href="http://easings.net/#easeInBounce">http://easings.net/#easeInBounce</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="bezier"></a><a href="#bezier" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>bezier()</code></h3>
+7 -7
View File
@@ -73,10 +73,10 @@
<h3><a class="anchor" aria-hidden="true" id="predefined-animations"></a><a href="#predefined-animations" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Predefined animations</h3>
<p>The <code>Easing</code> module provides several predefined animations through the following methods:</p>
<ul>
<li><a href="/react-native/docs/0.54/easing#back"><code>back</code></a> provides a basic animation where the object goes slightly back before moving forward</li>
<li><a href="/react-native/docs/0.54/easing#back"><code>back</code></a> provides a simple animation where the object goes slightly back before moving forward</li>
<li><a href="/react-native/docs/0.54/easing#bounce"><code>bounce</code></a> provides a bouncing animation</li>
<li><a href="/react-native/docs/0.54/easing#ease"><code>ease</code></a> provides a basic inertial animation</li>
<li><a href="/react-native/docs/0.54/easing#elastic"><code>elastic</code></a> provides a basic spring interaction</li>
<li><a href="/react-native/docs/0.54/easing#ease"><code>ease</code></a> provides a simple inertial animation</li>
<li><a href="/react-native/docs/0.54/easing#elastic"><code>elastic</code></a> provides a simple spring interaction</li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="standard-functions"></a><a href="#standard-functions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Standard functions</h3>
<p>Three standard easing functions are provided:</p>
@@ -142,7 +142,7 @@
<h3><a class="anchor" aria-hidden="true" id="ease"></a><a href="#ease" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ease()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">ease</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span>
</code></pre>
<p>A basic inertial interaction, similar to an object slowly accelerating to speed.</p>
<p>A simple inertial interaction, similar to an object slowly accelerating to speed.</p>
<p><a href="http://cubic-bezier.com/#.42,0,1,1">http://cubic-bezier.com/#.42,0,1,1</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="quad"></a><a href="#quad" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>quad()</code></h3>
@@ -184,14 +184,14 @@
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
</code></pre>
<p>A basic elastic interaction, similar to a spring oscillating back and forth.</p>
<p>A simple elastic interaction, similar to a spring oscillating back and forth.</p>
<p>Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N &gt; 1 will overshoot about N times.</p>
<p><a href="http://easings.net/#easeInElastic">http://easings.net/#easeInElastic</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="back"></a><a href="#back" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>back()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">back</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span>
</code></pre>
<p>Use with <code>Animated.parallel()</code> to create a basic effect where the object animates back slightly as the animation starts.</p>
<p>Use with <code>Animated.parallel()</code> to create a simple effect where the object animates back slightly as the animation starts.</p>
<p>Wolfram Plot:</p>
<ul>
<li><a href="http://tiny.cc/back_default">http://tiny.cc/back_default</a> (s = 1.70158, default)</li>
@@ -200,7 +200,7 @@
<h3><a class="anchor" aria-hidden="true" id="bounce"></a><a href="#bounce" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>bounce()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">bounce</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span>
</code></pre>
<p>Provides a basic bouncing effect.</p>
<p>Provides a simple bouncing effect.</p>
<p><a href="http://easings.net/#easeInBounce">http://easings.net/#easeInBounce</a></p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="bezier"></a><a href="#bezier" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>bezier()</code></h3>
+2 -2
View File
@@ -199,7 +199,7 @@ AppRegistry.registerComponent('AwesomeProject', () =&gt; BlueIsCool);
<p>In order to use this feature, you must give the view a <code>width</code> and a <code>height</code>.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="containers"></a><a href="#containers" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Containers</h2>
<p>The <code>&lt;Text&gt;</code> element is unique relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <code>&lt;Text&gt;</code> are no longer rectangles, but wrap when they see the end of the line.</p>
<p>The <code>&lt;Text&gt;</code> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <code>&lt;Text&gt;</code> are no longer rectangles, but wrap when they see the end of the line.</p>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>First part and <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>second part<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
@@ -248,7 +248,7 @@ AppRegistry.registerComponent('AwesomeProject', () =&gt; BlueIsCool);
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyAppHeaderText</span></span><span class="token punctuation">></span></span>Text styled <span class="token keyword">as</span> a header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MyAppHeaderText</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
</code></pre>
<p>Assuming that <code>MyAppText</code> is a component that only renders out its children into a <code>Text</code> component with styling, then <code>MyAppHeaderText</code> can be defined as follows:</p>
<p>Assuming that <code>MyAppText</code> is a component that simply renders out its children into a <code>Text</code> component with styling, then <code>MyAppHeaderText</code> can be defined as follows:</p>
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">MyAppHeaderText</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyAppText</span></span><span class="token punctuation">></span></span>
+2 -2
View File
@@ -199,7 +199,7 @@ AppRegistry.registerComponent('AwesomeProject', () =&gt; BlueIsCool);
<p>In order to use this feature, you must give the view a <code>width</code> and a <code>height</code>.</p>
</blockquote>
<h2><a class="anchor" aria-hidden="true" id="containers"></a><a href="#containers" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Containers</h2>
<p>The <code>&lt;Text&gt;</code> element is unique relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <code>&lt;Text&gt;</code> are no longer rectangles, but wrap when they see the end of the line.</p>
<p>The <code>&lt;Text&gt;</code> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <code>&lt;Text&gt;</code> are no longer rectangles, but wrap when they see the end of the line.</p>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>First part and <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>second part<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
@@ -248,7 +248,7 @@ AppRegistry.registerComponent('AwesomeProject', () =&gt; BlueIsCool);
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyAppHeaderText</span></span><span class="token punctuation">></span></span>Text styled <span class="token keyword">as</span> a header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MyAppHeaderText</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
</code></pre>
<p>Assuming that <code>MyAppText</code> is a component that only renders out its children into a <code>Text</code> component with styling, then <code>MyAppHeaderText</code> can be defined as follows:</p>
<p>Assuming that <code>MyAppText</code> is a component that simply renders out its children into a <code>Text</code> component with styling, then <code>MyAppHeaderText</code> can be defined as follows:</p>
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">MyAppHeaderText</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyAppText</span></span><span class="token punctuation">></span></span>