mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Deploy website
Deploy website version based on f4bd04a09ac72e9da14fc9d8b2378e01e60c5f91
This commit is contained in:
Website Deployment Script
@@ -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 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.46"/><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>
|
||||
<!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.46"/><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>
|
||||
(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 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>
|
||||
</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 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.46/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.46/animated#spring"><code>Animated.spring()</code></a> provides a simple spring physics model.</li>
|
||||
<li><a href="/react-native/docs/0.46/animated#spring"><code>Animated.spring()</code></a> provides a basic spring physics model.</li>
|
||||
<li><a href="/react-native/docs/0.46/animated#timing"><code>Animated.timing()</code></a> animates a value over time using <a href="/react-native/docs/0.46/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.46/animations#using-the-native-driver">Animations</a> guide to learn more.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="animatable-components"></a><a href="#animatable-components" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Animatable components</h3>
|
||||
<p>Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
|
||||
<p>Only animatable components can be animated. These 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.46/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.46/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.46/animated#stagger"><code>Animated.stagger()</code></a> starts animations in order and in parallel, but with successive delays.</li>
|
||||
</ul>
|
||||
<p>Animations can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.46/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
|
||||
<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.46/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>
|
||||
|
||||
@@ -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 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.46"/><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>
|
||||
<!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.46"/><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>
|
||||
(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 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>
|
||||
</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 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.46/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.46/animated#spring"><code>Animated.spring()</code></a> provides a simple spring physics model.</li>
|
||||
<li><a href="/react-native/docs/0.46/animated#spring"><code>Animated.spring()</code></a> provides a basic spring physics model.</li>
|
||||
<li><a href="/react-native/docs/0.46/animated#timing"><code>Animated.timing()</code></a> animates a value over time using <a href="/react-native/docs/0.46/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.46/animations#using-the-native-driver">Animations</a> guide to learn more.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="animatable-components"></a><a href="#animatable-components" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Animatable components</h3>
|
||||
<p>Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
|
||||
<p>Only animatable components can be animated. These 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.46/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.46/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.46/animated#stagger"><code>Animated.stagger()</code></a> starts animations in order and in parallel, but with successive delays.</li>
|
||||
</ul>
|
||||
<p>Animations can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.46/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
|
||||
<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.46/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>
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and just use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">removeEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and just use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">removeEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -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 simple, flat lists, supporting the most handy features:"/><meta name="docsearch:version" content="0.46"/><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>
|
||||
<!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 flat lists supporting the most handy features:"/><meta name="docsearch:version" content="0.46"/><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 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 simple, 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 flat lists supporting the most handy features:</p>
|
||||
<ul>
|
||||
<li>Fully cross-platform.</li>
|
||||
<li>Optional horizontal mode.</li>
|
||||
@@ -200,7 +200,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 just 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 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>
|
||||
@@ -284,7 +284,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 the most efficient, and is easy to use if you have fixed height 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 if you have fixed height items, for example:</p>
|
||||
<pre><code class="hljs">getItemLayout={(data, index) => (
|
||||
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
|
||||
)}
|
||||
|
||||
@@ -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 simple, flat lists, supporting the most handy features:"/><meta name="docsearch:version" content="0.46"/><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>
|
||||
<!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 flat lists supporting the most handy features:"/><meta name="docsearch:version" content="0.46"/><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 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 simple, 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 flat lists supporting the most handy features:</p>
|
||||
<ul>
|
||||
<li>Fully cross-platform.</li>
|
||||
<li>Optional horizontal mode.</li>
|
||||
@@ -200,7 +200,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 just 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 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>
|
||||
@@ -284,7 +284,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 the most efficient, and is easy to use if you have fixed height 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 if you have fixed height items, for example:</p>
|
||||
<pre><code class="hljs">getItemLayout={(data, index) => (
|
||||
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
|
||||
)}
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -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 just 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 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, just 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, 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>
|
||||
|
||||
@@ -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 just 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 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, just 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, 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>
|
||||
|
||||
@@ -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 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.46"/><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>
|
||||
<!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 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.46"/><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 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 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>
|
||||
</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 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>() {
|
||||
|
||||
@@ -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 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.46"/><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>
|
||||
<!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 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.46"/><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 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 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>
|
||||
</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 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>() {
|
||||
|
||||
@@ -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 "responder" 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 easy 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 quick to debug.</p>
|
||||
<p>Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.</p>
|
||||
<p><code><ScrollView></code> vs <a href="/react-native/docs/0.46/flatlist"><code><FlatList></code></a> - which one to use?</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><code>ScrollView</code> renders all its react child components at once. That enables us to understand and use them in brief.</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>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>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>
|
||||
@@ -504,8 +504,8 @@ const styles = StyleSheet.create({
|
||||
<p>The style of the scroll indicators.</p>
|
||||
<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>
|
||||
<li><code>'white'</code>, scroll indicator is white. This style is good against a dark background.</li>
|
||||
<li><code>'black'</code>, scroll indicator is <code>black</code>. This style is good against a light background.</li>
|
||||
<li><code>'white'</code>, scroll indicator is <code>white</code>. This style is good against a dark background.</li>
|
||||
</ul>
|
||||
<table>
|
||||
<thead>
|
||||
|
||||
@@ -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 "responder" 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 easy 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 quick to debug.</p>
|
||||
<p>Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.</p>
|
||||
<p><code><ScrollView></code> vs <a href="/react-native/docs/0.46/flatlist"><code><FlatList></code></a> - which one to use?</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><code>ScrollView</code> renders all its react child components at once. That enables us to understand and use them in brief.</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>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>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>
|
||||
@@ -504,8 +504,8 @@ const styles = StyleSheet.create({
|
||||
<p>The style of the scroll indicators.</p>
|
||||
<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>
|
||||
<li><code>'white'</code>, scroll indicator is white. This style is good against a dark background.</li>
|
||||
<li><code>'black'</code>, scroll indicator is <code>black</code>. This style is good against a light background.</li>
|
||||
<li><code>'white'</code>, scroll indicator is <code>white</code>. This style is good against a dark background.</li>
|
||||
</ul>
|
||||
<table>
|
||||
<thead>
|
||||
|
||||
@@ -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.46/flatlist"><code><FlatList></code></a>.</p>
|
||||
<p>Simple Examples:</p>
|
||||
<p>Examples:</p>
|
||||
<pre><code class="hljs"><SectionList
|
||||
renderItem={({item}) => <ListItem title={item.title} />}
|
||||
renderSectionHeader={({section}) => <H1 title={section.title} />}
|
||||
|
||||
@@ -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.46/flatlist"><code><FlatList></code></a>.</p>
|
||||
<p>Simple Examples:</p>
|
||||
<p>Examples:</p>
|
||||
<pre><code class="hljs"><SectionList
|
||||
renderItem={({item}) => <ListItem title={item.title} />}
|
||||
renderSectionHeader={({section}) => <H1 title={section.title} />}
|
||||
|
||||
@@ -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 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.47"/><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>
|
||||
<!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.47"/><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>
|
||||
(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 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>
|
||||
</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 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.47/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.47/animated#spring"><code>Animated.spring()</code></a> provides a simple spring physics model.</li>
|
||||
<li><a href="/react-native/docs/0.47/animated#spring"><code>Animated.spring()</code></a> provides a basic spring physics model.</li>
|
||||
<li><a href="/react-native/docs/0.47/animated#timing"><code>Animated.timing()</code></a> animates a value over time using <a href="/react-native/docs/0.47/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.47/animations#using-the-native-driver">Animations</a> guide to learn more.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="animatable-components"></a><a href="#animatable-components" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Animatable components</h3>
|
||||
<p>Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
|
||||
<p>Only animatable components can be animated. These 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.47/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.47/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.47/animated#stagger"><code>Animated.stagger()</code></a> starts animations in order and in parallel, but with successive delays.</li>
|
||||
</ul>
|
||||
<p>Animations can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.47/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
|
||||
<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.47/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>
|
||||
|
||||
@@ -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 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.47"/><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>
|
||||
<!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.47"/><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>
|
||||
(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 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>
|
||||
</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 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.47/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.47/animated#spring"><code>Animated.spring()</code></a> provides a simple spring physics model.</li>
|
||||
<li><a href="/react-native/docs/0.47/animated#spring"><code>Animated.spring()</code></a> provides a basic spring physics model.</li>
|
||||
<li><a href="/react-native/docs/0.47/animated#timing"><code>Animated.timing()</code></a> animates a value over time using <a href="/react-native/docs/0.47/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.47/animations#using-the-native-driver">Animations</a> guide to learn more.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="animatable-components"></a><a href="#animatable-components" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Animatable components</h3>
|
||||
<p>Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
|
||||
<p>Only animatable components can be animated. These 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.47/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.47/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.47/animated#stagger"><code>Animated.stagger()</code></a> starts animations in order and in parallel, but with successive delays.</li>
|
||||
</ul>
|
||||
<p>Animations can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/react-native/docs/0.47/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
|
||||
<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.47/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>
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and just use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">removeEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and just use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">removeEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -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 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.47"/><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>
|
||||
<!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 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.47"/><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 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 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>
|
||||
</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 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>() {
|
||||
|
||||
@@ -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 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.47"/><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>
|
||||
<!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 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.47"/><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 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 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>
|
||||
</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 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>() {
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and just use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">removeEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and just use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">removeEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and just use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">removeEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and just use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">removeEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and just use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">removeEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and just use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">removeEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and just use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">removeEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and just use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">removeEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and just use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">removeEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
<tr><td>handler</td><td>function</td><td>Yes</td><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and just use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate <code>addEventListener</code> and <code>removeEventListener</code> and use <code>addListener</code> and <code>listener.remove()</code> directly. That will be a breaking change though, as both the method and event names are different (addListener events are currently required to be globally unique).</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeEventListener()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token function">removeEventListener</span><span class="token punctuation">(</span>type<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
@@ -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/imagebackground.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ImageBackground</h1></header><article><div><span><p>A common feature request from developers familiar with the web is <code>background-image</code>. To handle this use case, you can use the <code><ImageBackground></code> component, which has the same props as <code><Image></code>, and add whatever children to it you would like to layer on top of it.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very simple. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>You might not want to use <code><ImageBackground></code> in some cases, since the implementation is very basic. Refer to <code><ImageBackground></code>'s <a href="https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js">source code</a> for more insight, and create your own custom component when needed.</p>
|
||||
<p>Note that you must specify some width and height style attributes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
|
||||
Reference in New Issue
Block a user