mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
@@ -22,10 +22,8 @@ available in Arabic and Hebrew with RTL layouts for both
|
||||
<a href="https://itunes.apple.com/app/id964397083">iOS</a> and
|
||||
<a href="https://play.google.com/store/apps/details?id=com.facebook.adsmanager">Android</a>.
|
||||
Here is how it looks like in those RTL languages:</p>
|
||||
<p align="center">
|
||||
<img src="/react-native/blog/assets/rtl-ama-ios-arabic.png" width="280" style="margin:10px">
|
||||
<img src="/react-native/blog/assets/rtl-ama-android-hebrew.png" width="280" style="margin:10px">
|
||||
</p>
|
||||
<p><img src="/react-native/blog/assets/rtl-ama-ios-arabic.png" width="280" style="margin:10px"></p>
|
||||
<p><img src="/react-native/blog/assets/rtl-ama-android-hebrew.png" width="280" style="margin:10px"></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="overview-changes-in-rn-for-rtl-support"></a><a href="#overview-changes-in-rn-for-rtl-support" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Overview Changes in RN for RTL support</h2>
|
||||
<p><a href="https://github.com/facebook/css-layout">css-layout</a> already has a concept of
|
||||
<code>start</code> and <code>end</code> for the layout. In the Left-to-Right (LTR) layout, <code>start</code>
|
||||
@@ -85,17 +83,13 @@ automatically.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="writing-rtl-ready-components"></a><a href="#writing-rtl-ready-components" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Writing RTL-ready Components</h2>
|
||||
<p>In general, most components are already RTL-ready, for example:</p>
|
||||
<ul>
|
||||
<li><p>Left-to-Right Layout</p>
|
||||
<p><p align="left">
|
||||
<img src="/react-native/blog/assets/rtl-demo-listitem-ltr.png" width="300"></p></li>
|
||||
<li>Left-to-Right Layout</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p><img src="/react-native/blog/assets/rtl-demo-listitem-ltr.png" width="300"></p>
|
||||
<ul>
|
||||
<li><p>Right-to-Left Layout</p>
|
||||
<p><p align="left">
|
||||
<img src="/react-native/blog/assets/rtl-demo-listitem-rtl.png" width="300"></p></li>
|
||||
<li>Right-to-Left Layout</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p><img src="/react-native/blog/assets/rtl-demo-listitem-rtl.png" width="300"></p>
|
||||
<p>However, there are several cases to be aware of, for which you will need the
|
||||
<a href="https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js"><code>I18nManager</code></a>.
|
||||
In
|
||||
@@ -107,27 +101,23 @@ can make the necessary changes according to the layout.</p>
|
||||
LTR and RTL layout, because RN will not flip your source image. Therefore, you
|
||||
should flip them according to the layout style.</p>
|
||||
<ul>
|
||||
<li><p>Left-to-Right Layout</p>
|
||||
<p><p align="left">
|
||||
<img src="/react-native/blog/assets/rtl-demo-icon-ltr.png" width="300"></p></li>
|
||||
<li>Left-to-Right Layout</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p><img src="/react-native/blog/assets/rtl-demo-icon-ltr.png" width="300"></p>
|
||||
<ul>
|
||||
<li><p>Right-to-Left Layout</p>
|
||||
<p><p align="left">
|
||||
<img src="/react-native/blog/assets/rtl-demo-icon-rtl.png" width="300"></p></li>
|
||||
<li>Right-to-Left Layout</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p><img src="/react-native/blog/assets/rtl-demo-icon-rtl.png" width="300"></p>
|
||||
<p>Here are two ways to flip the icon according to the direction:</p>
|
||||
<ul>
|
||||
<li><p>Adding a <code>transform</code> style to the image component:</p>
|
||||
<pre><code class="hljs css js"><Image
|
||||
<pre><code class="hljs css javascript"><Image
|
||||
source={...}
|
||||
style={{<span class="hljs-attr">transform</span>: [{<span class="hljs-attr">scaleX</span>: I18nManager.isRTL ? <span class="hljs-number">-1</span> : <span class="hljs-number">1</span>}]}}
|
||||
/>
|
||||
</code></pre></li>
|
||||
<li><p>Or, changing the image source according to the direction:</p>
|
||||
<pre><code class="hljs css js"><span class="hljs-keyword">let</span> imageSource = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./back.png"</span>);
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">let</span> imageSource = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./back.png"</span>);
|
||||
<span class="hljs-keyword">if</span> (I18nManager.isRTL) {
|
||||
imageSource = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./forward.png"</span>);
|
||||
}
|
||||
|
||||
@@ -8,20 +8,20 @@
|
||||
<h2><a class="anchor" aria-hidden="true" name="headless-js"></a><a href="#headless-js" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Headless JS</h2>
|
||||
<p>Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music. It is only available on Android, for now.</p>
|
||||
<p>To get started, define your async task in a dedicated file (e.g. <code>SomeTaskName.js</code>):</p>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-built_in">module</span>.exports = <span class="hljs-keyword">async</span> (taskData) => {
|
||||
<pre><code class="hljs css javascript"><span class="hljs-built_in">module</span>.exports = <span class="hljs-keyword">async</span> taskData => {
|
||||
<span class="hljs-comment">// Perform your task here.</span>
|
||||
}
|
||||
};
|
||||
</code></pre>
|
||||
<p>Next, register your task in on <code>AppRegistry</code>:</p>
|
||||
<pre><code class="hljs css javascript">AppRegistry.registerHeadlessTask(<span class="hljs-string">'SomeTaskName'</span>, () => <span class="hljs-built_in">require</span>(<span class="hljs-string">'SomeTaskName'</span>));
|
||||
<pre><code class="hljs css javascript">AppRegistry.registerHeadlessTask(<span class="hljs-string">"SomeTaskName"</span>, () => <span class="hljs-built_in">require</span>(<span class="hljs-string">"SomeTaskName"</span>));
|
||||
</code></pre>
|
||||
<p>Using Headless JS does require some native Java code to be written in order to allow you to start up the service when needed. Take a look at our new <a href="/react-native/headless-js-android.md">Headless JS docs</a> to learn more!</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="the-keyboard-api"></a><a href="#the-keyboard-api" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The Keyboard API</h2>
|
||||
<p>Working with the on-screen keyboard is now easier with <a href="/react-native/keyboard.md"><code>Keyboard</code></a>. You can now listen for native keyboard events and react to them. For example, to dismiss the active keyboard, simply call <code>Keyboard.dismiss()</code>:</p>
|
||||
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> { Keyboard } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>
|
||||
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> { Keyboard } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-comment">// Hide that keyboard!</span>
|
||||
Keyboard.dismiss()
|
||||
Keyboard.dismiss();
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" name="animated-division"></a><a href="#animated-division" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Animated Division</h2>
|
||||
<p>Combining two animated values via addition, multiplication, and modulo are already supported by React Native. With version 0.36, combining two <a href="/react-native/animated.md#divide">animated values via division</a> is now possible. There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):</p>
|
||||
|
||||
@@ -52,19 +52,25 @@
|
||||
<li><p>These components are based on <code>PureComponent</code> which means that they will not re-render if <code>props</code> remains shallow-equal. Make sure that everything your <code>renderItem</code> function depends on directly is passed as a prop that is not <code>===</code> after updates, otherwise your UI may not update on changes. This includes the <code>data</code> prop and parent component state. For example:</p>
|
||||
<pre><code class="hljs css javascript"><FlatList
|
||||
data={<span class="hljs-keyword">this</span>.state.data}
|
||||
renderItem={({item}) => <span class="xml"><span class="hljs-tag"><<span class="hljs-name">MyItem</span>
|
||||
<span class="hljs-attr">item</span>=<span class="hljs-string">{item}</span>
|
||||
<span class="hljs-attr">onPress</span>=<span class="hljs-string">{()</span> =></span> this.setState((oldState) => ({
|
||||
selected: { // New instance breaks `===`
|
||||
...oldState.selected, // copy old data
|
||||
[item.key]: !oldState.selected[item.key], // toggle
|
||||
}}))
|
||||
}
|
||||
selected={
|
||||
!!this.state.selected[item.key] // renderItem depends on state
|
||||
}
|
||||
/>}
|
||||
selected={ // Can be any prop that doesn't collide with existing props
|
||||
renderItem={({ item }) => (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">MyItem</span>
|
||||
<span class="hljs-attr">item</span>=<span class="hljs-string">{item}</span>
|
||||
<span class="hljs-attr">onPress</span>=<span class="hljs-string">{()</span> =></span>
|
||||
this.setState(oldState => ({
|
||||
selected: {
|
||||
// New instance breaks `===`
|
||||
...oldState.selected, // copy old data
|
||||
[item.key]: !oldState.selected[item.key] // toggle
|
||||
}
|
||||
}))
|
||||
}
|
||||
selected={
|
||||
!!this.state.selected[item.key] // renderItem depends on state
|
||||
}
|
||||
/>
|
||||
)}
|
||||
selected={
|
||||
// Can be any prop that doesn't collide with existing props
|
||||
this.state.selected // A change to selected should re-render FlatList
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -7,13 +7,13 @@
|
||||
</script></nav></div><div class="container mainContainer documentContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1><a href="/react-native/blog/2017/03/13/idx-the-existential-function.html">idx: The Existential Function</a></h1><p class="post-meta">March 13, 2017</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/yungsters" target="_blank">Timothy Yung</a>Engineering Manager at Facebook</p><div class="authorPhoto authorPhoto-big"><a href="https://github.com/yungsters" target="_blank"><img src="https://pbs.twimg.com/profile_images/1592444107/image.jpg"/></a></div></div></header><div><span><p>At Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors.</p>
|
||||
<p>Unfortunately, accessing these deeply nested values is currently tedious and verbose.</p>
|
||||
<pre><code class="hljs css javascript">props.user &&
|
||||
props.user.friends &&
|
||||
props.user.friends[<span class="hljs-number">0</span>] &&
|
||||
props.user.friends[<span class="hljs-number">0</span>].friends
|
||||
props.user.friends &&
|
||||
props.user.friends[<span class="hljs-number">0</span>] &&
|
||||
props.user.friends[<span class="hljs-number">0</span>].friends;
|
||||
</code></pre>
|
||||
<p>There is <a href="https://github.com/claudepache/es-optional-chaining">an ECMAScript proposal to introduce the existential operator</a> which will make this much more convenient. But until a time when that proposal is finalized, we want a solution that improves our quality of life, maintains existing language semantics, and encourages type safety with Flow.</p>
|
||||
<p>We came up with an existential <em>function</em> we call <code>idx</code>.</p>
|
||||
<pre><code class="hljs css javascript">idx(props, _ => _.user.friends[<span class="hljs-number">0</span>].friends)
|
||||
<pre><code class="hljs css javascript">idx(props, _ => _.user.friends[<span class="hljs-number">0</span>].friends);
|
||||
</code></pre>
|
||||
<p>The invocation in this code snippet behaves similarly to the boolean expression in the code snippet above, except with significantly less repetition. The <code>idx</code> function takes exactly two arguments:</p>
|
||||
<ul>
|
||||
@@ -22,10 +22,13 @@ props.user.friends[<span class="hljs-number">0</span>].friends
|
||||
</ul>
|
||||
<p>In theory, the <code>idx</code> function will try-catch errors that are the result of accessing properties on null or undefined. If such an error is caught, it will return either null or undefined. (And you can see how this might be implemented in <a href="https://github.com/facebookincubator/idx/blob/master/packages/idx/src/idx.js">idx.js</a>.)</p>
|
||||
<p>In practice, try-catching every nested property access is slow, and differentiating between specific kinds of TypeErrors is fragile. To deal with these shortcomings, we created a Babel plugin that transforms the above <code>idx</code> invocation into the following expression:</p>
|
||||
<pre><code class="hljs css javascript">props.user == <span class="hljs-literal">null</span> ? props.user :
|
||||
props.user.friends == <span class="hljs-literal">null</span> ? props.user.friends :
|
||||
props.user.friends[<span class="hljs-number">0</span>] == <span class="hljs-literal">null</span> ? props.user.friends[<span class="hljs-number">0</span>] :
|
||||
props.user.friends[<span class="hljs-number">0</span>].friends
|
||||
<pre><code class="hljs css javascript">props.user == <span class="hljs-literal">null</span>
|
||||
? props.user
|
||||
: props.user.friends == <span class="hljs-literal">null</span>
|
||||
? props.user.friends
|
||||
: props.user.friends[<span class="hljs-number">0</span>] == <span class="hljs-literal">null</span>
|
||||
? props.user.friends[<span class="hljs-number">0</span>]
|
||||
: props.user.friends[<span class="hljs-number">0</span>].friends;
|
||||
</code></pre>
|
||||
<p>Finally, we added a custom Flow type declaration for <code>idx</code> that allows the traversal in the second argument to be properly type-checked while permitting nested access on nullable properties.</p>
|
||||
<p>The function, Babel plugin, and Flow declaration are now <a href="https://github.com/facebookincubator/idx">available on GitHub</a>. They are used by installing the <strong>idx</strong> and <strong>babel-plugin-idx</strong> npm packages, and adding “idx” to the list of plugins in your <code>.babelrc</code> file.</p>
|
||||
|
||||
+2
-2
@@ -17,7 +17,7 @@
|
||||
|
||||
### Callstack
|
||||
|
||||
- We’ve been working on React Native CI. Most importantly, we have migrated from Travis to Circle, leaving React Native with a single, unified CI pipeline]]></summary>
|
||||
* We’ve been working on React Native CI. Most importantly, we have migrated from Travis to Circle, leaving React Native with a single, unified CI pipeline]]></summary>
|
||||
<author>
|
||||
<name>Tomislav Tenodi</name>
|
||||
<uri>https://github.com/tenodi</uri>
|
||||
@@ -33,7 +33,7 @@
|
||||
|
||||
### Callstack
|
||||
|
||||
- [React Native EU](https://react-native.eu) is over. More than 300 participants from 33 countries have visited Wroclaw. Talks can be found [on Youtube](ht]]></summary>
|
||||
* [React Native EU](https://react-native.eu) is over. More than 300 participants from 33 countries have visited Wroclaw. Talks can be found [on Youtube](ht]]></summary>
|
||||
<author>
|
||||
<name>Mike Grabowski</name>
|
||||
<uri>https://github.com/grabbou</uri>
|
||||
|
||||
+2
-2
@@ -21,7 +21,7 @@
|
||||
|
||||
### Callstack
|
||||
|
||||
- We’ve been working on React Native CI. Most importantly, we have migrated from Travis to Circle, leaving React Native with a single, unified CI pipeline]]></description>
|
||||
* We’ve been working on React Native CI. Most importantly, we have migrated from Travis to Circle, leaving React Native with a single, unified CI pipeline]]></description>
|
||||
</item>
|
||||
<item>
|
||||
<title><![CDATA[React Native Monthly #4]]></title>
|
||||
@@ -32,7 +32,7 @@
|
||||
|
||||
### Callstack
|
||||
|
||||
- [React Native EU](https://react-native.eu) is over. More than 300 participants from 33 countries have visited Wroclaw. Talks can be found [on Youtube](ht]]></description>
|
||||
* [React Native EU](https://react-native.eu) is over. More than 300 participants from 33 countries have visited Wroclaw. Talks can be found [on Youtube](ht]]></description>
|
||||
</item>
|
||||
<item>
|
||||
<title><![CDATA[React Native Monthly #3]]></title>
|
||||
|
||||
+30
-21
@@ -636,13 +636,13 @@ $ <span class="hljs-built_in">create-react-native-app</span> <span class="hljs-s
|
||||
</span></div></article></div><div class="post"><header class="postHeader"><h1><a href="/react-native/blog/2017/03/13/idx-the-existential-function.html">idx: The Existential Function</a></h1><p class="post-meta">March 13, 2017</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/yungsters" target="_blank">Timothy Yung</a>Engineering Manager at Facebook</p><div class="authorPhoto authorPhoto-big"><a href="https://github.com/yungsters" target="_blank"><img src="https://pbs.twimg.com/profile_images/1592444107/image.jpg"/></a></div></div></header><article class="post-content"><div><span><p>At Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors.</p>
|
||||
<p>Unfortunately, accessing these deeply nested values is currently tedious and verbose.</p>
|
||||
<pre><code class="hljs css javascript">props.user &&
|
||||
props.user.friends &&
|
||||
props.user.friends[<span class="hljs-number">0</span>] &&
|
||||
props.user.friends[<span class="hljs-number">0</span>].friends
|
||||
props.user.friends &&
|
||||
props.user.friends[<span class="hljs-number">0</span>] &&
|
||||
props.user.friends[<span class="hljs-number">0</span>].friends;
|
||||
</code></pre>
|
||||
<p>There is <a href="https://github.com/claudepache/es-optional-chaining">an ECMAScript proposal to introduce the existential operator</a> which will make this much more convenient. But until a time when that proposal is finalized, we want a solution that improves our quality of life, maintains existing language semantics, and encourages type safety with Flow.</p>
|
||||
<p>We came up with an existential <em>function</em> we call <code>idx</code>.</p>
|
||||
<pre><code class="hljs css javascript">idx(props, _ => _.user.friends[<span class="hljs-number">0</span>].friends)
|
||||
<pre><code class="hljs css javascript">idx(props, _ => _.user.friends[<span class="hljs-number">0</span>].friends);
|
||||
</code></pre>
|
||||
<p>The invocation in this code snippet behaves similarly to the boolean expression in the code snippet above, except with significantly less repetition. The <code>idx</code> function takes exactly two arguments:</p>
|
||||
<ul>
|
||||
@@ -651,10 +651,13 @@ props.user.friends[<span class="hljs-number">0</span>].friends
|
||||
</ul>
|
||||
<p>In theory, the <code>idx</code> function will try-catch errors that are the result of accessing properties on null or undefined. If such an error is caught, it will return either null or undefined. (And you can see how this might be implemented in <a href="https://github.com/facebookincubator/idx/blob/master/packages/idx/src/idx.js">idx.js</a>.)</p>
|
||||
<p>In practice, try-catching every nested property access is slow, and differentiating between specific kinds of TypeErrors is fragile. To deal with these shortcomings, we created a Babel plugin that transforms the above <code>idx</code> invocation into the following expression:</p>
|
||||
<pre><code class="hljs css javascript">props.user == <span class="hljs-literal">null</span> ? props.user :
|
||||
props.user.friends == <span class="hljs-literal">null</span> ? props.user.friends :
|
||||
props.user.friends[<span class="hljs-number">0</span>] == <span class="hljs-literal">null</span> ? props.user.friends[<span class="hljs-number">0</span>] :
|
||||
props.user.friends[<span class="hljs-number">0</span>].friends
|
||||
<pre><code class="hljs css javascript">props.user == <span class="hljs-literal">null</span>
|
||||
? props.user
|
||||
: props.user.friends == <span class="hljs-literal">null</span>
|
||||
? props.user.friends
|
||||
: props.user.friends[<span class="hljs-number">0</span>] == <span class="hljs-literal">null</span>
|
||||
? props.user.friends[<span class="hljs-number">0</span>]
|
||||
: props.user.friends[<span class="hljs-number">0</span>].friends;
|
||||
</code></pre>
|
||||
<p>Finally, we added a custom Flow type declaration for <code>idx</code> that allows the traversal in the second argument to be properly type-checked while permitting nested access on nullable properties.</p>
|
||||
<p>The function, Babel plugin, and Flow declaration are now <a href="https://github.com/facebookincubator/idx">available on GitHub</a>. They are used by installing the <strong>idx</strong> and <strong>babel-plugin-idx</strong> npm packages, and adding “idx” to the list of plugins in your <code>.babelrc</code> file.</p>
|
||||
@@ -706,19 +709,25 @@ props.user.friends[<span class="hljs-number">0</span>].friends
|
||||
<li><p>These components are based on <code>PureComponent</code> which means that they will not re-render if <code>props</code> remains shallow-equal. Make sure that everything your <code>renderItem</code> function depends on directly is passed as a prop that is not <code>===</code> after updates, otherwise your UI may not update on changes. This includes the <code>data</code> prop and parent component state. For example:</p>
|
||||
<pre><code class="hljs css javascript"><FlatList
|
||||
data={<span class="hljs-keyword">this</span>.state.data}
|
||||
renderItem={({item}) => <span class="xml"><span class="hljs-tag"><<span class="hljs-name">MyItem</span>
|
||||
<span class="hljs-attr">item</span>=<span class="hljs-string">{item}</span>
|
||||
<span class="hljs-attr">onPress</span>=<span class="hljs-string">{()</span> =></span> this.setState((oldState) => ({
|
||||
selected: { // New instance breaks `===`
|
||||
...oldState.selected, // copy old data
|
||||
[item.key]: !oldState.selected[item.key], // toggle
|
||||
}}))
|
||||
}
|
||||
selected={
|
||||
!!this.state.selected[item.key] // renderItem depends on state
|
||||
}
|
||||
/>}
|
||||
selected={ // Can be any prop that doesn't collide with existing props
|
||||
renderItem={({ item }) => (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">MyItem</span>
|
||||
<span class="hljs-attr">item</span>=<span class="hljs-string">{item}</span>
|
||||
<span class="hljs-attr">onPress</span>=<span class="hljs-string">{()</span> =></span>
|
||||
this.setState(oldState => ({
|
||||
selected: {
|
||||
// New instance breaks `===`
|
||||
...oldState.selected, // copy old data
|
||||
[item.key]: !oldState.selected[item.key] // toggle
|
||||
}
|
||||
}))
|
||||
}
|
||||
selected={
|
||||
!!this.state.selected[item.key] // renderItem depends on state
|
||||
}
|
||||
/>
|
||||
)}
|
||||
selected={
|
||||
// Can be any prop that doesn't collide with existing props
|
||||
this.state.selected // A change to selected should re-render FlatList
|
||||
}
|
||||
/>
|
||||
|
||||
+17
-27
@@ -211,20 +211,20 @@ React Native just keeps getting better thanks to you.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="headless-js"></a><a href="#headless-js" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Headless JS</h2>
|
||||
<p>Headless JS is a way to run tasks in JavaScript while your app is in the background. It can be used, for example, to sync fresh data, handle push notifications, or play music. It is only available on Android, for now.</p>
|
||||
<p>To get started, define your async task in a dedicated file (e.g. <code>SomeTaskName.js</code>):</p>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-built_in">module</span>.exports = <span class="hljs-keyword">async</span> (taskData) => {
|
||||
<pre><code class="hljs css javascript"><span class="hljs-built_in">module</span>.exports = <span class="hljs-keyword">async</span> taskData => {
|
||||
<span class="hljs-comment">// Perform your task here.</span>
|
||||
}
|
||||
};
|
||||
</code></pre>
|
||||
<p>Next, register your task in on <code>AppRegistry</code>:</p>
|
||||
<pre><code class="hljs css javascript">AppRegistry.registerHeadlessTask(<span class="hljs-string">'SomeTaskName'</span>, () => <span class="hljs-built_in">require</span>(<span class="hljs-string">'SomeTaskName'</span>));
|
||||
<pre><code class="hljs css javascript">AppRegistry.registerHeadlessTask(<span class="hljs-string">"SomeTaskName"</span>, () => <span class="hljs-built_in">require</span>(<span class="hljs-string">"SomeTaskName"</span>));
|
||||
</code></pre>
|
||||
<p>Using Headless JS does require some native Java code to be written in order to allow you to start up the service when needed. Take a look at our new <a href="/react-native/headless-js-android.md">Headless JS docs</a> to learn more!</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="the-keyboard-api"></a><a href="#the-keyboard-api" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The Keyboard API</h2>
|
||||
<p>Working with the on-screen keyboard is now easier with <a href="/react-native/keyboard.md"><code>Keyboard</code></a>. You can now listen for native keyboard events and react to them. For example, to dismiss the active keyboard, simply call <code>Keyboard.dismiss()</code>:</p>
|
||||
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> { Keyboard } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>
|
||||
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> { Keyboard } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-comment">// Hide that keyboard!</span>
|
||||
Keyboard.dismiss()
|
||||
Keyboard.dismiss();
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" name="animated-division"></a><a href="#animated-division" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Animated Division</h2>
|
||||
<p>Combining two animated values via addition, multiplication, and modulo are already supported by React Native. With version 0.36, combining two <a href="/react-native/animated.md#divide">animated values via division</a> is now possible. There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x --> 0.5x):</p>
|
||||
@@ -274,10 +274,8 @@ available in Arabic and Hebrew with RTL layouts for both
|
||||
<a href="https://itunes.apple.com/app/id964397083">iOS</a> and
|
||||
<a href="https://play.google.com/store/apps/details?id=com.facebook.adsmanager">Android</a>.
|
||||
Here is how it looks like in those RTL languages:</p>
|
||||
<p align="center">
|
||||
<img src="/react-native/blog/assets/rtl-ama-ios-arabic.png" width="280" style="margin:10px">
|
||||
<img src="/react-native/blog/assets/rtl-ama-android-hebrew.png" width="280" style="margin:10px">
|
||||
</p>
|
||||
<p><img src="/react-native/blog/assets/rtl-ama-ios-arabic.png" width="280" style="margin:10px"></p>
|
||||
<p><img src="/react-native/blog/assets/rtl-ama-android-hebrew.png" width="280" style="margin:10px"></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="overview-changes-in-rn-for-rtl-support"></a><a href="#overview-changes-in-rn-for-rtl-support" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Overview Changes in RN for RTL support</h2>
|
||||
<p><a href="https://github.com/facebook/css-layout">css-layout</a> already has a concept of
|
||||
<code>start</code> and <code>end</code> for the layout. In the Left-to-Right (LTR) layout, <code>start</code>
|
||||
@@ -337,17 +335,13 @@ automatically.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="writing-rtl-ready-components"></a><a href="#writing-rtl-ready-components" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Writing RTL-ready Components</h2>
|
||||
<p>In general, most components are already RTL-ready, for example:</p>
|
||||
<ul>
|
||||
<li><p>Left-to-Right Layout</p>
|
||||
<p><p align="left">
|
||||
<img src="/react-native/blog/assets/rtl-demo-listitem-ltr.png" width="300"></p></li>
|
||||
<li>Left-to-Right Layout</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p><img src="/react-native/blog/assets/rtl-demo-listitem-ltr.png" width="300"></p>
|
||||
<ul>
|
||||
<li><p>Right-to-Left Layout</p>
|
||||
<p><p align="left">
|
||||
<img src="/react-native/blog/assets/rtl-demo-listitem-rtl.png" width="300"></p></li>
|
||||
<li>Right-to-Left Layout</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p><img src="/react-native/blog/assets/rtl-demo-listitem-rtl.png" width="300"></p>
|
||||
<p>However, there are several cases to be aware of, for which you will need the
|
||||
<a href="https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js"><code>I18nManager</code></a>.
|
||||
In
|
||||
@@ -359,27 +353,23 @@ can make the necessary changes according to the layout.</p>
|
||||
LTR and RTL layout, because RN will not flip your source image. Therefore, you
|
||||
should flip them according to the layout style.</p>
|
||||
<ul>
|
||||
<li><p>Left-to-Right Layout</p>
|
||||
<p><p align="left">
|
||||
<img src="/react-native/blog/assets/rtl-demo-icon-ltr.png" width="300"></p></li>
|
||||
<li>Left-to-Right Layout</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p><img src="/react-native/blog/assets/rtl-demo-icon-ltr.png" width="300"></p>
|
||||
<ul>
|
||||
<li><p>Right-to-Left Layout</p>
|
||||
<p><p align="left">
|
||||
<img src="/react-native/blog/assets/rtl-demo-icon-rtl.png" width="300"></p></li>
|
||||
<li>Right-to-Left Layout</li>
|
||||
</ul>
|
||||
</p>
|
||||
<p><img src="/react-native/blog/assets/rtl-demo-icon-rtl.png" width="300"></p>
|
||||
<p>Here are two ways to flip the icon according to the direction:</p>
|
||||
<ul>
|
||||
<li><p>Adding a <code>transform</code> style to the image component:</p>
|
||||
<pre><code class="hljs css js"><Image
|
||||
<pre><code class="hljs css javascript"><Image
|
||||
source={...}
|
||||
style={{<span class="hljs-attr">transform</span>: [{<span class="hljs-attr">scaleX</span>: I18nManager.isRTL ? <span class="hljs-number">-1</span> : <span class="hljs-number">1</span>}]}}
|
||||
/>
|
||||
</code></pre></li>
|
||||
<li><p>Or, changing the image source according to the direction:</p>
|
||||
<pre><code class="hljs css js"><span class="hljs-keyword">let</span> imageSource = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./back.png"</span>);
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">let</span> imageSource = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./back.png"</span>);
|
||||
<span class="hljs-keyword">if</span> (I18nManager.isRTL) {
|
||||
imageSource = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./forward.png"</span>);
|
||||
}
|
||||
|
||||
@@ -21,7 +21,10 @@
|
||||
<h4><a class="anchor" aria-hidden="true" name="accessibilitylabel-ios-android"></a><a href="#accessibilitylabel-ios-android" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityLabel (iOS, Android)</h4>
|
||||
<p>When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.</p>
|
||||
<p>To use, set the <code>accessibilityLabel</code> property to a custom string on your View:</p>
|
||||
<pre><code class="hljs css javascript"><TouchableOpacity accessible={true} accessibilityLabel={'Tap me!'} onPress={this._onPress}>
|
||||
<pre><code class="hljs css javascript"><TouchableOpacity
|
||||
accessible={true}
|
||||
accessibilityLabel={'Tap me!'}
|
||||
onPress={this._onPress}>
|
||||
<View style={styles.button}>
|
||||
<Text style={styles.buttonText}>Press me!</Text>
|
||||
</View>
|
||||
@@ -38,11 +41,11 @@
|
||||
<li><strong>header</strong> Used when an element acts as a header for a content section (e.g. the title of a navigation bar).</li>
|
||||
<li><strong>search</strong> Used when the text field element should also be treated as a search field.</li>
|
||||
<li><strong>image</strong> Used when the element should be treated as an image. Can be combined with button or link, for example.</li>
|
||||
<li><strong>selected</strong> Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.</li>
|
||||
<li><strong>selected</strong> Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.</li>
|
||||
<li><strong>plays</strong> Used when the element plays its own sound when activated.</li>
|
||||
<li><strong>key</strong> Used when the element acts as a keyboard key.</li>
|
||||
<li><strong>text</strong> Used when the element should be treated as static text that cannot change.</li>
|
||||
<li><strong>summary</strong> Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. For example, when Weather first launches, the element with today's weather conditions is marked with this trait.</li>
|
||||
<li><strong>summary</strong> Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. For example, when Weather first launches, the element with today's weather conditions is marked with this trait.</li>
|
||||
<li><strong>disabled</strong> Used when the control is not enabled and does not respond to user input.</li>
|
||||
<li><strong>frequentUpdates</strong> Used when the element frequently updates its label or value, but too often to send notifications. Allows an accessibility client to poll for changes. A stopwatch would be an example.</li>
|
||||
<li><strong>startsMedia</strong> Used when activating an element starts a media session (e.g. playing a movie, recording audio) that should not be interrupted by output from an assistive technology, like VoiceOver.</li>
|
||||
@@ -52,8 +55,7 @@
|
||||
</ul>
|
||||
<h4><a class="anchor" aria-hidden="true" name="accessibilityviewismodal-ios"></a><a href="#accessibilityviewismodal-ios" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>accessibilityViewIsModal (iOS)</h4>
|
||||
<p>A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.</p>
|
||||
<p>For example, in a window that contains sibling views <code>A</code> and <code>B</code>, setting <code>accessibilityViewIsModal</code> to <code>true</code> on view <code>B</code> causes VoiceOver to ignore the elements in the view <code>A</code>.
|
||||
On the other hand, if view <code>B</code> contains a child view <code>C</code> and you set <code>accessibilityViewIsModal</code> to <code>true</code> on view <code>C</code>, VoiceOver does not ignore the elements in view <code>A</code>.</p>
|
||||
<p>For example, in a window that contains sibling views <code>A</code> and <code>B</code>, setting <code>accessibilityViewIsModal</code> to <code>true</code> on view <code>B</code> causes VoiceOver to ignore the elements in the view <code>A</code>. On the other hand, if view <code>B</code> contains a child view <code>C</code> and you set <code>accessibilityViewIsModal</code> to <code>true</code> on view <code>C</code>, VoiceOver does not ignore the elements in view <code>A</code>.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="onaccessibilitytap-ios"></a><a href="#onaccessibilitytap-ios" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>onAccessibilityTap (iOS)</h4>
|
||||
<p>Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="onmagictap-ios"></a><a href="#onmagictap-ios" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>onMagicTap (iOS)</h4>
|
||||
|
||||
@@ -3,16 +3,16 @@
|
||||
<pre><code class="hljs css javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ScreenReaderStatusExample</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
|
||||
state = {
|
||||
<span class="hljs-attr">screenReaderEnabled</span>: <span class="hljs-literal">false</span>,
|
||||
}
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
AccessibilityInfo.addEventListener(
|
||||
<span class="hljs-string">'change'</span>,
|
||||
<span class="hljs-keyword">this</span>._handleScreenReaderToggled
|
||||
);
|
||||
AccessibilityInfo.fetch().done(<span class="hljs-function">(<span class="hljs-params">isEnabled</span>) =></span> {
|
||||
AccessibilityInfo.fetch().done(<span class="hljs-function"><span class="hljs-params">isEnabled</span> =></span> {
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
<span class="hljs-attr">screenReaderEnabled</span>: isEnabled
|
||||
<span class="hljs-attr">screenReaderEnabled</span>: isEnabled,
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -24,17 +24,18 @@
|
||||
);
|
||||
}
|
||||
|
||||
_handleScreenReaderToggled = <span class="hljs-function">(<span class="hljs-params">isEnabled</span>) =></span> {
|
||||
_handleScreenReaderToggled = <span class="hljs-function"><span class="hljs-params">isEnabled</span> =></span> {
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
<span class="hljs-attr">screenReaderEnabled</span>: isEnabled,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>
|
||||
The screen reader is {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}.
|
||||
The screen reader is{' '}
|
||||
{this.state.screenReaderEnabled ? 'enabled' : 'disabled'}.
|
||||
<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span></span>
|
||||
);
|
||||
@@ -53,12 +54,12 @@
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="fetch"></a><a href="#fetch" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>fetch()</code></h3>
|
||||
<pre><code class="hljs css javascript">AccessibilityInfo.fetch()
|
||||
<pre><code class="hljs css javascript">AccessibilityInfo.fetch();
|
||||
</code></pre>
|
||||
<p>Query whether a screen reader is currently enabled. Returns a promise which resolves to a boolean. The result is <code>true</code> when a screen reader is enabled and <code>false</code> otherwise.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css javascript">AccessibilityInfo.addEventListener(eventName, handler)
|
||||
<pre><code class="hljs css javascript">AccessibilityInfo.addEventListener(eventName, handler);
|
||||
</code></pre>
|
||||
<p>Add an event handler.</p>
|
||||
<table>
|
||||
@@ -72,12 +73,8 @@
|
||||
</table>
|
||||
<p>Supported events:</p>
|
||||
<ul>
|
||||
<li><code>change</code>: Fires when the state of the screen reader changes. The argument
|
||||
to the event handler is a boolean. The boolean is <code>true</code> when a screen
|
||||
reader is enabled and <code>false</code> otherwise.</li>
|
||||
<li><code>announcementFinished</code>: iOS-only event. Fires when the screen reader has
|
||||
finished making an announcement. The argument to the event handler is a dictionary
|
||||
with these keys:
|
||||
<li><code>change</code>: Fires when the state of the screen reader changes. The argument to the event handler is a boolean. The boolean is <code>true</code> when a screen reader is enabled and <code>false</code> otherwise.</li>
|
||||
<li><code>announcementFinished</code>: iOS-only event. Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys:
|
||||
<ul>
|
||||
<li><code>announcement</code>: The string announced by the screen reader.</li>
|
||||
<li><code>success</code>: A boolean indicating whether the announcement was successfully made.</li>
|
||||
@@ -85,7 +82,7 @@ with these keys:
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="setaccessibilityfocus"></a><a href="#setaccessibilityfocus" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>setAccessibilityFocus()</code></h3>
|
||||
<pre><code class="hljs css javascript">AccessibilityInfo.setAccessibilityFocus(reactTag)
|
||||
<pre><code class="hljs css javascript">AccessibilityInfo.setAccessibilityFocus(reactTag);
|
||||
</code></pre>
|
||||
<p>Set accessibility focus to a React component.</p>
|
||||
<table>
|
||||
@@ -106,7 +103,7 @@ with these keys:
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="announceforaccessibility"></a><a href="#announceforaccessibility" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>announceForAccessibility()</code></h3>
|
||||
<pre><code class="hljs css javascript">AccessibilityInfo.announceForAccessibility(announcement)
|
||||
<pre><code class="hljs css javascript">AccessibilityInfo.announceForAccessibility(announcement);
|
||||
</code></pre>
|
||||
<p>Post a string to be announced by the screen reader.</p>
|
||||
<table>
|
||||
@@ -127,7 +124,7 @@ with these keys:
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 javascript">AccessibilityInfo.removeEventListener(eventName, handler)
|
||||
<pre><code class="hljs css javascript">AccessibilityInfo.removeEventListener(eventName, handler);
|
||||
</code></pre>
|
||||
<p>Remove an event handler.</p>
|
||||
<table>
|
||||
|
||||
@@ -31,7 +31,7 @@ Alert.alert(
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="alert"></a><a href="#alert" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>alert()</code></h3>
|
||||
<pre><code class="hljs css javascript">Alert.alert(title, [message], [buttons], [options])
|
||||
<pre><code class="hljs css javascript">Alert.alert(title, [message], [buttons], [options]);
|
||||
</code></pre>
|
||||
<p>Launches an alert dialog with the specified title, and optionally a message.</p>
|
||||
<table>
|
||||
|
||||
+35
-14
@@ -15,12 +15,19 @@
|
||||
</code></pre>
|
||||
<p>Example with custom buttons:</p>
|
||||
<pre><code class="hljs css javascript">AlertIOS.alert(
|
||||
<span class="hljs-string">'Update available'</span>,
|
||||
<span class="hljs-string">'Keep your app up to date to enjoy the latest features'</span>,
|
||||
[
|
||||
{<span class="hljs-attr">text</span>: <span class="hljs-string">'Cancel'</span>, <span class="hljs-attr">onPress</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Cancel Pressed'</span>), <span class="hljs-attr">style</span>: <span class="hljs-string">'cancel'</span>},
|
||||
{<span class="hljs-attr">text</span>: <span class="hljs-string">'Install'</span>, <span class="hljs-attr">onPress</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Install Pressed'</span>)},
|
||||
],
|
||||
<span class="hljs-string">'Update available'</span>,
|
||||
<span class="hljs-string">'Keep your app up to date to enjoy the latest features'</span>,
|
||||
[
|
||||
{
|
||||
<span class="hljs-attr">text</span>: <span class="hljs-string">'Cancel'</span>,
|
||||
<span class="hljs-attr">onPress</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Cancel Pressed'</span>),
|
||||
<span class="hljs-attr">style</span>: <span class="hljs-string">'cancel'</span>,
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">text</span>: <span class="hljs-string">'Install'</span>,
|
||||
<span class="hljs-attr">onPress</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Install Pressed'</span>),
|
||||
},
|
||||
]
|
||||
);
|
||||
</code></pre>
|
||||
<p>Example with custom buttons:</p>
|
||||
@@ -28,8 +35,15 @@
|
||||
<span class="hljs-string">'Enter password'</span>,
|
||||
<span class="hljs-string">'Enter your password to claim your $1.5B in lottery winnings'</span>,
|
||||
[
|
||||
{<span class="hljs-attr">text</span>: <span class="hljs-string">'Cancel'</span>, <span class="hljs-attr">onPress</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Cancel Pressed'</span>), <span class="hljs-attr">style</span>: <span class="hljs-string">'cancel'</span>},
|
||||
{<span class="hljs-attr">text</span>: <span class="hljs-string">'OK'</span>, <span class="hljs-attr">onPress</span>: <span class="hljs-function"><span class="hljs-params">password</span> =></span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'OK Pressed, password: '</span> + password)},
|
||||
{
|
||||
<span class="hljs-attr">text</span>: <span class="hljs-string">'Cancel'</span>,
|
||||
<span class="hljs-attr">onPress</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Cancel Pressed'</span>),
|
||||
<span class="hljs-attr">style</span>: <span class="hljs-string">'cancel'</span>,
|
||||
},
|
||||
{
|
||||
<span class="hljs-attr">text</span>: <span class="hljs-string">'OK'</span>,
|
||||
<span class="hljs-attr">onPress</span>: <span class="hljs-function"><span class="hljs-params">password</span> =></span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'OK Pressed, password: '</span> + password),
|
||||
},
|
||||
],
|
||||
<span class="hljs-string">'secure-text'</span>
|
||||
);
|
||||
@@ -38,7 +52,7 @@
|
||||
<pre><code class="hljs css javascript">AlertIOS.prompt(
|
||||
<span class="hljs-string">'Update username'</span>,
|
||||
<span class="hljs-literal">null</span>,
|
||||
text => <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Your username is "</span>+text),
|
||||
text => <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Your username is '</span> + text),
|
||||
<span class="hljs-literal">null</span>,
|
||||
<span class="hljs-string">'default'</span>
|
||||
);
|
||||
@@ -58,10 +72,10 @@
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="alert"></a><a href="#alert" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>alert()</code></h3>
|
||||
<pre><code class="hljs css javascript">AlertIOS.alert(title, [message], [callbackOrButtons])
|
||||
<pre><code class="hljs css javascript">AlertIOS.alert(title, [message], [callbackOrButtons]);
|
||||
</code></pre>
|
||||
<p>Create and display a popup alert with a title and an optional message.</p>
|
||||
<p>If passed a function in the <code>callbackOrButtons</code> param, it will be called when the user taps 'OK'. If passed an array of button configurations, each button should include a <code>text</code> key, as well as optional <code>onPress</code> and <code>style</code> keys. <code>style</code> should be one of 'default', 'cancel' or 'destructive'. See <a href="/react-native/docs/0.10/alertios.html#buttonsarray">ButtonsArray</a></p>
|
||||
<p>If passed a function in the <code>callbackOrButtons</code> param, it will be called when the user taps 'OK'. If passed an array of button configurations, each button should include a <code>text</code> key, as well as optional <code>onPress</code> and <code>style</code> keys. <code>style</code> should be one of 'default', 'cancel' or 'destructive'. See <a href="/react-native/docs/0.10/alertios.html#buttonsarray">ButtonsArray</a></p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -75,7 +89,14 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="prompt"></a><a href="#prompt" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>prompt()</code></h3>
|
||||
<pre><code class="hljs css javascript">AlertIOS.prompt(title, [message], [callbackOrButtons], [type], [defaultValue], [keyboardType])
|
||||
<pre><code class="hljs css javascript">AlertIOS.prompt(
|
||||
title,
|
||||
[message],
|
||||
[callbackOrButtons],
|
||||
[type],
|
||||
[defaultValue],
|
||||
[keyboardType]
|
||||
);
|
||||
</code></pre>
|
||||
<p>Create and display a prompt to enter some text.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -85,11 +106,11 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>title</td><td>string</td><td>Yes</td><td>The dialog's title.</td></tr>
|
||||
<tr><td>message</td><td>string</td><td>No</td><td>An optional message that appears above the text input.</td></tr>
|
||||
<tr><td>message</td><td>string</td><td>No</td><td>An optional message that appears above the text input.</td></tr>
|
||||
<tr><td>callbackOrButtons</td><td>function, <a href="/react-native/docs/0.10/alertios.html#buttonsarray">ButtonsArray</a></td><td>No</td><td>This optional argument should be either a single-argument function or an <a href="/react-native/docs/0.10/alertios.html#buttonsarray">array of buttons</a>.</td></tr>
|
||||
<tr><td>type</td><td><a href="/react-native/docs/0.10/alertios.html#alerttype">AlertType</a></td><td>No</td><td>This configures the text input.</td></tr>
|
||||
<tr><td>defaultValue</td><td>string</td><td>No</td><td>The default text in text input.</td></tr>
|
||||
<tr><td>keyboardType</td><td>string</td><td>No</td><td>The keyboard type of first text field(if exists). One of 'default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter' or 'web-search'.</td></tr>
|
||||
<tr><td>keyboardType</td><td>string</td><td>No</td><td>The keyboard type of first text field(if exists). One of 'default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter' or 'web-search'.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" name="type-definitions"></a><a href="#type-definitions" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Type Definitions</h2>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<li>Android NDK (download links and installation instructions below)</li>
|
||||
</ol>
|
||||
<h3><a class="anchor" aria-hidden="true" name="point-gradle-to-your-android-sdk"></a><a href="#point-gradle-to-your-android-sdk" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Point Gradle to your Android SDK:</h3>
|
||||
<p><strong>Step 1:</strong> Set environment variables through your local shell.</p>
|
||||
<p><strong>Step 1:</strong> Set environment variables through your local shell.</p>
|
||||
<p>Note: Files may vary based on shell flavor. See below for examples from common shells.</p>
|
||||
<ul>
|
||||
<li>bash: <code>.bash_profile</code> or <code>.bashrc</code></li>
|
||||
|
||||
+37
-42
@@ -1,11 +1,12 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><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/index.html"/><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."/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank">Edit</a><h1>Animated</h1></header><article><div><span><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and easy to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
|
||||
<p>The simplest workflow for creating an animation is to create an <code>Animated.Value</code>, hook it up to one or more style attributes of an animated component, and then drive updates via animations using <code>Animated.timing()</code>:</p>
|
||||
<pre><code class="hljs css javascript">Animated.timing( <span class="hljs-comment">// Animate value over time</span>
|
||||
<span class="hljs-keyword">this</span>.state.fadeAnim, <span class="hljs-comment">// The value to drive</span>
|
||||
<pre><code class="hljs css javascript">Animated.timing(
|
||||
<span class="hljs-comment">// Animate value over time</span>
|
||||
<span class="hljs-keyword">this</span>.state.fadeAnim, <span class="hljs-comment">// The value to drive</span>
|
||||
{
|
||||
<span class="hljs-attr">toValue</span>: <span class="hljs-number">1</span>, <span class="hljs-comment">// Animate to final value of 1</span>
|
||||
<span class="hljs-attr">toValue</span>: <span class="hljs-number">1</span>, <span class="hljs-comment">// Animate to final value of 1</span>
|
||||
}
|
||||
).start(); <span class="hljs-comment">// Start the animation</span>
|
||||
).start(); <span class="hljs-comment">// Start the animation</span>
|
||||
</code></pre>
|
||||
<p>Refer to the <a href="/react-native/docs/0.10/animations.html#animated-api">Animations</a> guide to see additional examples of <code>Animated</code> in action.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="overview"></a><a href="#overview" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Overview</h2>
|
||||
@@ -27,11 +28,11 @@
|
||||
<p>Animations are started by calling <code>start()</code> on your animation. <code>start()</code> takes a completion callback that will be called when the animation is done. If the animation finished running normally, the completion callback will be invoked with <code>{finished: true}</code>. If the animation is done because <code>stop()</code> was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive <code>{finished: false}</code>.</p>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">this</span>.animateValue.spring({}).start(<span class="hljs-function">(<span class="hljs-params">{finished}</span>) =></span> {
|
||||
<span class="hljs-keyword">if</span> (finished) {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Animation was completed'</span>)
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Animation was completed'</span>);
|
||||
} <span class="hljs-keyword">else</span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Animation was aborted'</span>)
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Animation was aborted'</span>);
|
||||
}
|
||||
})
|
||||
});
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" name="using-the-native-driver"></a><a href="#using-the-native-driver" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using the native driver</h3>
|
||||
<p>By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.</p>
|
||||
@@ -133,7 +134,7 @@
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="decay"></a><a href="#decay" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>decay()</code></h3>
|
||||
<pre><code class="hljs css javascript">Animated.decay(value, config)
|
||||
<pre><code class="hljs css javascript">Animated.decay(value, config);
|
||||
</code></pre>
|
||||
<p>Animates a value from an initial velocity to zero based on a decay coefficient.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -150,13 +151,12 @@
|
||||
<ul>
|
||||
<li><code>velocity</code>: Initial velocity. Required.</li>
|
||||
<li><code>deceleration</code>: Rate of decay. Default 0.997.</li>
|
||||
<li><code>isInteraction</code>: Whether or not this animation creates an "interaction handle" on the
|
||||
<code>InteractionManager</code>. Default true.</li>
|
||||
<li><code>isInteraction</code>: Whether or not this animation creates an "interaction handle" on the <code>InteractionManager</code>. Default true.</li>
|
||||
<li><code>useNativeDriver</code>: Uses the native driver when true. Default false.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="timing"></a><a href="#timing" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>timing()</code></h3>
|
||||
<pre><code class="hljs css javascript">Animated.timing(value, config)
|
||||
<pre><code class="hljs css javascript">Animated.timing(value, config);
|
||||
</code></pre>
|
||||
<p>Animates a value along a timed easing curve. The <a href="/react-native/docs/0.10/easing.html"><code>Easing</code></a> module has tons of predefined curves, or you can use your own function.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -171,17 +171,15 @@
|
||||
</table>
|
||||
<p>Config is an object that may have the following options:</p>
|
||||
<ul>
|
||||
<li><code>duration</code>: Length of animation (milliseconds). Default 500.</li>
|
||||
<li><code>easing</code>: Easing function to define curve.
|
||||
Default is <code>Easing.inOut(Easing.ease)</code>.</li>
|
||||
<li><code>delay</code>: Start the animation after delay (milliseconds). Default 0.</li>
|
||||
<li><code>isInteraction</code>: Whether or not this animation creates an "interaction handle" on the
|
||||
<code>InteractionManager</code>. Default true.</li>
|
||||
<li><code>duration</code>: Length of animation (milliseconds). Default 500.</li>
|
||||
<li><code>easing</code>: Easing function to define curve. Default is <code>Easing.inOut(Easing.ease)</code>.</li>
|
||||
<li><code>delay</code>: Start the animation after delay (milliseconds). Default 0.</li>
|
||||
<li><code>isInteraction</code>: Whether or not this animation creates an "interaction handle" on the <code>InteractionManager</code>. Default true.</li>
|
||||
<li><code>useNativeDriver</code>: Uses the native driver when true. Default false.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="spring"></a><a href="#spring" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>spring()</code></h3>
|
||||
<pre><code class="hljs css javascript">Animated.spring(value, config)
|
||||
<pre><code class="hljs css javascript">Animated.spring(value, config);
|
||||
</code></pre>
|
||||
<p>Animates a value according to an analytical spring model based on <a href="https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator">damped harmonic oscillation</a>. Tracks velocity state to create fluid motions as the <code>toValue</code> updates, and can be chained together.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -198,8 +196,8 @@ Default is <code>Easing.inOut(Easing.ease)</code>.</li>
|
||||
<p>Note that you can only define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one:</p>
|
||||
<p>The friction/tension or bounciness/speed options match the spring model in <a href="https://github.com/facebook/pop">Facebook Pop</a>, <a href="http://facebook.github.io/rebound/">Rebound</a>, and <a href="http://origami.design/">Origami</a>.</p>
|
||||
<ul>
|
||||
<li><code>friction</code>: Controls "bounciness"/overshoot. Default 7.</li>
|
||||
<li><code>tension</code>: Controls speed. Default 40.</li>
|
||||
<li><code>friction</code>: Controls "bounciness"/overshoot. Default 7.</li>
|
||||
<li><code>tension</code>: Controls speed. Default 40.</li>
|
||||
<li><code>speed</code>: Controls speed of the animation. Default 12.</li>
|
||||
<li><code>bounciness</code>: Controls bounciness. Default 8.</li>
|
||||
</ul>
|
||||
@@ -215,13 +213,13 @@ Default is <code>Easing.inOut(Easing.ease)</code>.</li>
|
||||
<li><code>overshootClamping</code>: Boolean indiciating whether the spring should be clamped and not bounce. Default false.</li>
|
||||
<li><code>restDisplacementThreshold</code>: The threshold of displacement from rest below which the spring should be considered at rest. Default 0.001.</li>
|
||||
<li><code>restSpeedThreshold</code>: The speed at which the spring should be considered at rest in pixels per second. Default 0.001.</li>
|
||||
<li><code>delay</code>: Start the animation after delay (milliseconds). Default 0.</li>
|
||||
<li><code>delay</code>: Start the animation after delay (milliseconds). Default 0.</li>
|
||||
<li><code>isInteraction</code>: Whether or not this animation creates an "interaction handle" on the <code>InteractionManager</code>. Default true.</li>
|
||||
<li><code>useNativeDriver</code>: Uses the native driver when true. Default false.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="add"></a><a href="#add" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>add()</code></h3>
|
||||
<pre><code class="hljs css javascript">Animated.add(a, b)
|
||||
<pre><code class="hljs css javascript">Animated.add(a, b);
|
||||
</code></pre>
|
||||
<p>Creates a new Animated value composed from two Animated values added together.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -236,7 +234,7 @@ Default is <code>Easing.inOut(Easing.ease)</code>.</li>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="divide"></a><a href="#divide" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>divide()</code></h3>
|
||||
<pre><code class="hljs css javascript">Animated.divide(a, b)
|
||||
<pre><code class="hljs css javascript">Animated.divide(a, b);
|
||||
</code></pre>
|
||||
<p>Creates a new Animated value composed by dividing the first Animated value by the second Animated value.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -251,7 +249,7 @@ Default is <code>Easing.inOut(Easing.ease)</code>.</li>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="multiply"></a><a href="#multiply" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>multiply()</code></h3>
|
||||
<pre><code class="hljs css javascript">Animated.multiply(a, b)
|
||||
<pre><code class="hljs css javascript">Animated.multiply(a, b);
|
||||
</code></pre>
|
||||
<p>Creates a new Animated value composed from two Animated values multiplied together.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -266,7 +264,7 @@ Default is <code>Easing.inOut(Easing.ease)</code>.</li>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="modulo"></a><a href="#modulo" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>modulo()</code></h3>
|
||||
<pre><code class="hljs css javascript">Animated.modulo(a, modulus)
|
||||
<pre><code class="hljs css javascript">Animated.modulo(a, modulus);
|
||||
</code></pre>
|
||||
<p>Creates a new Animated value that is the (non-negative) modulo of the provided Animated value.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -281,7 +279,7 @@ Default is <code>Easing.inOut(Easing.ease)</code>.</li>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="diffclamp"></a><a href="#diffclamp" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>diffClamp()</code></h3>
|
||||
<pre><code class="hljs css javascript">Animated.diffClamp(a, min, max)
|
||||
<pre><code class="hljs css javascript">Animated.diffClamp(a, min, max);
|
||||
</code></pre>
|
||||
<p>Create a new Animated value that is limited between 2 values. It uses the difference between the last value so even if the value is far from the bounds it will start changing when the value starts getting closer again. (<code>value = clamp(value + diff, min, max)</code>).</p>
|
||||
<p>This is useful with scroll events, for example, to show the navbar when scrolling up and to hide it when scrolling down.</p>
|
||||
@@ -298,7 +296,7 @@ Default is <code>Easing.inOut(Easing.ease)</code>.</li>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="delay"></a><a href="#delay" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>delay()</code></h3>
|
||||
<pre><code class="hljs css javascript">Animated.delay(time)
|
||||
<pre><code class="hljs css javascript">Animated.delay(time);
|
||||
</code></pre>
|
||||
<p>Starts an animation after the given delay.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -312,9 +310,9 @@ Default is <code>Easing.inOut(Easing.ease)</code>.</li>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="sequence"></a><a href="#sequence" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>sequence()</code></h3>
|
||||
<pre><code class="hljs css javascript">Animated.sequence(animations)
|
||||
<pre><code class="hljs css javascript">Animated.sequence(animations);
|
||||
</code></pre>
|
||||
<p>Starts an array of animations in order, waiting for each to complete before starting the next. If the current running animation is stopped, no following animations will be started.</p>
|
||||
<p>Starts an array of animations in order, waiting for each to complete before starting the next. If the current running animation is stopped, no following animations will be started.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -326,11 +324,9 @@ Default is <code>Easing.inOut(Easing.ease)</code>.</li>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="parallel"></a><a href="#parallel" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>parallel()</code></h3>
|
||||
<pre><code class="hljs css javascript">Animated.parallel(animations, [config])
|
||||
<pre><code class="hljs css javascript">Animated.parallel(animations, [config]);
|
||||
</code></pre>
|
||||
<p>Starts an array of animations all at the same time. By default, if one
|
||||
of the animations is stopped, they will all be stopped. You can override
|
||||
this with the <code>stopTogether</code> flag through <code>config</code>.</p>
|
||||
<p>Starts an array of animations all at the same time. By default, if one of the animations is stopped, they will all be stopped. You can override this with the <code>stopTogether</code> flag through <code>config</code>.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -343,10 +339,9 @@ this with the <code>stopTogether</code> flag through <code>config</code>.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="stagger"></a><a href="#stagger" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>stagger()</code></h3>
|
||||
<pre><code class="hljs css javascript">Animated.stagger(time, animations)
|
||||
<pre><code class="hljs css javascript">Animated.stagger(time, animations);
|
||||
</code></pre>
|
||||
<p>Array of animations may run in parallel (overlap), but are started in
|
||||
sequence with successive delays. Nice for doing trailing effects.</p>
|
||||
<p>Array of animations may run in parallel (overlap), but are started in sequence with successive delays. Nice for doing trailing effects.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -359,7 +354,7 @@ sequence with successive delays. Nice for doing trailing effects.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="loop"></a><a href="#loop" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>loop()</code></h3>
|
||||
<pre><code class="hljs css javascript">Animated.loop(animation)
|
||||
<pre><code class="hljs css javascript">Animated.loop(animation);
|
||||
</code></pre>
|
||||
<p>Loops a given animation continuously, so that each time it reaches the end, it resets and begins again from the start. Can specify number of times to loop using the key <code>iterations</code> in the config. Will loop without blocking the UI thread if the child animation is set to <code>useNativeDriver: true</code>. In addition, loops can prevent <code>VirtualizedList</code>-based components from rendering more rows while the animation is running. You can pass <code>isInteraction: false</code> in the child animation config to fix this.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -373,7 +368,7 @@ sequence with successive delays. Nice for doing trailing effects.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="event"></a><a href="#event" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>event()</code></h3>
|
||||
<pre><code class="hljs css javascript">Animated.event(argMapping, [config])
|
||||
<pre><code class="hljs css javascript">Animated.event(argMapping, [config]);
|
||||
</code></pre>
|
||||
<p>Takes an array of mappings and extracts values from each arg accordingly, then calls <code>setValue</code> on the mapped outputs. e.g.</p>
|
||||
<pre><code class="hljs css javascript">onScroll={Animated.event(
|
||||
@@ -404,7 +399,7 @@ onPanResponderMove: Animated.event([
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="createanimatedcomponent"></a><a href="#createanimatedcomponent" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>createAnimatedComponent()</code></h3>
|
||||
<pre><code class="hljs css javascript">createAnimatedComponent(component)
|
||||
<pre><code class="hljs css javascript">createAnimatedComponent(component);
|
||||
</code></pre>
|
||||
<p>Make any React component Animatable. Used to create <code>Animated.View</code>, etc.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -418,7 +413,7 @@ onPanResponderMove: Animated.event([
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="attachnativeevent"></a><a href="#attachnativeevent" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>attachNativeEvent()</code></h3>
|
||||
<pre><code class="hljs css javascript">attachNativeEvent(viewRef, eventName, argMapping)
|
||||
<pre><code class="hljs css javascript">attachNativeEvent(viewRef, eventName, argMapping);
|
||||
</code></pre>
|
||||
<p>Imperative API to attach an animated value to an event on a view. Prefer using <code>Animated.event</code> with <code>useNativeDrive: true</code> if possible.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -434,7 +429,7 @@ onPanResponderMove: Animated.event([
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="forkevent"></a><a href="#forkevent" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>forkEvent()</code></h3>
|
||||
<pre><code class="hljs css javascript">Animated.forkEvent(event, listener)
|
||||
<pre><code class="hljs css javascript">Animated.forkEvent(event, listener);
|
||||
</code></pre>
|
||||
<p>Advanced imperative API for snooping on animated events that are passed in through props. Use values directly where possible.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -449,7 +444,7 @@ onPanResponderMove: Animated.event([
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="unforkevent"></a><a href="#unforkevent" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>unforkEvent()</code></h3>
|
||||
<pre><code class="hljs css javascript">Animated.unforkEvent(event, listener)
|
||||
<pre><code class="hljs css javascript">Animated.unforkEvent(event, listener);
|
||||
</code></pre>
|
||||
<p>Advanced imperative API for snooping on animated events that are passed in through props. Use values directly where possible.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="setvalue"></a><a href="#setvalue" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>setValue()</code></h3>
|
||||
<pre><code class="hljs css javascript">setValue(value)
|
||||
<pre><code class="hljs css javascript">setValue(value);
|
||||
</code></pre>
|
||||
<p>Directly set the value. This will stop any animations running on the value and update all the bound properties.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -35,7 +35,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="setoffset"></a><a href="#setoffset" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>setOffset()</code></h3>
|
||||
<pre><code class="hljs css javascript">setOffset(offset)
|
||||
<pre><code class="hljs css javascript">setOffset(offset);
|
||||
</code></pre>
|
||||
<p>Sets an offset that is applied on top of whatever value is set, whether via <code>setValue</code>, an animation, or <code>Animated.event</code>. Useful for compensating things like the start of a pan gesture.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -49,19 +49,19 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="flattenoffset"></a><a href="#flattenoffset" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>flattenOffset()</code></h3>
|
||||
<pre><code class="hljs css javascript">flattenOffset()
|
||||
<pre><code class="hljs css javascript">flattenOffset();
|
||||
</code></pre>
|
||||
<p>Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="extractoffset"></a><a href="#extractoffset" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>extractOffset()</code></h3>
|
||||
<pre><code class="hljs css javascript">extractOffset()
|
||||
<pre><code class="hljs css javascript">extractOffset();
|
||||
</code></pre>
|
||||
<p>Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="addlistener"></a><a href="#addlistener" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>addListener()</code></h3>
|
||||
<pre><code class="hljs css javascript">addListener(callback)
|
||||
<pre><code class="hljs css javascript">addListener(callback);
|
||||
</code></pre>
|
||||
<p>Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.</p>
|
||||
<p>Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.</p>
|
||||
<p>Returns a string that serves as an identifier for the listener.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
@@ -74,7 +74,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="removelistener"></a><a href="#removelistener" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeListener()</code></h3>
|
||||
<pre><code class="hljs css javascript">removeListener(id)
|
||||
<pre><code class="hljs css javascript">removeListener(id);
|
||||
</code></pre>
|
||||
<p>Unregister a listener. The <code>id</code> param shall match the identifier previously returned by <code>addListener()</code>.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -88,12 +88,12 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="removealllisteners"></a><a href="#removealllisteners" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeAllListeners()</code></h3>
|
||||
<pre><code class="hljs css javascript">removeAllListeners()
|
||||
<pre><code class="hljs css javascript">removeAllListeners();
|
||||
</code></pre>
|
||||
<p>Remove all registered listeners.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="stopanimation"></a><a href="#stopanimation" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>stopAnimation()</code></h3>
|
||||
<pre><code class="hljs css javascript">stopAnimation([callback])
|
||||
<pre><code class="hljs css javascript">stopAnimation([callback]);
|
||||
</code></pre>
|
||||
<p>Stops any running animation or tracking. <code>callback</code> is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -107,7 +107,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="resetanimation"></a><a href="#resetanimation" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>resetAnimation()</code></h3>
|
||||
<pre><code class="hljs css javascript">resetAnimation([callback])
|
||||
<pre><code class="hljs css javascript">resetAnimation([callback]);
|
||||
</code></pre>
|
||||
<p>Stops any animation and resets the value to its original.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -121,7 +121,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="interpolate"></a><a href="#interpolate" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>interpolate()</code></h3>
|
||||
<pre><code class="hljs css javascript">interpolate(config)
|
||||
<pre><code class="hljs css javascript">interpolate(config);
|
||||
</code></pre>
|
||||
<p>Interpolates the value before updating the property, e.g. mapping 0-1 to 0-10.</p>
|
||||
<p>See <code>AnimatedInterpolation.js</code></p>
|
||||
@@ -145,7 +145,7 @@
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="animate"></a><a href="#animate" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>animate()</code></h3>
|
||||
<pre><code class="hljs css javascript">animate(animation, callback)
|
||||
<pre><code class="hljs css javascript">animate(animation, callback);
|
||||
</code></pre>
|
||||
<p>Typically only used internally, but could be used by a custom Animation class.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -160,12 +160,12 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="stoptracking"></a><a href="#stoptracking" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>stopTracking()</code></h3>
|
||||
<pre><code class="hljs css javascript">stopTracking()
|
||||
<pre><code class="hljs css javascript">stopTracking();
|
||||
</code></pre>
|
||||
<p>Typically only used internally.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="track"></a><a href="#track" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>track()</code></h3>
|
||||
<pre><code class="hljs css javascript">track(tracking)
|
||||
<pre><code class="hljs css javascript">track(tracking);
|
||||
</code></pre>
|
||||
<p>Typically only used internally.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
|
||||
@@ -9,13 +9,16 @@
|
||||
};
|
||||
<span class="hljs-keyword">this</span>.state.panResponder = PanResponder.create({
|
||||
<span class="hljs-attr">onStartShouldSetPanResponder</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> <span class="hljs-literal">true</span>,
|
||||
<span class="hljs-attr">onPanResponderMove</span>: Animated.event([<span class="hljs-literal">null</span>, {
|
||||
<span class="hljs-attr">dx</span>: <span class="hljs-keyword">this</span>.state.pan.x, <span class="hljs-comment">// x,y are Animated.Value</span>
|
||||
dy: <span class="hljs-keyword">this</span>.state.pan.y,
|
||||
}]),
|
||||
<span class="hljs-attr">onPanResponderMove</span>: Animated.event([
|
||||
<span class="hljs-literal">null</span>,
|
||||
{
|
||||
<span class="hljs-attr">dx</span>: <span class="hljs-keyword">this</span>.state.pan.x, <span class="hljs-comment">// x,y are Animated.Value</span>
|
||||
dy: <span class="hljs-keyword">this</span>.state.pan.y,
|
||||
},
|
||||
]),
|
||||
<span class="hljs-attr">onPanResponderRelease</span>: <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
Animated.spring(
|
||||
<span class="hljs-keyword">this</span>.state.pan, <span class="hljs-comment">// Auto-multiplexed</span>
|
||||
<span class="hljs-keyword">this</span>.state.pan, <span class="hljs-comment">// Auto-multiplexed</span>
|
||||
{<span class="hljs-attr">toValue</span>: {<span class="hljs-attr">x</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">0</span>}} <span class="hljs-comment">// Back to zero</span>
|
||||
).start();
|
||||
},
|
||||
@@ -50,7 +53,7 @@
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="setvalue"></a><a href="#setvalue" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>setValue()</code></h3>
|
||||
<pre><code class="hljs css javascript">setValue(value)
|
||||
<pre><code class="hljs css javascript">setValue(value);
|
||||
</code></pre>
|
||||
<p>Directly set the value. This will stop any animations running on the value and update all the bound properties.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -64,7 +67,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="setoffset"></a><a href="#setoffset" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>setOffset()</code></h3>
|
||||
<pre><code class="hljs css javascript">setOffset(offset)
|
||||
<pre><code class="hljs css javascript">setOffset(offset);
|
||||
</code></pre>
|
||||
<p>Sets an offset that is applied on top of whatever value is set, whether via <code>setValue</code>, an animation, or <code>Animated.event</code>. Useful for compensating things like the start of a pan gesture.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -78,19 +81,19 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="flattenoffset"></a><a href="#flattenoffset" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>flattenOffset()</code></h3>
|
||||
<pre><code class="hljs css javascript">flattenOffset()
|
||||
<pre><code class="hljs css javascript">flattenOffset();
|
||||
</code></pre>
|
||||
<p>Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="extractoffset"></a><a href="#extractoffset" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>extractOffset()</code></h3>
|
||||
<pre><code class="hljs css javascript">extractOffset()
|
||||
<pre><code class="hljs css javascript">extractOffset();
|
||||
</code></pre>
|
||||
<p>Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="addlistener"></a><a href="#addlistener" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>addListener()</code></h3>
|
||||
<pre><code class="hljs css javascript">addListener(callback)
|
||||
<pre><code class="hljs css javascript">addListener(callback);
|
||||
</code></pre>
|
||||
<p>Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.</p>
|
||||
<p>Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.</p>
|
||||
<p>Returns a string that serves as an identifier for the listener.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
@@ -103,7 +106,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="removelistener"></a><a href="#removelistener" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeListener()</code></h3>
|
||||
<pre><code class="hljs css javascript">removeListener(id)
|
||||
<pre><code class="hljs css javascript">removeListener(id);
|
||||
</code></pre>
|
||||
<p>Unregister a listener. The <code>id</code> param shall match the identifier previously returned by <code>addListener()</code>.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -117,12 +120,12 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="removealllisteners"></a><a href="#removealllisteners" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeAllListeners()</code></h3>
|
||||
<pre><code class="hljs css javascript">removeAllListeners()
|
||||
<pre><code class="hljs css javascript">removeAllListeners();
|
||||
</code></pre>
|
||||
<p>Remove all registered listeners.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="stopanimation"></a><a href="#stopanimation" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>stopAnimation()</code></h3>
|
||||
<pre><code class="hljs css javascript">stopAnimation([callback])
|
||||
<pre><code class="hljs css javascript">stopAnimation([callback]);
|
||||
</code></pre>
|
||||
<p>Stops any running animation or tracking. <code>callback</code> is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -136,7 +139,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="resetanimation"></a><a href="#resetanimation" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>resetAnimation()</code></h3>
|
||||
<pre><code class="hljs css javascript">resetAnimation([callback])
|
||||
<pre><code class="hljs css javascript">resetAnimation([callback]);
|
||||
</code></pre>
|
||||
<p>Stops any animation and resets the value to its original.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -150,14 +153,14 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getlayout"></a><a href="#getlayout" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getLayout()</code></h3>
|
||||
<pre><code class="hljs css javascript">getLayout()
|
||||
<pre><code class="hljs css javascript">getLayout();
|
||||
</code></pre>
|
||||
<p>Converts <code>{x, y}</code> into <code>{left, top}</code> for use in style, e.g.</p>
|
||||
<pre><code class="hljs css javascript">style={<span class="hljs-keyword">this</span>.state.anim.getLayout()}
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="gettranslatetransform"></a><a href="#gettranslatetransform" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getTranslateTransform()</code></h3>
|
||||
<pre><code class="hljs css javascript">getTranslateTransform()
|
||||
<pre><code class="hljs css javascript">getTranslateTransform();
|
||||
</code></pre>
|
||||
<p>Converts <code>{x, y}</code> into a useable translation transform, e.g.</p>
|
||||
<pre><code class="hljs css javascript">style={{
|
||||
|
||||
+70
-160
File diff suppressed because one or more lines are too long
+15
-15
@@ -29,7 +29,7 @@
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="registercomponent"></a><a href="#registercomponent" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>registerComponent()</code></h3>
|
||||
<pre><code class="hljs css javascript">AppRegistry.registerComponent(appKey, componentProvider, [section])
|
||||
<pre><code class="hljs css javascript">AppRegistry.registerComponent(appKey, componentProvider, [section]);
|
||||
</code></pre>
|
||||
<p>Registers an app's root component.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -45,7 +45,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="runapplication"></a><a href="#runapplication" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>runApplication()</code></h3>
|
||||
<pre><code class="hljs css javascript">AppRegistry.runApplication(appKey, appParameters)
|
||||
<pre><code class="hljs css javascript">AppRegistry.runApplication(appKey, appParameters);
|
||||
</code></pre>
|
||||
<p>Loads the JavaScript bundle and runs the app.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -60,7 +60,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="unmountapplicationcomponentatroottag"></a><a href="#unmountapplicationcomponentatroottag" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>unmountApplicationComponentAtRootTag()</code></h3>
|
||||
<pre><code class="hljs css javascript">AppRegistry.unmountApplicationComponentAtRootTag(rootTag)
|
||||
<pre><code class="hljs css javascript">AppRegistry.unmountApplicationComponentAtRootTag(rootTag);
|
||||
</code></pre>
|
||||
<p>Stops an application when a view should be destroyed. The <code>rootTag</code> should match the tag that was passed into <code>runApplication()</code>. These should always be used as a pair.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -74,7 +74,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="registerheadlesstask"></a><a href="#registerheadlesstask" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>registerHeadlessTask()</code></h3>
|
||||
<pre><code class="hljs css javascript">AppRegistry.registerHeadlessTask(taskKey, task)
|
||||
<pre><code class="hljs css javascript">AppRegistry.registerHeadlessTask(taskKey, task);
|
||||
</code></pre>
|
||||
<p>Register a headless task. A headless task is a bit of code that runs without a UI.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -89,7 +89,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="startheadlesstask"></a><a href="#startheadlesstask" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>startHeadlessTask()</code></h3>
|
||||
<pre><code class="hljs css javascript">AppRegistry.startHeadlessTask(taskId, taskKey, data)
|
||||
<pre><code class="hljs css javascript">AppRegistry.startHeadlessTask(taskId, taskKey, data);
|
||||
</code></pre>
|
||||
<p>Only called from native code. Starts a headless task.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -105,43 +105,43 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="setwrappercomponentprovider"></a><a href="#setwrappercomponentprovider" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>setWrapperComponentProvider()</code></h3>
|
||||
<pre><code class="hljs css javascript">AppRegistry.setWrapperComponentProvider(provider)
|
||||
<pre><code class="hljs css javascript">AppRegistry.setWrapperComponentProvider(provider);
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="registerconfig"></a><a href="#registerconfig" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>registerConfig()</code></h3>
|
||||
<pre><code class="hljs css javascript">AppRegistry.registerConfig(config)
|
||||
<pre><code class="hljs css javascript">AppRegistry.registerConfig(config);
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="registerrunnable"></a><a href="#registerrunnable" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>registerRunnable()</code></h3>
|
||||
<pre><code class="hljs css javascript">AppRegistry.registerRunnable(appKey, run)
|
||||
<pre><code class="hljs css javascript">AppRegistry.registerRunnable(appKey, run);
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="registersection"></a><a href="#registersection" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>registerSection()</code></h3>
|
||||
<pre><code class="hljs css javascript">AppRegistry.registerSection(appKey, component)
|
||||
<pre><code class="hljs css javascript">AppRegistry.registerSection(appKey, component);
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getappkeys"></a><a href="#getappkeys" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getAppKeys()</code></h3>
|
||||
<pre><code class="hljs css javascript">AppRegistry.getAppKeys()
|
||||
<pre><code class="hljs css javascript">AppRegistry.getAppKeys();
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getsectionkeys"></a><a href="#getsectionkeys" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getSectionKeys()</code></h3>
|
||||
<pre><code class="hljs css javascript">AppRegistry.getSectionKeys()
|
||||
<pre><code class="hljs css javascript">AppRegistry.getSectionKeys();
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getsections"></a><a href="#getsections" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getSections()</code></h3>
|
||||
<pre><code class="hljs css javascript">AppRegistry.getSections()
|
||||
<pre><code class="hljs css javascript">AppRegistry.getSections();
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getrunnable"></a><a href="#getrunnable" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getRunnable()</code></h3>
|
||||
<pre><code class="hljs css javascript">AppRegistry.getRunnable(appKey)
|
||||
<pre><code class="hljs css javascript">AppRegistry.getRunnable(appKey);
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getregistry"></a><a href="#getregistry" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getRegistry()</code></h3>
|
||||
<pre><code class="hljs css javascript">AppRegistry.getRegistry()
|
||||
<pre><code class="hljs css javascript">AppRegistry.getRegistry();
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="setcomponentproviderinstrumentationhook"></a><a href="#setcomponentproviderinstrumentationhook" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>setComponentProviderInstrumentationHook()</code></h3>
|
||||
<pre><code class="hljs css javascript">AppRegistry.setComponentProviderInstrumentationHook(hook)
|
||||
<pre><code class="hljs css javascript">AppRegistry.setComponentProviderInstrumentationHook(hook);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
||||
+15
-17
@@ -3,21 +3,19 @@
|
||||
<h3><a class="anchor" aria-hidden="true" name="app-states"></a><a href="#app-states" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>App States</h3>
|
||||
<ul>
|
||||
<li><code>active</code> - The app is running in the foreground</li>
|
||||
<li><code>background</code> - The app is running in the background. The user is either
|
||||
in another app or on the home screen</li>
|
||||
<li><code>background</code> - The app is running in the background. The user is either in another app or on the home screen</li>
|
||||
<li><code>inactive</code> - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the Multitasking view or in the event of an incoming call</li>
|
||||
</ul>
|
||||
<p>For more information, see <a href="https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html">Apple's documentation</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="basic-usage"></a><a href="#basic-usage" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Basic Usage</h3>
|
||||
<p>To see the current state, you can check <code>AppState.currentState</code>, which will be kept up-to-date. However, <code>currentState</code> will be null at launch while <code>AppState</code> retrieves it over the bridge.</p>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, {Component} <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>
|
||||
<span class="hljs-keyword">import</span> {AppState, Text} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, {Component} <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> {AppState, Text} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AppStateExample</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
|
||||
state = {
|
||||
<span class="hljs-attr">appState</span>: AppState.currentState
|
||||
}
|
||||
<span class="hljs-attr">appState</span>: AppState.currentState,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
AppState.addEventListener(<span class="hljs-string">'change'</span>, <span class="hljs-keyword">this</span>._handleAppStateChange);
|
||||
@@ -27,19 +25,19 @@ in another app or on the home screen</li>
|
||||
AppState.removeEventListener(<span class="hljs-string">'change'</span>, <span class="hljs-keyword">this</span>._handleAppStateChange);
|
||||
}
|
||||
|
||||
_handleAppStateChange = <span class="hljs-function">(<span class="hljs-params">nextAppState</span>) =></span> {
|
||||
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.state.appState.match(<span class="hljs-regexp">/inactive|background/</span>) && nextAppState === <span class="hljs-string">'active'</span>) {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'App has come to the foreground!'</span>)
|
||||
_handleAppStateChange = <span class="hljs-function"><span class="hljs-params">nextAppState</span> =></span> {
|
||||
<span class="hljs-keyword">if</span> (
|
||||
<span class="hljs-keyword">this</span>.state.appState.match(<span class="hljs-regexp">/inactive|background/</span>) &&
|
||||
nextAppState === <span class="hljs-string">'active'</span>
|
||||
) {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'App has come to the foreground!'</span>);
|
||||
}
|
||||
<span class="hljs-keyword">this</span>.setState({<span class="hljs-attr">appState</span>: nextAppState});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Current state is: {this.state.appState}<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>
|
||||
);
|
||||
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Current state is: {this.state.appState}<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>;
|
||||
}
|
||||
|
||||
}
|
||||
</code></pre>
|
||||
<p>This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the <code>active</code> state, and the null state will happen only momentarily.</p>
|
||||
@@ -52,7 +50,7 @@ in another app or on the home screen</li>
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css javascript">addEventListener(type, handler)
|
||||
<pre><code class="hljs css javascript">addEventListener(type, handler);
|
||||
</code></pre>
|
||||
<p>Add a handler to AppState changes by listening to the <code>change</code> event type and providing the handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -67,7 +65,7 @@ in another app or on the home screen</li>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 javascript">removeEventListener(type, handler)
|
||||
<pre><code class="hljs css javascript">removeEventListener(type, handler);
|
||||
</code></pre>
|
||||
<p>Remove a handler by passing the <code>change</code> event type and the handler.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
|
||||
+50
-54
@@ -1,4 +1,4 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>AsyncStorage · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="AsyncStorage · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="`AsyncStorage` is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/asyncstorage.md" target="_blank">Edit</a><h1>AsyncStorage</h1></header><article><div><span><p><code>AsyncStorage</code> is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.</p>
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>AsyncStorage · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="AsyncStorage · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="`AsyncStorage` is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/asyncstorage.md" target="_blank">Edit</a><h1>AsyncStorage</h1></header><article><div><span><p><code>AsyncStorage</code> is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.</p>
|
||||
<p>It is recommended that you use an abstraction on top of <code>AsyncStorage</code> instead of <code>AsyncStorage</code> directly for anything more than light usage since it operates globally.</p>
|
||||
<p>On iOS, <code>AsyncStorage</code> is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, <code>AsyncStorage</code> will use either <a href="http://rocksdb.org/">RocksDB</a> or SQLite based on what is available.</p>
|
||||
<p>The <code>AsyncStorage</code> JavaScript code is a simple facade that provides a clear JavaScript API, real <code>Error</code> objects, and simple non-multi functions. Each method in the API returns a <code>Promise</code> object.</p>
|
||||
@@ -29,7 +29,7 @@
|
||||
<span class="hljs-comment">// You only need to define what will be added or updated</span>
|
||||
<span class="hljs-keyword">let</span> UID123_delta = {
|
||||
<span class="hljs-attr">age</span>: <span class="hljs-number">31</span>,
|
||||
<span class="hljs-attr">traits</span>: {<span class="hljs-attr">eyes</span>: <span class="hljs-string">'blue'</span>, <span class="hljs-attr">shoe_size</span>: <span class="hljs-number">10</span>}
|
||||
<span class="hljs-attr">traits</span>: {<span class="hljs-attr">eyes</span>: <span class="hljs-string">'blue'</span>, <span class="hljs-attr">shoe_size</span>: <span class="hljs-number">10</span>},
|
||||
};
|
||||
|
||||
AsyncStorage.setItem(<span class="hljs-string">'UID123'</span>, <span class="hljs-built_in">JSON</span>.stringify(UID123_object), () => {
|
||||
@@ -45,40 +45,45 @@ AsyncStorage.setItem(<span class="hljs-string">'UID123'</span>, <span class="hlj
|
||||
<span class="hljs-comment">// {'shoe_size':10,'hair':'brown','eyes':'blue'}}</span>
|
||||
</code></pre>
|
||||
<p>Multi merge example:</p>
|
||||
<pre><code class="hljs css javascript">
|
||||
<span class="hljs-comment">// first user, initial values</span>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-comment">// first user, initial values</span>
|
||||
<span class="hljs-keyword">let</span> UID234_object = {
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'Chris'</span>,
|
||||
<span class="hljs-attr">age</span>: <span class="hljs-number">30</span>,
|
||||
<span class="hljs-attr">traits</span>: {<span class="hljs-attr">hair</span>: <span class="hljs-string">'brown'</span>, <span class="hljs-attr">eyes</span>: <span class="hljs-string">'brown'</span>},
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'Chris'</span>,
|
||||
<span class="hljs-attr">age</span>: <span class="hljs-number">30</span>,
|
||||
<span class="hljs-attr">traits</span>: {<span class="hljs-attr">hair</span>: <span class="hljs-string">'brown'</span>, <span class="hljs-attr">eyes</span>: <span class="hljs-string">'brown'</span>},
|
||||
};
|
||||
|
||||
<span class="hljs-comment">// first user, delta values</span>
|
||||
<span class="hljs-keyword">let</span> UID234_delta = {
|
||||
<span class="hljs-attr">age</span>: <span class="hljs-number">31</span>,
|
||||
<span class="hljs-attr">traits</span>: {<span class="hljs-attr">eyes</span>: <span class="hljs-string">'blue'</span>, <span class="hljs-attr">shoe_size</span>: <span class="hljs-number">10</span>},
|
||||
<span class="hljs-attr">age</span>: <span class="hljs-number">31</span>,
|
||||
<span class="hljs-attr">traits</span>: {<span class="hljs-attr">eyes</span>: <span class="hljs-string">'blue'</span>, <span class="hljs-attr">shoe_size</span>: <span class="hljs-number">10</span>},
|
||||
};
|
||||
|
||||
<span class="hljs-comment">// second user, initial values</span>
|
||||
<span class="hljs-keyword">let</span> UID345_object = {
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'Marge'</span>,
|
||||
<span class="hljs-attr">age</span>: <span class="hljs-number">25</span>,
|
||||
<span class="hljs-attr">traits</span>: {<span class="hljs-attr">hair</span>: <span class="hljs-string">'blonde'</span>, <span class="hljs-attr">eyes</span>: <span class="hljs-string">'blue'</span>},
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'Marge'</span>,
|
||||
<span class="hljs-attr">age</span>: <span class="hljs-number">25</span>,
|
||||
<span class="hljs-attr">traits</span>: {<span class="hljs-attr">hair</span>: <span class="hljs-string">'blonde'</span>, <span class="hljs-attr">eyes</span>: <span class="hljs-string">'blue'</span>},
|
||||
};
|
||||
|
||||
<span class="hljs-comment">// second user, delta values</span>
|
||||
<span class="hljs-keyword">let</span> UID345_delta = {
|
||||
<span class="hljs-attr">age</span>: <span class="hljs-number">26</span>,
|
||||
<span class="hljs-attr">traits</span>: {<span class="hljs-attr">eyes</span>: <span class="hljs-string">'green'</span>, <span class="hljs-attr">shoe_size</span>: <span class="hljs-number">6</span>},
|
||||
<span class="hljs-attr">age</span>: <span class="hljs-number">26</span>,
|
||||
<span class="hljs-attr">traits</span>: {<span class="hljs-attr">eyes</span>: <span class="hljs-string">'green'</span>, <span class="hljs-attr">shoe_size</span>: <span class="hljs-number">6</span>},
|
||||
};
|
||||
|
||||
<span class="hljs-keyword">let</span> multi_set_pairs = [[<span class="hljs-string">'UID234'</span>, <span class="hljs-built_in">JSON</span>.stringify(UID234_object)], [<span class="hljs-string">'UID345'</span>, <span class="hljs-built_in">JSON</span>.stringify(UID345_object)]]
|
||||
<span class="hljs-keyword">let</span> multi_merge_pairs = [[<span class="hljs-string">'UID234'</span>, <span class="hljs-built_in">JSON</span>.stringify(UID234_delta)], [<span class="hljs-string">'UID345'</span>, <span class="hljs-built_in">JSON</span>.stringify(UID345_delta)]]
|
||||
<span class="hljs-keyword">let</span> multi_set_pairs = [
|
||||
[<span class="hljs-string">'UID234'</span>, <span class="hljs-built_in">JSON</span>.stringify(UID234_object)],
|
||||
[<span class="hljs-string">'UID345'</span>, <span class="hljs-built_in">JSON</span>.stringify(UID345_object)],
|
||||
];
|
||||
<span class="hljs-keyword">let</span> multi_merge_pairs = [
|
||||
[<span class="hljs-string">'UID234'</span>, <span class="hljs-built_in">JSON</span>.stringify(UID234_delta)],
|
||||
[<span class="hljs-string">'UID345'</span>, <span class="hljs-built_in">JSON</span>.stringify(UID345_delta)],
|
||||
];
|
||||
|
||||
AsyncStorage.multiSet(multi_set_pairs, (err) => {
|
||||
AsyncStorage.multiMerge(multi_merge_pairs, (err) => {
|
||||
AsyncStorage.multiGet([<span class="hljs-string">'UID234'</span>,<span class="hljs-string">'UID345'</span>], (err, stores) => {
|
||||
stores.map( <span class="hljs-function">(<span class="hljs-params">result, i, store</span>) =></span> {
|
||||
AsyncStorage.multiSet(multi_set_pairs, err => {
|
||||
AsyncStorage.multiMerge(multi_merge_pairs, err => {
|
||||
AsyncStorage.multiGet([<span class="hljs-string">'UID234'</span>, <span class="hljs-string">'UID345'</span>], (err, stores) => {
|
||||
stores.map(<span class="hljs-function">(<span class="hljs-params">result, i, store</span>) =></span> {
|
||||
<span class="hljs-keyword">let</span> key = store[i][<span class="hljs-number">0</span>];
|
||||
<span class="hljs-keyword">let</span> val = store[i][<span class="hljs-number">1</span>];
|
||||
<span class="hljs-built_in">console</span>.log(key, val);
|
||||
@@ -94,18 +99,17 @@ AsyncStorage.multiSet(multi_set_pairs, (err) => {
|
||||
<p>Fetching multiple items:</p>
|
||||
<pre><code class="hljs css javascript">AsyncStorage.getAllKeys(<span class="hljs-function">(<span class="hljs-params">err, keys</span>) =></span> {
|
||||
AsyncStorage.multiGet(keys, (err, stores) => {
|
||||
stores.map(<span class="hljs-function">(<span class="hljs-params">result, i, store</span>) =></span> {
|
||||
<span class="hljs-comment">// get at each store's key/value so you can work with it</span>
|
||||
<span class="hljs-keyword">let</span> key = store[i][<span class="hljs-number">0</span>];
|
||||
<span class="hljs-keyword">let</span> value = store[i][<span class="hljs-number">1</span>];
|
||||
stores.map(<span class="hljs-function">(<span class="hljs-params">result, i, store</span>) =></span> {
|
||||
<span class="hljs-comment">// get at each store's key/value so you can work with it</span>
|
||||
<span class="hljs-keyword">let</span> key = store[i][<span class="hljs-number">0</span>];
|
||||
<span class="hljs-keyword">let</span> value = store[i][<span class="hljs-number">1</span>];
|
||||
});
|
||||
});
|
||||
});
|
||||
</code></pre>
|
||||
<p>Removing multiple items:</p>
|
||||
<pre><code class="hljs css javascript">
|
||||
<span class="hljs-keyword">let</span> keys = [<span class="hljs-string">'k1'</span>, <span class="hljs-string">'k2'</span>];
|
||||
AsyncStorage.multiRemove(keys, (err) => {
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">let</span> keys = [<span class="hljs-string">'k1'</span>, <span class="hljs-string">'k2'</span>];
|
||||
AsyncStorage.multiRemove(keys, err => {
|
||||
<span class="hljs-comment">// keys k1 & k2 removed, if they existed</span>
|
||||
<span class="hljs-comment">// do most stuff after removal (if you want)</span>
|
||||
});
|
||||
@@ -132,10 +136,9 @@ AsyncStorage.multiRemove(keys, (err) => {
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getitem"></a><a href="#getitem" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getItem()</code></h3>
|
||||
<pre><code class="hljs css javascript">AsyncStorage.getItem(key, [callback])
|
||||
<pre><code class="hljs css javascript">AsyncStorage.getItem(key, [callback]);
|
||||
</code></pre>
|
||||
<p>Fetches an item for a <code>key</code> and invokes a callback upon completion.
|
||||
Returns a <code>Promise</code> object.</p>
|
||||
<p>Fetches an item for a <code>key</code> and invokes a callback upon completion. Returns a <code>Promise</code> object.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -148,7 +151,7 @@ Returns a <code>Promise</code> object.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="setitem"></a><a href="#setitem" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>setItem()</code></h3>
|
||||
<pre><code class="hljs css javascript">AsyncStorage.setItem(key, value, [callback])
|
||||
<pre><code class="hljs css javascript">AsyncStorage.setItem(key, value, [callback]);
|
||||
</code></pre>
|
||||
<p>Sets the value for a <code>key</code> and invokes a callback upon completion.</p>
|
||||
<p>Returns a <code>Promise</code> object.</p>
|
||||
@@ -165,10 +168,9 @@ Returns a <code>Promise</code> object.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="removeitem"></a><a href="#removeitem" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeItem()</code></h3>
|
||||
<pre><code class="hljs css javascript">AsyncStorage.removeItem(key, [callback])
|
||||
<pre><code class="hljs css javascript">AsyncStorage.removeItem(key, [callback]);
|
||||
</code></pre>
|
||||
<p>Removes an item for a <code>key</code> and invokes a callback upon completion.
|
||||
Returns a <code>Promise</code> object.</p>
|
||||
<p>Removes an item for a <code>key</code> and invokes a callback upon completion. Returns a <code>Promise</code> object.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -181,12 +183,11 @@ Returns a <code>Promise</code> object.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="mergeitem"></a><a href="#mergeitem" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>mergeItem()</code></h3>
|
||||
<pre><code class="hljs css javascript">AsyncStorage.mergeItem(key, value, [callback])
|
||||
<pre><code class="hljs css javascript">AsyncStorage.mergeItem(key, value, [callback]);
|
||||
</code></pre>
|
||||
<p>Merges an existing <code>key</code> value with an input value, assuming both values are stringified JSON. Returns a <code>Promise</code> object.</p>
|
||||
<blockquote>
|
||||
<p>Note:
|
||||
This is not supported by all native implementations.</p>
|
||||
<p>Note: This is not supported by all native implementations.</p>
|
||||
</blockquote>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
@@ -201,9 +202,9 @@ This is not supported by all native implementations.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="clear"></a><a href="#clear" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>clear()</code></h3>
|
||||
<pre><code class="hljs css javascript">AsyncStorage.clear([callback])
|
||||
<pre><code class="hljs css javascript">AsyncStorage.clear([callback]);
|
||||
</code></pre>
|
||||
<p>Erases <em>all</em> <code>AsyncStorage</code> for all clients, libraries, etc. You probably don't want to call this; use <code>removeItem</code> or <code>multiRemove</code> to clear only your app's keys. Returns a <code>Promise</code> object.</p>
|
||||
<p>Erases <em>all</em> <code>AsyncStorage</code> for all clients, libraries, etc. You probably don't want to call this; use <code>removeItem</code> or <code>multiRemove</code> to clear only your app's keys. Returns a <code>Promise</code> object.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -215,10 +216,9 @@ This is not supported by all native implementations.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getallkeys"></a><a href="#getallkeys" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getAllKeys()</code></h3>
|
||||
<pre><code class="hljs css javascript">AsyncStorage.getAllKeys([callback])
|
||||
<pre><code class="hljs css javascript">AsyncStorage.getAllKeys([callback]);
|
||||
</code></pre>
|
||||
<p>Gets <em>all</em> keys known to your app; for all callers, libraries, etc.
|
||||
Returns a <code>Promise</code> object.</p>
|
||||
<p>Gets <em>all</em> keys known to your app; for all callers, libraries, etc. Returns a <code>Promise</code> object.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -230,12 +230,12 @@ Returns a <code>Promise</code> object.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="flushgetrequests"></a><a href="#flushgetrequests" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>flushGetRequests()</code></h3>
|
||||
<pre><code class="hljs css javascript">AsyncStorage.flushGetRequests()
|
||||
<pre><code class="hljs css javascript">AsyncStorage.flushGetRequests();
|
||||
</code></pre>
|
||||
<p>Flushes any pending requests using a single batch call to get the data.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="multiget"></a><a href="#multiget" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>multiGet()</code></h3>
|
||||
<pre><code class="hljs css javascript">AsyncStorage.multiGet(keys, [callback])
|
||||
<pre><code class="hljs css javascript">AsyncStorage.multiGet(keys, [callback]);
|
||||
</code></pre>
|
||||
<p>This allows you to batch the fetching of items given an array of <code>key</code> inputs. Your callback will be invoked with an array of corresponding key-value pairs found:</p>
|
||||
<pre><code class="hljs">multiGet([<span class="hljs-string">'k1'</span>, <span class="hljs-string">'k2'</span>], cb) -> cb([[<span class="hljs-string">'k1'</span>, <span class="hljs-string">'val1'</span>], [<span class="hljs-string">'k2'</span>, <span class="hljs-string">'val2'</span>]])
|
||||
@@ -253,10 +253,9 @@ Returns a <code>Promise</code> object.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="multiset"></a><a href="#multiset" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>multiSet()</code></h3>
|
||||
<pre><code class="hljs css javascript">AsyncStorage.multiSet(keyValuePairs, [callback])
|
||||
<pre><code class="hljs css javascript">AsyncStorage.multiSet(keyValuePairs, [callback]);
|
||||
</code></pre>
|
||||
<p>Use this as a batch operation for storing multiple key-value pairs. When
|
||||
the operation completes you'll get a single callback with any errors:</p>
|
||||
<p>Use this as a batch operation for storing multiple key-value pairs. When the operation completes you'll get a single callback with any errors:</p>
|
||||
<pre><code class="hljs">multiSet([[<span class="hljs-string">'k1'</span>, <span class="hljs-string">'val1'</span>], [<span class="hljs-string">'k2'</span>, <span class="hljs-string">'val2'</span>]], cb);
|
||||
</code></pre>
|
||||
<p>The method returns a <code>Promise</code> object.</p>
|
||||
@@ -272,10 +271,9 @@ the operation completes you'll get a single callback with any errors:</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="multiremove"></a><a href="#multiremove" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>multiRemove()</code></h3>
|
||||
<pre><code class="hljs css javascript">AsyncStorage.multiRemove(keys, [callback])
|
||||
<pre><code class="hljs css javascript">AsyncStorage.multiRemove(keys, [callback]);
|
||||
</code></pre>
|
||||
<p>Call this to batch the deletion of all keys in the <code>keys</code> array. Returns
|
||||
a <code>Promise</code> object.</p>
|
||||
<p>Call this to batch the deletion of all keys in the <code>keys</code> array. Returns a <code>Promise</code> object.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -288,11 +286,9 @@ a <code>Promise</code> object.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="multimerge"></a><a href="#multimerge" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>multiMerge()</code></h3>
|
||||
<pre><code class="hljs css javascript">AsyncStorage.multiMerge(keyValuePairs, [callback])
|
||||
<pre><code class="hljs css javascript">AsyncStorage.multiMerge(keyValuePairs, [callback]);
|
||||
</code></pre>
|
||||
<p>Batch operation to merge in existing and new values for a given set of
|
||||
keys. This assumes that the values are stringified JSON. Returns a
|
||||
<code>Promise</code> object.</p>
|
||||
<p>Batch operation to merge in existing and new values for a given set of keys. This assumes that the values are stringified JSON. Returns a <code>Promise</code> object.</p>
|
||||
<p><strong>NOTE</strong>: This is not supported by all native implementations.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
|
||||
@@ -9,15 +9,15 @@
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="exitapp"></a><a href="#exitapp" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>exitApp()</code></h3>
|
||||
<pre><code class="hljs css javascript">BackAndroid.exitApp()
|
||||
<pre><code class="hljs css javascript">BackAndroid.exitApp();
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css javascript">BackAndroid.addEventListener(eventName, handler)
|
||||
<pre><code class="hljs css javascript">BackAndroid.addEventListener(eventName, handler);
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 javascript">BackAndroid.removeEventListener(eventName, handler)
|
||||
<pre><code class="hljs css javascript">BackAndroid.removeEventListener(eventName, handler);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
||||
+10
-10
@@ -5,14 +5,14 @@
|
||||
<p>The event subscriptions are called in reverse order (i.e. last registered subscription first), and if one subscription returns true then subscriptions registered earlier will not be called.</p>
|
||||
<p>Example:</p>
|
||||
<pre><code class="hljs css javascript">BackHandler.addEventListener(<span class="hljs-string">'hardwareBackPress'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-comment">// this.onMainScreen and this.goBack are just examples, you need to use your own implementation here</span>
|
||||
<span class="hljs-comment">// Typically you would use the navigator here to go to the last state.</span>
|
||||
<span class="hljs-comment">// this.onMainScreen and this.goBack are just examples, you need to use your own implementation here</span>
|
||||
<span class="hljs-comment">// Typically you would use the navigator here to go to the last state.</span>
|
||||
|
||||
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.onMainScreen()) {
|
||||
<span class="hljs-keyword">this</span>.goBack();
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
|
||||
}
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
|
||||
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.onMainScreen()) {
|
||||
<span class="hljs-keyword">this</span>.goBack();
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
|
||||
}
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
|
||||
});
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
@@ -25,15 +25,15 @@
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="exitapp"></a><a href="#exitapp" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>exitApp()</code></h3>
|
||||
<pre><code class="hljs css javascript">BackHandler.exitApp()
|
||||
<pre><code class="hljs css javascript">BackHandler.exitApp();
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css javascript">BackHandler.addEventListener(eventName, handler)
|
||||
<pre><code class="hljs css javascript">BackHandler.addEventListener(eventName, handler);
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 javascript">BackHandler.removeEventListener(eventName, handler)
|
||||
<pre><code class="hljs css javascript">BackHandler.removeEventListener(eventName, handler);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
||||
@@ -10,22 +10,22 @@
|
||||
<ul>
|
||||
<li><p><em>Native layer</em>: React Native Xcode projects all now have Apple TV build targets, with names ending in the string '-tvOS'.</p></li>
|
||||
<li><p><em>react-native init</em>: New React Native projects created with <code>react-native init</code> will have Apple TV target automatically created in their XCode projects.</p></li>
|
||||
<li><p><em>JavaScript layer</em>: Support for Apple TV has been added to <code>Platform.ios.js</code>. You can check whether code is running on AppleTV by doing</p></li>
|
||||
<li><p><em>JavaScript layer</em>: Support for Apple TV has been added to <code>Platform.ios.js</code>. You can check whether code is running on AppleTV by doing</p></li>
|
||||
</ul>
|
||||
<pre><code class="hljs css js"><span class="hljs-keyword">var</span> Platform = <span class="hljs-built_in">require</span>(<span class="hljs-string">'Platform'</span>);
|
||||
<span class="hljs-keyword">var</span> running_on_apple_tv = Platform.isTVOS;
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" name="code-changes"></a><a href="#code-changes" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 changes</h2>
|
||||
<ul>
|
||||
<li><p><em>General support for tvOS</em>: Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard.</p></li>
|
||||
<li><p><em>Common codebase</em>: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS.</p></li>
|
||||
<li><p><em>Access to touchable controls</em>: When running on Apple TV, the native view class is <code>RCTTVView</code>, which has additional methods to make use of the tvOS focus engine. The <code>Touchable</code> mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so <code>TouchableHighlight</code> and <code>TouchableOpacity</code> will "just work". In particular:</p>
|
||||
<li><p><em>General support for tvOS</em>: Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard.</p></li>
|
||||
<li><p><em>Common codebase</em>: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS.</p></li>
|
||||
<li><p><em>Access to touchable controls</em>: When running on Apple TV, the native view class is <code>RCTTVView</code>, which has additional methods to make use of the tvOS focus engine. The <code>Touchable</code> mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so <code>TouchableHighlight</code> and <code>TouchableOpacity</code> will "just work". In particular:</p>
|
||||
<ul>
|
||||
<li><code>touchableHandleActivePressIn</code> will be executed when the touchable view goes into focus</li>
|
||||
<li><code>touchableHandleActivePressOut</code> will be executed when the touchable view goes out of focus</li>
|
||||
<li><code>touchableHandlePress</code> will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.</li>
|
||||
</ul></li>
|
||||
<li><p><em>TV remote/keyboard input</em>: A new native class, <code>RCTTVRemoteHandler</code>, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by <code>RCTTVNavigationEventEmitter</code> (a subclass of <code>RCTEventEmitter</code>), that fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</p></li>
|
||||
<li><p><em>TV remote/keyboard input</em>: A new native class, <code>RCTTVRemoteHandler</code>, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by <code>RCTTVNavigationEventEmitter</code> (a subclass of <code>RCTEventEmitter</code>), that fires a JS event. This event will be picked up by instances of the <code>TVEventHandler</code> JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of <code>TVEventHandler</code> and listen for these events, as in the following code:</p></li>
|
||||
</ul>
|
||||
<pre><code class="hljs css js"><span class="hljs-keyword">var</span> TVEventHandler = <span class="hljs-built_in">require</span>(<span class="hljs-string">'TVEventHandler'</span>);
|
||||
|
||||
@@ -67,16 +67,15 @@ class Game2048 extends React.Component {
|
||||
componentWillUnmount() {
|
||||
<span class="hljs-keyword">this</span>._disableTVEventHandler();
|
||||
}
|
||||
|
||||
</code></pre>
|
||||
<ul>
|
||||
<li><p><em>Dev Menu support</em>: On the simulator, cmd-D will bring up the developer menu, just like on iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )</p></li>
|
||||
<li><p><em>TV remote animations</em>: <code>RCTTVView</code> native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties.</p></li>
|
||||
<li><p><em>Dev Menu support</em>: On the simulator, cmd-D will bring up the developer menu, just like on iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )</p></li>
|
||||
<li><p><em>TV remote animations</em>: <code>RCTTVView</code> native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties.</p></li>
|
||||
<li><p><em>Back navigation with the TV remote menu button</em>: The <code>BackHandler</code> component, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button on the TV remote.</p></li>
|
||||
<li><p><em>TabBarIOS behavior</em>: The <code>TabBarIOS</code> component wraps the native <code>UITabBar</code> API, which works differently on Apple TV. To avoid jittery rerendering of the tab bar in tvOS (see <a href="https://github.com/facebook/react-native/issues/15081">this issue</a>), the selected tab bar item can only be set from Javascript on initial render, and is controlled after that by the user through native code.</p></li>
|
||||
<li><p><em>TabBarIOS behavior</em>: The <code>TabBarIOS</code> component wraps the native <code>UITabBar</code> API, which works differently on Apple TV. To avoid jittery rerendering of the tab bar in tvOS (see <a href="https://github.com/facebook/react-native/issues/15081">this issue</a>), the selected tab bar item can only be set from Javascript on initial render, and is controlled after that by the user through native code.</p></li>
|
||||
<li><p><em>Known issues</em>:</p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/facebook/react-native/issues/12793">ListView scrolling</a>. The issue can be easily worked around by setting <code>removeClippedSubviews</code> to false in ListView and similar components. For more discussion of this issue, see <a href="https://github.com/facebook/react-native/pull/12944">this PR</a>.</li>
|
||||
<li><a href="https://github.com/facebook/react-native/issues/12793">ListView scrolling</a>. The issue can be easily worked around by setting <code>removeClippedSubviews</code> to false in ListView and similar components. For more discussion of this issue, see <a href="https://github.com/facebook/react-native/pull/12944">this PR</a>.</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="communication-ios.html">← Communication between native and React Native</a><a class="docs-next button" href="app-extensions.html">App Extensions →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
|
||||
@@ -1,13 +1,6 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Button · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Button · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="A basic button component that should render nicely on any platform. Supports a"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/button.md" target="_blank">Edit</a><h1>Button</h1></header><article><div><span><p>A basic button component that should render nicely on any platform. Supports a
|
||||
minimal level of customization.</p>
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Button · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Button · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="A basic button component that should render nicely on any platform. Supports a minimal level of customization."/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/button.md" target="_blank">Edit</a><h1>Button</h1></header><article><div><span><p>A basic button component that should render nicely on any platform. Supports a minimal level of customization.</p>
|
||||
<p><center><img src="/react-native/docs/assets/buttonExample.png"></img></center></p>
|
||||
<p>If this button doesn't look right for your app, you can build your own button
|
||||
using <a href="/react-native/docs/0.10/touchableopacity.html">TouchableOpacity</a> or
|
||||
<a href="/react-native/docs/0.10/touchablenativefeedback.html">TouchableNativeFeedback</a>. For inspiration, look at
|
||||
the
|
||||
<a href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js">source code for this button component</a>.
|
||||
Or, take a look at the
|
||||
<a href="https://js.coach/react-native?search=button">wide variety of button components built by the community</a>.</p>
|
||||
<p>If this button doesn't look right for your app, you can build your own button using <a href="/react-native/docs/0.10/touchableopacity.html">TouchableOpacity</a> or <a href="/react-native/docs/0.10/touchablenativefeedback.html">TouchableNativeFeedback</a>. For inspiration, look at the <a href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js">source code for this button component</a>. Or, take a look at the <a href="https://js.coach/react-native?search=button">wide variety of button components built by the community</a>.</p>
|
||||
<p>Example usage:</p>
|
||||
<pre><code class="hljs">import { <span class="hljs-keyword">Button</span> } from <span class="hljs-string">'react-native'</span><span class="hljs-comment">;</span>
|
||||
...
|
||||
|
||||
@@ -17,27 +17,20 @@
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> saveImageWithTag(tag, successCallback, errorCallback)
|
||||
</code></pre>
|
||||
<p>Saves the image to the camera roll / gallery.</p>
|
||||
<p>@param {string} tag On Android, this is a local URI, such
|
||||
as <code>"file:///sdcard/img.png"</code>.</p>
|
||||
<p>@param {string} tag On Android, this is a local URI, such as <code>"file:///sdcard/img.png"</code>.</p>
|
||||
<p>On iOS, the tag can be one of the following:</p>
|
||||
<ul>
|
||||
<li>local URI</li>
|
||||
<li>assets-library tag</li>
|
||||
<li>a tag not maching any of the above, which means the image data will
|
||||
be stored in memory (and consume memory as long as the process is alive)</li>
|
||||
<li>a tag not maching any of the above, which means the image data will be stored in memory (and consume memory as long as the process is alive)</li>
|
||||
</ul>
|
||||
<p>@param successCallback Invoked with the value of <code>tag</code> on success.
|
||||
@param errorCallback Invoked with error message on error.</p>
|
||||
<p>@param successCallback Invoked with the value of <code>tag</code> on success. @param errorCallback Invoked with error message on error.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getphotos"></a><a href="#getphotos" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getPhotos()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> getPhotos(params, callback, errorCallback)
|
||||
</code></pre>
|
||||
<p>Invokes <code>callback</code> with photo identifier objects from the local camera
|
||||
roll of the device matching shape defined by <code>getPhotosReturnChecker</code>.</p>
|
||||
<p>@param {object} params See <code>getPhotosParamChecker</code>.
|
||||
@param {function} callback Invoked with arg of shape defined by
|
||||
<code>getPhotosReturnChecker</code> on success.
|
||||
@param {function} errorCallback Invoked with error message on error.</p>
|
||||
<p>Invokes <code>callback</code> with photo identifier objects from the local camera roll of the device matching shape defined by <code>getPhotosReturnChecker</code>.</p>
|
||||
<p>@param {object} params See <code>getPhotosParamChecker</code>. @param {function} callback Invoked with arg of shape defined by <code>getPhotosReturnChecker</code> on success. @param {function} errorCallback Invoked with error message on error.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="actionsheetios.html">← ActionSheetIOS</a><a class="docs-next button" href="dimensions.html">Dimensions →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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),
|
||||
|
||||
+4
-10
@@ -1,10 +1,6 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>CheckBox · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="CheckBox · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Renders a boolean input (Android only)."/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/checkbox.md" target="_blank">Edit</a><h1>CheckBox</h1></header><article><div><span><p>Renders a boolean input (Android only).</p>
|
||||
<p>This is a controlled component that requires an <code>onValueChange</code> callback that
|
||||
updates the <code>value</code> prop in order for the component to reflect user actions.
|
||||
If the <code>value</code> prop is not updated, the component will continue to render
|
||||
the supplied <code>value</code> prop instead of the expected result of any user actions.</p>
|
||||
<p>@keyword checkbox
|
||||
@keyword toggle</p>
|
||||
<p>This is a controlled component that requires an <code>onValueChange</code> callback that updates the <code>value</code> prop in order for the component to reflect user actions. If the <code>value</code> prop is not updated, the component will continue to render the supplied <code>value</code> prop instead of the expected result of any user actions.</p>
|
||||
<p>@keyword checkbox @keyword toggle</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="props"></a><a href="#props" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.10/view.html#props">View props...</a></li>
|
||||
@@ -18,8 +14,7 @@ the supplied <code>value</code> prop instead of the expected result of any user
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="props"></a><a href="#props" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="disabled"></a><a href="#disabled" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>disabled</code></h3>
|
||||
<p>If true the user won't be able to toggle the checkbox.
|
||||
Default value is false.</p>
|
||||
<p>If true the user won't be able to toggle the checkbox. Default value is false.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -63,8 +58,7 @@ Default value is false.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="value"></a><a href="#value" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>value</code></h3>
|
||||
<p>The value of the checkbox. If true the checkbox will be turned on.
|
||||
Default value is false.</p>
|
||||
<p>The value of the checkbox. If true the checkbox will be turned on. Default value is false.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getstring"></a><a href="#getstring" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getString()</code></h3>
|
||||
<pre><code class="hljs css javascript">Clipboard.getString()
|
||||
<pre><code class="hljs css javascript">Clipboard.getString();
|
||||
</code></pre>
|
||||
<p>Get content of string type, this method returns a <code>Promise</code>, so you can use following code to get clipboard content</p>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">async</span> _getContent() {
|
||||
@@ -17,7 +17,7 @@
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="setstring"></a><a href="#setstring" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>setString()</code></h3>
|
||||
<pre><code class="hljs css javascript">Clipboard.setString(content)
|
||||
<pre><code class="hljs css javascript">Clipboard.setString(content);
|
||||
</code></pre>
|
||||
<p>Set content of string type. You can use following code to set clipboard content:</p>
|
||||
<pre><code class="hljs css javascript">_setContent() {
|
||||
|
||||
@@ -24,8 +24,7 @@
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<pre><code class="hljs">
|
||||
<span class="hljs-keyword">import</span> <span class="hljs-type">React</span> from <span class="hljs-symbol">'reac</span>t';
|
||||
<pre><code class="hljs"><span class="hljs-keyword">import</span> <span class="hljs-type">React</span> from <span class="hljs-symbol">'reac</span>t';
|
||||
<span class="hljs-keyword">import</span> {
|
||||
<span class="hljs-type">AppRegistry</span>,
|
||||
<span class="hljs-type">View</span>,
|
||||
@@ -51,7 +50,6 @@
|
||||
</code></pre>
|
||||
<p><code>ReactRootView</code> provides a read-write property <code>appProperties</code>. After <code>appProperties</code> is set, the React Native app is re-rendered with new properties. The update is only performed when the new updated properties differ from the previous ones.</p>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">Bundle </span>updatedProps = mReactRootView.getAppProperties()<span class="hljs-comment">;</span>
|
||||
|
||||
ArrayList<String> imageList = new ArrayList<String>(Arrays.asList(
|
||||
<span class="hljs-string">"http://foo.com/bar3.png"</span>,
|
||||
<span class="hljs-string">"http://foo.com/bar4.png"</span>
|
||||
@@ -63,8 +61,7 @@ mReactRootView.setAppProperties(updatedProps)<span class="hljs-comment">;</span>
|
||||
<p>It is fine to update properties anytime. However, updates have to be performed on the main thread. You use the getter on any thread.</p>
|
||||
<p>There is no way to update only a few properties at a time. We suggest that you build it into your own wrapper instead.</p>
|
||||
<blockquote>
|
||||
<p><strong><em>Note:</em></strong>
|
||||
Currently, JS functions <code>componentWillReceiveProps</code> and <code>componentWillUpdateProps</code> of the top level RN component will not be called after a prop update. However, you can access the new props in <code>componentWillMount</code> function.</p>
|
||||
<p><strong><em>Note:</em></strong> Currently, JS functions <code>componentWillReceiveProps</code> and <code>componentWillUpdateProps</code> of the top level RN component will not be called after a prop update. However, you can access the new props in <code>componentWillMount</code> function.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" name="passing-properties-from-react-native-to-native"></a><a href="#passing-properties-from-react-native-to-native" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Passing properties from React Native to native</h3>
|
||||
<p>The problem exposing properties of native components is covered in detail in <a href="/react-native/docs/0.10/native-components-android.html#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation">this article</a>. In short, properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with <code>@ReactProp</code>, then just use them in React Native as if the component was an ordinary React Native component.</p>
|
||||
@@ -85,8 +82,7 @@ Currently, JS functions <code>componentWillReceiveProps</code> and <code>compone
|
||||
<h3><a class="anchor" aria-hidden="true" name="calling-native-functions-from-react-native-native-modules"></a><a href="#calling-native-functions-from-react-native-native-modules" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Calling native functions from React Native (native modules)</h3>
|
||||
<p>Native modules are Java classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in <a href="/react-native/docs/0.10/native-modules-android.html">this article</a>.</p>
|
||||
<blockquote>
|
||||
<p><strong><em>Warning</em></strong>:
|
||||
All native modules share the same namespace. Watch out for name collisions when creating new ones.</p>
|
||||
<p><strong><em>Warning</em></strong>: All native modules share the same namespace. Watch out for name collisions when creating new ones.</p>
|
||||
</blockquote>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
||||
@@ -22,8 +22,7 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:<span class="hljs-ke
|
||||
</span><span class="hljs-symbol"> moduleName:</span>@<span class="hljs-string">"ImageBrowserApp"</span>
|
||||
<span class="hljs-symbol"> initialProperties:</span>props]<span class="hljs-comment">;</span>
|
||||
</code></pre>
|
||||
<pre><code class="hljs">
|
||||
<span class="hljs-keyword">import</span> <span class="hljs-type">React</span> from <span class="hljs-symbol">'reac</span>t';
|
||||
<pre><code class="hljs"><span class="hljs-keyword">import</span> <span class="hljs-type">React</span> from <span class="hljs-symbol">'reac</span>t';
|
||||
<span class="hljs-keyword">import</span> {
|
||||
<span class="hljs-type">AppRegistry</span>,
|
||||
<span class="hljs-type">View</span>,
|
||||
@@ -56,8 +55,7 @@ rootView.appProperties = <span class="hljs-meta">@{</span><span class="hljs-meta
|
||||
<p>It is fine to update properties anytime. However, updates have to be performed on the main thread. You use the getter on any thread.</p>
|
||||
<p>There is no way to update only a few properties at a time. We suggest that you build it into your own wrapper instead.</p>
|
||||
<blockquote>
|
||||
<p><strong><em>Note:</em></strong>
|
||||
Currently, JS functions <code>componentWillReceiveProps</code> and <code>componentWillUpdateProps</code> of the top level RN component will not be called after a prop update. However, you can access the new props in <code>componentWillMount</code> function.</p>
|
||||
<p><strong><em>Note:</em></strong> Currently, JS functions <code>componentWillReceiveProps</code> and <code>componentWillUpdateProps</code> of the top level RN component will not be called after a prop update. However, you can access the new props in <code>componentWillMount</code> function.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" name="passing-properties-from-react-native-to-native"></a><a href="#passing-properties-from-react-native-to-native" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Passing properties from React Native to native</h3>
|
||||
<p>The problem exposing properties of native components is covered in detail in <a href="/react-native/docs/0.10/native-components-ios.html#properties">this article</a>. In short, export properties with <code>RCT_CUSTOM_VIEW_PROPERTY</code> macro in your custom native component, then just use them in React Native as if the component was an ordinary React Native component.</p>
|
||||
@@ -82,8 +80,7 @@ Currently, JS functions <code>componentWillReceiveProps</code> and <code>compone
|
||||
<p>Although this solution is complex, it is used in <code>RCTUIManager</code>, which is an internal React Native class that manages all React Native views.</p>
|
||||
<p>Native modules can also be used to expose existing native libraries to JS. The <a href="https://github.com/facebook/react-native/tree/master/Libraries/Geolocation">Geolocation library</a> is a living example of the idea.</p>
|
||||
<blockquote>
|
||||
<p><strong><em>Warning</em></strong>:
|
||||
All native modules share the same namespace. Watch out for name collisions when creating new ones.</p>
|
||||
<p><strong><em>Warning</em></strong>: All native modules share the same namespace. Watch out for name collisions when creating new ones.</p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" aria-hidden="true" name="layout-computation-flow"></a><a href="#layout-computation-flow" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Layout computation flow</h2>
|
||||
<p>When integrating native and React Native, we also need a way to consolidate two different layout systems. This section covers common layout problems and provides a brief description of mechanisms to address them.</p>
|
||||
@@ -125,8 +122,7 @@ typedef <span class="hljs-type">NS_ENUM</span>(<span class="hljs-type">NSInteger
|
||||
</code></pre>
|
||||
<p><code>RCTRootViewSizeFlexibilityNone</code> is the default value, which makes a root view's size fixed (but it still can be updated with <code>setFrame:</code>). The other three modes allow us to track React Native content's size updates. For instance, setting mode to <code>RCTRootViewSizeFlexibilityHeight</code> will cause React Native to measure the content's height and pass that information back to <code>RCTRootView</code>'s delegate. An arbitrary action can be performed within the delegate, including setting the root view's frame, so the content fits. The delegate is called only when the size of the content has changed.</p>
|
||||
<blockquote>
|
||||
<p><strong><em>Warning:</em></strong>
|
||||
Making a dimension flexible in both JS and native leads to undefined behavior. For example - don't make a top-level React component's width flexible (with <code>flexbox</code>) while you're using <code>RCTRootViewSizeFlexibilityWidth</code> on the hosting <code>RCTRootView</code>.</p>
|
||||
<p><strong><em>Warning:</em></strong> Making a dimension flexible in both JS and native leads to undefined behavior. For example - don't make a top-level React component's width flexible (with <code>flexbox</code>) while you're using <code>RCTRootViewSizeFlexibilityWidth</code> on the hosting <code>RCTRootView</code>.</p>
|
||||
</blockquote>
|
||||
<p>Let's look at an example.</p>
|
||||
<pre><code class="hljs"><span class="hljs-comment">// FlexibleSizeExampleView.m</span>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -90,7 +90,7 @@
|
||||
}
|
||||
</code></pre>
|
||||
<p>You can trigger the event in your web view client. You can hook existing handlers if your events are based on them.</p>
|
||||
<p>You should refer to <a href="https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java">ReactWebViewManager.java</a> in the React Native codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality.</p>
|
||||
<p>You should refer to <a href="https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/webview/ReactWebViewManager.java">ReactWebViewManager.java</a> in the React Native codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality.</p>
|
||||
<pre><code class="hljs css java"><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">NavigationCompletedEvent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Event</span><<span class="hljs-title">NavigationCompletedEvent</span>> </span>{
|
||||
<span class="hljs-keyword">private</span> WritableMap mParams;
|
||||
|
||||
@@ -150,18 +150,15 @@
|
||||
<li>Return a <code>WebView</code> component with the prop <code>nativeConfig.component</code> set to your native component (see below)</li>
|
||||
</ul>
|
||||
<p>To get your native component, you must use <code>requireNativeComponent</code>: the same as for regular custom components. However, you must pass in an extra third argument, <code>WebView.extraNativeComponentConfig</code>. This third argument contains prop types that are only required for native code.</p>
|
||||
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> React, { Component, PropTypes } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { WebView, requireNativeComponent } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> React, {Component, PropTypes} <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> {WebView, requireNativeComponent} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CustomWebView</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
<span class="hljs-keyword">static</span> propTypes = WebView.propTypes
|
||||
<span class="hljs-keyword">static</span> propTypes = WebView.propTypes;
|
||||
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">WebView</span>
|
||||
{<span class="hljs-attr">...this.props</span>}
|
||||
<span class="hljs-attr">nativeConfig</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">component:</span> <span class="hljs-attr">RCTCustomWebView</span> }}
|
||||
/></span>
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">WebView</span> {<span class="hljs-attr">...this.props</span>} <span class="hljs-attr">nativeConfig</span>=<span class="hljs-string">{{component:</span> <span class="hljs-attr">RCTCustomWebView</span>}} /></span>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -186,10 +183,10 @@ const RCTCustomWebView = requireNativeComponent(
|
||||
<span class="hljs-attr">finalUrl</span>: <span class="hljs-string">'about:blank'</span>,
|
||||
};
|
||||
|
||||
_onNavigationCompleted = <span class="hljs-function">(<span class="hljs-params">event</span>) =></span> {
|
||||
<span class="hljs-keyword">const</span> { onNavigationCompleted } = <span class="hljs-keyword">this</span>.props;
|
||||
_onNavigationCompleted = <span class="hljs-function"><span class="hljs-params">event</span> =></span> {
|
||||
<span class="hljs-keyword">const</span> {onNavigationCompleted} = <span class="hljs-keyword">this</span>.props;
|
||||
onNavigationCompleted && onNavigationCompleted(event);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
@@ -200,7 +197,7 @@ const RCTCustomWebView = requireNativeComponent(
|
||||
<span class="hljs-attr">props:</span> {
|
||||
<span class="hljs-attr">finalUrl:</span> <span class="hljs-attr">this.props.finalUrl</span>,
|
||||
<span class="hljs-attr">onNavigationCompleted:</span> <span class="hljs-attr">this._onNavigationCompleted</span>,
|
||||
}
|
||||
},
|
||||
}}
|
||||
/></span>
|
||||
);
|
||||
|
||||
@@ -72,7 +72,7 @@ RCT_EXPORT_VIEW_PROPERTY(onNavigationCompleted, RCTDirectEventBlock)
|
||||
RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" name="extending-existing-events"></a><a href="#extending-existing-events" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Extending Existing Events</h3>
|
||||
<p>You should refer to <a href="https://github.com/facebook/react-native/blob/master/React/Views/RCTWebView.m">RCTWebView.m</a> in the React Native codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality.</p>
|
||||
<p>You should refer to <a href="https://github.com/facebook/react-native/blob/master/React/Views/RCTWebView.m">RCTWebView.m</a> in the React Native codebase to see what handlers are available and how they are implemented. You can extend any methods here to provide extra functionality.</p>
|
||||
<p>By default, most methods aren't exposed from RCTWebView. If you need to expose them, you need to create an <a href="https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/CustomizingExistingClasses/CustomizingExistingClasses.html">Objective C category</a>, and then expose all the methods you need to use.</p>
|
||||
<pre><code class="hljs css objc"><span class="hljs-comment">// RCTWebView+Custom.h</span>
|
||||
<span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTWebView.h></span></span>
|
||||
@@ -113,21 +113,20 @@ RCT_EXPORT_VIEW_PROPERTY(finalUrl, <span class="hljs-built_in">NSString</span>)
|
||||
<li>Return a <code>WebView</code> component with the prop <code>nativeConfig.component</code> set to your native component (see below)</li>
|
||||
</ul>
|
||||
<p>To get your native component, you must use <code>requireNativeComponent</code>: the same as for regular custom components. However, you must pass in an extra third argument, <code>WebView.extraNativeComponentConfig</code>. This third argument contains prop types that are only required for native code.</p>
|
||||
<pre><code class="hljs css js">
|
||||
<span class="hljs-keyword">import</span> React, { Component, PropTypes } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { WebView, requireNativeComponent, NativeModules } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
<span class="hljs-keyword">const</span> { CustomWebViewManager } = NativeModules;
|
||||
<pre><code class="hljs css js"><span class="hljs-keyword">import</span> React, {Component, PropTypes} <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> {WebView, requireNativeComponent, NativeModules} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
<span class="hljs-keyword">const</span> {CustomWebViewManager} = NativeModules;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CustomWebView</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
<span class="hljs-keyword">static</span> propTypes = WebView.propTypes
|
||||
<span class="hljs-keyword">static</span> propTypes = WebView.propTypes;
|
||||
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">WebView</span>
|
||||
{<span class="hljs-attr">...this.props</span>}
|
||||
<span class="hljs-attr">nativeConfig</span>=<span class="hljs-string">{{</span>
|
||||
<span class="hljs-attr">nativeConfig</span>=<span class="hljs-string">{{</span>
|
||||
<span class="hljs-attr">component:</span> <span class="hljs-attr">RCTCustomWebView</span>,
|
||||
<span class="hljs-attr">viewManager:</span> <span class="hljs-attr">CustomWebViewManager</span>
|
||||
<span class="hljs-attr">viewManager:</span> <span class="hljs-attr">CustomWebViewManager</span>,
|
||||
}}
|
||||
/></span>
|
||||
);
|
||||
@@ -139,7 +138,6 @@ const RCTCustomWebView = requireNativeComponent(
|
||||
CustomWebView,
|
||||
WebView.extraNativeComponentConfig
|
||||
);
|
||||
|
||||
</span></code></pre>
|
||||
<p>If you want to add custom props to your native component, you can use <code>nativeConfig.props</code> on the web view. For iOS, you should also set the <code>nativeConfig.viewManager</code> prop with your custom WebView ViewManager as in the example above.</p>
|
||||
<p>For events, the event handler must always be set to a function. This means it isn't safe to use the event handler directly from <code>this.props</code>, as the user might not have provided one. The standard approach is to create a event handler in your class, and then invoking the event handler given in <code>this.props</code> if it exists.</p>
|
||||
@@ -155,10 +153,10 @@ const RCTCustomWebView = requireNativeComponent(
|
||||
<span class="hljs-attr">finalUrl</span>: <span class="hljs-string">'about:blank'</span>,
|
||||
};
|
||||
|
||||
_onNavigationCompleted = <span class="hljs-function">(<span class="hljs-params">event</span>) =></span> {
|
||||
<span class="hljs-keyword">const</span> { onNavigationCompleted } = <span class="hljs-keyword">this</span>.props;
|
||||
_onNavigationCompleted = <span class="hljs-function"><span class="hljs-params">event</span> =></span> {
|
||||
<span class="hljs-keyword">const</span> {onNavigationCompleted} = <span class="hljs-keyword">this</span>.props;
|
||||
onNavigationCompleted && onNavigationCompleted(event);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
@@ -170,7 +168,7 @@ const RCTCustomWebView = requireNativeComponent(
|
||||
<span class="hljs-attr">finalUrl:</span> <span class="hljs-attr">this.props.finalUrl</span>,
|
||||
<span class="hljs-attr">onNavigationCompleted:</span> <span class="hljs-attr">this._onNavigationCompleted</span>,
|
||||
},
|
||||
<span class="hljs-attr">viewManager:</span> <span class="hljs-attr">CustomWebViewManager</span>
|
||||
<span class="hljs-attr">viewManager:</span> <span class="hljs-attr">CustomWebViewManager</span>,
|
||||
}}
|
||||
/></span>
|
||||
);
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="open"></a><a href="#open" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>open()</code></h3>
|
||||
<pre><code class="hljs css javascript">DatePickerAndroid.open(options)
|
||||
<pre><code class="hljs css javascript">DatePickerAndroid.open(options);
|
||||
</code></pre>
|
||||
<p>Opens the standard Android date picker dialog.</p>
|
||||
<p>The available keys for the <code>options</code> object are:</p>
|
||||
@@ -38,20 +38,16 @@
|
||||
<li>'default': Show a default native date picker(spinner/calendar) based on android versions.</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
<p>Returns a Promise which will be invoked an object containing <code>action</code>, <code>year</code>, <code>month</code> (0-11),
|
||||
<code>day</code> if the user picked a date. If the user dismissed the dialog, the Promise will
|
||||
still be resolved with action being <code>DatePickerAndroid.dismissedAction</code> and all the other keys
|
||||
being undefined. <strong>Always</strong> check whether the <code>action</code> before reading the values.</p>
|
||||
<p>Note the native date picker dialog has some UI glitches on Android 4 and lower
|
||||
when using the <code>minDate</code> and <code>maxDate</code> options.</p>
|
||||
<p>Returns a Promise which will be invoked an object containing <code>action</code>, <code>year</code>, <code>month</code> (0-11), <code>day</code> if the user picked a date. If the user dismissed the dialog, the Promise will still be resolved with action being <code>DatePickerAndroid.dismissedAction</code> and all the other keys being undefined. <strong>Always</strong> check whether the <code>action</code> before reading the values.</p>
|
||||
<p>Note the native date picker dialog has some UI glitches on Android 4 and lower when using the <code>minDate</code> and <code>maxDate</code> options.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="datesetaction"></a><a href="#datesetaction" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>dateSetAction()</code></h3>
|
||||
<pre><code class="hljs css javascript">DatePickerAndroid.dateSetAction()
|
||||
<pre><code class="hljs css javascript">DatePickerAndroid.dateSetAction();
|
||||
</code></pre>
|
||||
<p>A date has been selected.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="dismissedaction"></a><a href="#dismissedaction" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>dismissedAction()</code></h3>
|
||||
<pre><code class="hljs css javascript">DatePickerAndroid.dismissedAction()
|
||||
<pre><code class="hljs css javascript">DatePickerAndroid.dismissedAction();
|
||||
</code></pre>
|
||||
<p>The dialog has been dismissed.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -145,7 +145,7 @@
|
||||
.newBuilder()
|
||||
.addNetworkInterceptor(<span class="hljs-keyword">new</span> StethoInterceptor())
|
||||
.build();
|
||||
|
||||
|
||||
OkHttpClientProvider.replaceOkHttpClient(client);
|
||||
}
|
||||
}
|
||||
@@ -155,7 +155,7 @@
|
||||
<pre><code class="hljs css java"> <span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onCreate</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">super</span>.onCreate();
|
||||
|
||||
<span class="hljs-keyword">if</span> (BuildConfig.DEBUG) {
|
||||
<span class="hljs-keyword">if</span> (BuildConfig.DEBUG) {
|
||||
StethoWrapper.initialize(<span class="hljs-keyword">this</span>);
|
||||
StethoWrapper.addInterceptor();
|
||||
}
|
||||
|
||||
@@ -21,15 +21,9 @@
|
||||
<h3><a class="anchor" aria-hidden="true" name="get"></a><a href="#get" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>get()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> get(dim)
|
||||
</code></pre>
|
||||
<p>Initial dimensions are set before <code>runApplication</code> is called so they should
|
||||
be available before any other require's are run, but may be updated later.</p>
|
||||
<p>Note: Although dimensions are available immediately, they may change (e.g
|
||||
due to device rotation) so any rendering logic or styles that depend on
|
||||
these constants should try to call this function on every render, rather
|
||||
than caching the value (for example, using inline styles rather than
|
||||
setting a value in a <code>StyleSheet</code>).</p>
|
||||
<p>@param {string} dim Name of dimension as defined when calling <code>set</code>.
|
||||
@returns {Object?} Value for the dimension.</p>
|
||||
<p>Initial dimensions are set before <code>runApplication</code> is called so they should be available before any other require's are run, but may be updated later.</p>
|
||||
<p>Note: Although dimensions are available immediately, they may change (e.g due to device rotation) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a <code>StyleSheet</code>).</p>
|
||||
<p>@param {string} dim Name of dimension as defined when calling <code>set</code>. @returns {Object?} Value for the dimension.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="cameraroll.html">← CameraRoll</a><a class="docs-next button" href="geolocation.html">Geolocation →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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),
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,9 +1,4 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>DrawerLayoutAndroid · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="DrawerLayoutAndroid · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="React component that wraps the platform `DrawerLayout` (Android only). The"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/drawerlayoutandroid.md" target="_blank">Edit</a><h1>DrawerLayoutAndroid</h1></header><article><div><span><p>React component that wraps the platform <code>DrawerLayout</code> (Android only). The
|
||||
Drawer (typically used for navigation) is rendered with <code>renderNavigationView</code>
|
||||
and direct children are the main view (where your content goes). The navigation
|
||||
view is initially not visible on the screen, but can be pulled in from the
|
||||
side of the window specified by the <code>drawerPosition</code> prop and its width can
|
||||
be set by the <code>drawerWidth</code> prop.</p>
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>DrawerLayoutAndroid · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="DrawerLayoutAndroid · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop."/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/drawerlayoutandroid.md" target="_blank">Edit</a><h1>DrawerLayoutAndroid</h1></header><article><div><span><p>React component that wraps the platform <code>DrawerLayout</code> (Android only). The Drawer (typically used for navigation) is rendered with <code>renderNavigationView</code> and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the <code>drawerPosition</code> prop and its width can be set by the <code>drawerWidth</code> prop.</p>
|
||||
<p>Example:</p>
|
||||
<pre><code class="hljs">render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">var</span> navigationView = (
|
||||
@@ -81,8 +76,7 @@ be set by the <code>drawerWidth</code> prop.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="drawerwidth"></a><a href="#drawerwidth" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>drawerWidth</code></h3>
|
||||
<p>Specifies the width of the drawer, more precisely the width of the view that be pulled in
|
||||
from the edge of the window.</p>
|
||||
<p>Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -112,8 +106,7 @@ from the edge of the window.</p>
|
||||
<ul>
|
||||
<li>unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.</li>
|
||||
<li>locked-closed, meaning that the drawer will stay closed and not respond to gestures.</li>
|
||||
<li>locked-open, meaning that the drawer will stay opened and not respond to gestures.
|
||||
The drawer may still be opened and closed programmatically (<code>openDrawer</code>/<code>closeDrawer</code>).</li>
|
||||
<li>locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (<code>openDrawer</code>/<code>closeDrawer</code>).</li>
|
||||
</ul>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -151,8 +144,7 @@ The drawer may still be opened and closed programmatically (<code>openDrawer</co
|
||||
<ul>
|
||||
<li>idle, meaning there is no interaction with the navigation view happening at the time</li>
|
||||
<li>dragging, meaning there is currently an interaction with the navigation view</li>
|
||||
<li>settling, meaning that there was an interaction with the navigation view, and the
|
||||
navigation view is now finishing its closing or opening animation</li>
|
||||
<li>settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation</li>
|
||||
</ul>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -164,8 +156,7 @@ navigation view is now finishing its closing or opening animation</li>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="drawerbackgroundcolor"></a><a href="#drawerbackgroundcolor" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>drawerBackgroundColor</code></h3>
|
||||
<p>Specifies the background color of the drawer. The default value is white.
|
||||
If you want to set the opacity of the drawer, use rgba. Example:</p>
|
||||
<p>Specifies the background color of the drawer. The default value is white. If you want to set the opacity of the drawer, use rgba. Example:</p>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">DrawerLayoutAndroid</span> <span class="hljs-attr">drawerBackgroundColor</span>=<span class="hljs-string">"rgba(0,0,0,0.5)"</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">DrawerLayoutAndroid</span>></span></span>
|
||||
@@ -181,9 +172,7 @@ If you want to set the opacity of the drawer, use rgba. Example:</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="statusbarbackgroundcolor"></a><a href="#statusbarbackgroundcolor" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>statusBarBackgroundColor</code></h3>
|
||||
<p>Make the drawer take the entire screen and draw the background of the
|
||||
status bar to allow it to open over the status bar. It will only have an
|
||||
effect on API 21+.</p>
|
||||
<p>Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -194,12 +183,12 @@ effect on API 21+.</p>
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="opendrawer"></a><a href="#opendrawer" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>openDrawer()</code></h3>
|
||||
<pre><code class="hljs css javascript">openDrawer()
|
||||
<pre><code class="hljs css javascript">openDrawer();
|
||||
</code></pre>
|
||||
<p>Opens the drawer.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="closedrawer"></a><a href="#closedrawer" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>closeDrawer()</code></h3>
|
||||
<pre><code class="hljs css javascript">closeDrawer()
|
||||
<pre><code class="hljs css javascript">closeDrawer();
|
||||
</code></pre>
|
||||
<p>Closes the drawer.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
|
||||
+17
-36
@@ -1,14 +1,9 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Easing · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Easing · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="The `Easing` module implements common easing functions. This module is used"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/easing.md" target="_blank">Edit</a><h1>Easing</h1></header><article><div><span><p>The <code>Easing</code> module implements common easing functions. This module is used
|
||||
by <a href="/react-native/docs/0.10/animated.html#timing">Animated.timing()</a> to convey physically
|
||||
believable motion in animations.</p>
|
||||
<p>You can find a visualization of some common easing functions at
|
||||
<a href="http://easings.net/">http://easings.net/</a></p>
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Easing · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Easing · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="The `Easing` module implements common easing functions. This module is used by [Animated.timing()](/react-native/docs/0.10/animated.html#timing) to convey physically believable motion in animations."/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/easing.md" target="_blank">Edit</a><h1>Easing</h1></header><article><div><span><p>The <code>Easing</code> module implements common easing functions. This module is used by <a href="/react-native/docs/0.10/animated.html#timing">Animated.timing()</a> to convey physically believable motion in animations.</p>
|
||||
<p>You can find a visualization of some common easing functions at <a href="http://easings.net/">http://easings.net/</a></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="predefined-animations"></a><a href="#predefined-animations" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Predefined animations</h3>
|
||||
<p>The <code>Easing</code> module provides several predefined animations through the
|
||||
following methods:</p>
|
||||
<p>The <code>Easing</code> module provides several predefined animations through the following methods:</p>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.10/easing.html#back"><code>back</code></a> provides a simple animation where the
|
||||
object goes slightly back before moving forward</li>
|
||||
<li><a href="/react-native/docs/0.10/easing.html#back"><code>back</code></a> provides a simple animation where the object goes slightly back before moving forward</li>
|
||||
<li><a href="/react-native/docs/0.10/easing.html#bounce"><code>bounce</code></a> provides a bouncing animation</li>
|
||||
<li><a href="/react-native/docs/0.10/easing.html#ease"><code>ease</code></a> provides a simple inertial animation</li>
|
||||
<li><a href="/react-native/docs/0.10/easing.html#elastic"><code>elastic</code></a> provides a simple spring interaction</li>
|
||||
@@ -20,8 +15,7 @@ object goes slightly back before moving forward</li>
|
||||
<li><a href="/react-native/docs/0.10/easing.html#quad"><code>quad</code></a></li>
|
||||
<li><a href="/react-native/docs/0.10/easing.html#cubic"><code>cubic</code></a></li>
|
||||
</ul>
|
||||
<p>The <a href="/react-native/docs/0.10/easing.html#poly"><code>poly</code></a> function can be used to implement
|
||||
quartic, quintic, and other higher power functions.</p>
|
||||
<p>The <a href="/react-native/docs/0.10/easing.html#poly"><code>poly</code></a> function can be used to implement quartic, quintic, and other higher power functions.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="additional-functions"></a><a href="#additional-functions" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Additional functions</h3>
|
||||
<p>Additional mathematical functions are provided by the following methods:</p>
|
||||
<ul>
|
||||
@@ -72,37 +66,32 @@ quartic, quintic, and other higher power functions.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="linear"></a><a href="#linear" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>linear()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> linear(t)
|
||||
</code></pre>
|
||||
<p>A linear function, <code>f(t) = t</code>. Position correlates to elapsed time one to
|
||||
one.</p>
|
||||
<p>A linear function, <code>f(t) = t</code>. Position correlates to elapsed time one to one.</p>
|
||||
<p><a href="http://cubic-bezier.com/#0,0,1,1">http://cubic-bezier.com/#0,0,1,1</a></p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="ease"></a><a href="#ease" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>ease()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> ease(t)
|
||||
</code></pre>
|
||||
<p>A simple inertial interaction, similar to an object slowly accelerating to
|
||||
speed.</p>
|
||||
<p>A simple inertial interaction, similar to an object slowly accelerating to speed.</p>
|
||||
<p><a href="http://cubic-bezier.com/#.42,0,1,1">http://cubic-bezier.com/#.42,0,1,1</a></p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="quad"></a><a href="#quad" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>quad()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> quad(t)
|
||||
</code></pre>
|
||||
<p>A quadratic function, <code>f(t) = t * t</code>. Position equals the square of elapsed
|
||||
time.</p>
|
||||
<p>A quadratic function, <code>f(t) = t * t</code>. Position equals the square of elapsed time.</p>
|
||||
<p><a href="http://easings.net/#easeInQuad">http://easings.net/#easeInQuad</a></p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="cubic"></a><a href="#cubic" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>cubic()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> cubic(t)
|
||||
</code></pre>
|
||||
<p>A cubic function, <code>f(t) = t * t * t</code>. Position equals the cube of elapsed
|
||||
time.</p>
|
||||
<p>A cubic function, <code>f(t) = t * t * t</code>. Position equals the cube of elapsed time.</p>
|
||||
<p><a href="http://easings.net/#easeInCubic">http://easings.net/#easeInCubic</a></p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="poly"></a><a href="#poly" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>poly()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> poly(n)
|
||||
</code></pre>
|
||||
<p>A power function. Position is equal to the Nth power of elapsed time.</p>
|
||||
<p>n = 4: <a href="http://easings.net/#easeInQuart">http://easings.net/#easeInQuart</a>
|
||||
n = 5: <a href="http://easings.net/#easeInQuint">http://easings.net/#easeInQuint</a></p>
|
||||
<p>n = 4: <a href="http://easings.net/#easeInQuart">http://easings.net/#easeInQuart</a> n = 5: <a href="http://easings.net/#easeInQuint">http://easings.net/#easeInQuint</a></p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="sin"></a><a href="#sin" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>sin()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> sin(t)
|
||||
@@ -125,18 +114,14 @@ n = 5: <a href="http://easings.net/#easeInQuint">http://easings.net/#easeInQuint
|
||||
<h3><a class="anchor" aria-hidden="true" name="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> elastic(bounciness)
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring oscillating back and
|
||||
forth.</p>
|
||||
<p>Default bounciness is 1, which overshoots a little bit once. 0 bounciness
|
||||
doesn't overshoot at all, and bounciness of N > 1 will overshoot about N
|
||||
times.</p>
|
||||
<p>A simple elastic interaction, similar to a spring oscillating back and forth.</p>
|
||||
<p>Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p><a href="http://easings.net/#easeInElastic">http://easings.net/#easeInElastic</a></p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="back"></a><a href="#back" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>back()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> back(s)
|
||||
</code></pre>
|
||||
<p>Use with <code>Animated.parallel()</code> to create a simple effect where the object
|
||||
animates back slightly as the animation starts.</p>
|
||||
<p>Use with <code>Animated.parallel()</code> to create a simple effect where the object animates back slightly as the animation starts.</p>
|
||||
<p>Wolfram Plot:</p>
|
||||
<ul>
|
||||
<li><a href="http://tiny.cc/back_default">http://tiny.cc/back_default</a> (s = 1.70158, default)</li>
|
||||
@@ -151,13 +136,11 @@ animates back slightly as the animation starts.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="bezier"></a><a href="#bezier" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>bezier()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> bezier(x1, y1, x2, y2)
|
||||
</code></pre>
|
||||
<p>Provides a cubic bezier curve, equivalent to CSS Transitions'
|
||||
<code>transition-timing-function</code>.</p>
|
||||
<p>A useful tool to visualize cubic bezier curves can be found at
|
||||
<a href="http://cubic-bezier.com/">http://cubic-bezier.com/</a></p>
|
||||
<p>Provides a cubic bezier curve, equivalent to CSS Transitions' <code>transition-timing-function</code>.</p>
|
||||
<p>A useful tool to visualize cubic bezier curves can be found at <a href="http://cubic-bezier.com/">http://cubic-bezier.com/</a></p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="in"></a><a href="#in" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>in()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> <span class="hljs-keyword">in</span>(easing)
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> <span class="hljs-keyword">in</span> easing;
|
||||
</code></pre>
|
||||
<p>Runs an easing function forwards.</p>
|
||||
<hr>
|
||||
@@ -169,9 +152,7 @@ animates back slightly as the animation starts.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="inout"></a><a href="#inout" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>inOut()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> inOut(easing)
|
||||
</code></pre>
|
||||
<p>Makes any easing function symmetrical. The easing function will run
|
||||
forwards for half of the duration, then backwards for the rest of the
|
||||
duration.</p>
|
||||
<p>Makes any easing function symmetrical. The easing function will run forwards for half of the duration, then backwards for the rest of the duration.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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),
|
||||
|
||||
+23
-37
@@ -12,20 +12,15 @@
|
||||
</ul>
|
||||
<p>If you need section support, use <a href="/react-native/docs/0.10/sectionlist.html"><code><SectionList></code></a>.</p>
|
||||
<p>Minimal Example:</p>
|
||||
<pre><code class="hljs css javascript"> <FlatList
|
||||
data={[{<span class="hljs-attr">key</span>: <span class="hljs-string">'a'</span>}, {<span class="hljs-attr">key</span>: <span class="hljs-string">'b'</span>}]}
|
||||
renderItem={({item}) => <span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span>></span>{item.key}<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>}
|
||||
/>
|
||||
<pre><code class="hljs css javascript"><FlatList
|
||||
data={[{<span class="hljs-attr">key</span>: <span class="hljs-string">'a'</span>}, {<span class="hljs-attr">key</span>: <span class="hljs-string">'b'</span>}]}
|
||||
renderItem={({item}) => <span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span>></span>{item.key}<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>}
|
||||
/>
|
||||
</code></pre>
|
||||
<p>More complex, multi-select example demonstrating <code>PureComponent</code> usage for perf optimization and avoiding bugs.</p>
|
||||
<ul>
|
||||
<li>By binding the <code>onPressItem</code> handler, the props will remain <code>===</code> and <code>PureComponent</code> will
|
||||
prevent wasteful re-renders unless the actual <code>id</code>, <code>selected</code>, or <code>title</code> props change, even
|
||||
if the components rendered in <code>MyListItem</code> did not have such optimizations.</li>
|
||||
<li>By passing <code>extraData={this.state}</code> to <code>FlatList</code> we make sure <code>FlatList</code> itself will re-render
|
||||
when the <code>state.selected</code> changes. Without setting this prop, <code>FlatList</code> would not know it
|
||||
needs to re-render any items because it is also a <code>PureComponent</code> and the prop comparison will
|
||||
not show any changes.</li>
|
||||
<li>By binding the <code>onPressItem</code> handler, the props will remain <code>===</code> and <code>PureComponent</code> will prevent wasteful re-renders unless the actual <code>id</code>, <code>selected</code>, or <code>title</code> props change, even if the components rendered in <code>MyListItem</code> did not have such optimizations.</li>
|
||||
<li>By passing <code>extraData={this.state}</code> to <code>FlatList</code> we make sure <code>FlatList</code> itself will re-render when the <code>state.selected</code> changes. Without setting this prop, <code>FlatList</code> would not know it needs to re-render any items because it is also a <code>PureComponent</code> and the prop comparison will not show any changes.</li>
|
||||
<li><code>keyExtractor</code> tells the list to use the <code>id</code>s for the react keys instead of the default <code>key</code> property.</li>
|
||||
</ul>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyListItem</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">PureComponent</span> </span>{
|
||||
@@ -34,13 +29,11 @@ not show any changes.</li>
|
||||
};
|
||||
|
||||
render() {
|
||||
<span class="hljs-keyword">const</span> textColor = <span class="hljs-keyword">this</span>.props.selected ? <span class="hljs-string">"red"</span> : <span class="hljs-string">"black"</span>;
|
||||
<span class="hljs-keyword">const</span> textColor = <span class="hljs-keyword">this</span>.props.selected ? <span class="hljs-string">'red'</span> : <span class="hljs-string">'black'</span>;
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">TouchableOpacity</span> <span class="hljs-attr">onPress</span>=<span class="hljs-string">{this._onPress}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">color:</span> <span class="hljs-attr">textColor</span> }}></span>
|
||||
{this.props.title}
|
||||
<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{color:</span> <span class="hljs-attr">textColor</span>}}></span>{this.props.title}<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">TouchableOpacity</span>></span></span>
|
||||
);
|
||||
@@ -54,7 +47,7 @@ not show any changes.</li>
|
||||
|
||||
_onPressItem = <span class="hljs-function">(<span class="hljs-params">id: string</span>) =></span> {
|
||||
<span class="hljs-comment">// updater functions are preferred for transactional updates</span>
|
||||
<span class="hljs-keyword">this</span>.setState(<span class="hljs-function">(<span class="hljs-params">state</span>) =></span> {
|
||||
<span class="hljs-keyword">this</span>.setState(<span class="hljs-function"><span class="hljs-params">state</span> =></span> {
|
||||
<span class="hljs-comment">// copy the map rather than modifying state.</span>
|
||||
<span class="hljs-keyword">const</span> selected = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>(state.selected);
|
||||
selected.set(id, !selected.get(id)); <span class="hljs-comment">// toggle</span>
|
||||
@@ -85,10 +78,10 @@ not show any changes.</li>
|
||||
</code></pre>
|
||||
<p>This is a convenience wrapper around <a href="/react-native/docs/0.10/virtualizedlist.html"><code>VirtualizedList</code></a>, and thus inherits its props (as well as those of <code>ScrollView</code>) that aren't explicitly listed here, along with the following caveats:</p>
|
||||
<ul>
|
||||
<li>Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.</li>
|
||||
<li>Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.</li>
|
||||
<li>This is a <code>PureComponent</code> which means that it will not re-render if <code>props</code> remain shallow- equal. Make sure that everything your <code>renderItem</code> function depends on is passed as a prop (e.g. <code>extraData</code>) that is not <code>===</code> after updates, otherwise your UI may not update on changes. This includes the <code>data</code> prop and parent component state.</li>
|
||||
<li>In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.</li>
|
||||
<li>By default, the list looks for a <code>key</code> prop on each item and uses that for the React key. Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li>
|
||||
<li>By default, the list looks for a <code>key</code> prop on each item and uses that for the React key. Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li>
|
||||
</ul>
|
||||
<p>Also inherits <a href="/react-native/docs/0.10/scrollview.html#props">ScrollView props</a>, unless it is nested in another <code>FlatList</code> of same orientation.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="props"></a><a href="#props" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>
|
||||
@@ -310,7 +303,7 @@ not show any changes.</li>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="keyextractor"></a><a href="#keyextractor" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>keyExtractor</code></h3>
|
||||
<pre><code class="hljs css javascript">(item: object, <span class="hljs-attr">index</span>: number) => string
|
||||
<pre><code class="hljs css javascript">(item: object, <span class="hljs-attr">index</span>: number) => string;
|
||||
</code></pre>
|
||||
<p>Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks <code>item.key</code>, then falls back to using the index, like React does.</p>
|
||||
<table>
|
||||
@@ -422,8 +415,7 @@ not show any changes.</li>
|
||||
<h3><a class="anchor" aria-hidden="true" name="removeclippedsubviews"></a><a href="#removeclippedsubviews" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeClippedSubviews</code></h3>
|
||||
<p>This may improve scroll performance for large lists.</p>
|
||||
<blockquote>
|
||||
<p>Note:
|
||||
May have bugs (missing content) in some circumstances - use at your own risk.</p>
|
||||
<p>Note: May have bugs (missing content) in some circumstances - use at your own risk.</p>
|
||||
</blockquote>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -457,41 +449,35 @@ May have bugs (missing content) in some circumstances - use at your own risk.</p
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="scrolltoend"></a><a href="#scrolltoend" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>scrollToEnd()</code></h3>
|
||||
<pre><code class="hljs css javascript">scrollToEnd([params]: object)
|
||||
<pre><code class="hljs css javascript">scrollToEnd(([params]: object));
|
||||
</code></pre>
|
||||
<p>Scrolls to the end of the content. May be janky without <code>getItemLayout</code> prop.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="scrolltoindex"></a><a href="#scrolltoindex" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>scrollToIndex()</code></h3>
|
||||
<pre><code class="hljs css javascript">scrollToIndex(params: object)
|
||||
<pre><code class="hljs css javascript">scrollToIndex((params: object));
|
||||
</code></pre>
|
||||
<p>Scrolls to the item at the specified index such that it is positioned in the viewable area
|
||||
such that <code>viewPosition</code> 0 places it at the top, 1 at the bottom, and 0.5 centered in the
|
||||
middle. <code>viewOffset</code> is a fixed number of pixels to offset the final target position.</p>
|
||||
<p>Note: cannot scroll to locations outside the render window without specifying the
|
||||
<code>getItemLayout</code> prop.</p>
|
||||
<p>Scrolls to the item at the specified index such that it is positioned in the viewable area such that <code>viewPosition</code> 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle. <code>viewOffset</code> is a fixed number of pixels to offset the final target position.</p>
|
||||
<p>Note: cannot scroll to locations outside the render window without specifying the <code>getItemLayout</code> prop.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="scrolltoitem"></a><a href="#scrolltoitem" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>scrollToItem()</code></h3>
|
||||
<pre><code class="hljs css javascript">scrollToItem(params: object)
|
||||
<pre><code class="hljs css javascript">scrollToItem((params: object));
|
||||
</code></pre>
|
||||
<p>Requires linear scan through data - use <code>scrollToIndex</code> instead if possible.</p>
|
||||
<p>Note: cannot scroll to locations outside the render window without specifying the
|
||||
<code>getItemLayout</code> prop.</p>
|
||||
<p>Note: cannot scroll to locations outside the render window without specifying the <code>getItemLayout</code> prop.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="scrolltooffset"></a><a href="#scrolltooffset" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>scrollToOffset()</code></h3>
|
||||
<pre><code class="hljs css javascript">scrollToOffset(params: object)
|
||||
<pre><code class="hljs css javascript">scrollToOffset((params: object));
|
||||
</code></pre>
|
||||
<p>Scroll to a specific content pixel offset in the list.</p>
|
||||
<p>Check out <a href="/react-native/docs/0.10/virtualizedlist.html#scrolltooffset">scrollToOffset</a> of VirtualizedList</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="recordinteraction"></a><a href="#recordinteraction" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>recordInteraction()</code></h3>
|
||||
<pre><code class="hljs css javascript">recordInteraction()
|
||||
<pre><code class="hljs css javascript">recordInteraction();
|
||||
</code></pre>
|
||||
<p>Tells the list an interaction has occurred, which should trigger viewability calculations, e.g.
|
||||
if <code>waitForInteractions</code> is true and the user has not scrolled. This is typically called by
|
||||
taps on items or by navigation actions.</p>
|
||||
<p>Tells the list an interaction has occurred, which should trigger viewability calculations, e.g. if <code>waitForInteractions</code> is true and the user has not scrolled. This is typically called by taps on items or by navigation actions.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="flashscrollindicators"></a><a href="#flashscrollindicators" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>flashScrollIndicators()</code></h3>
|
||||
<pre><code class="hljs css javascript">flashScrollIndicators()
|
||||
<pre><code class="hljs css javascript">flashScrollIndicators();
|
||||
</code></pre>
|
||||
<p>Displays the scroll indicators momentarily.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="type-definitions"></a><a href="#type-definitions" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Type Definitions</h2>
|
||||
|
||||
File diff suppressed because one or more lines are too long
+89
-244
@@ -79,9 +79,7 @@
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<p>This page will help you install and build your first React Native app. If you
|
||||
already have React Native installed, you can skip ahead to the
|
||||
<a href="/react-native/docs/0.10/tutorial.html">Tutorial</a>.</p>
|
||||
<p>This page will help you install and build your first React Native app. If you already have React Native installed, you can skip ahead to the <a href="/react-native/docs/0.10/tutorial.html">Tutorial</a>.</p>
|
||||
<div class="toggler">
|
||||
<ul role="tablist" >
|
||||
<li id="quickstart" class="button-quickstart" aria-selected="false" role="tab" tabindex="0" aria-controls="quickstarttab" onclick="displayTab('guide', 'quickstart')">
|
||||
@@ -93,83 +91,41 @@ already have React Native installed, you can skip ahead to the
|
||||
</ul>
|
||||
</div>
|
||||
<p><block class="quickstart mac windows linux ios android" /></p>
|
||||
<p><a href="https://github.com/react-community/create-react-native-app">Create React Native App</a>
|
||||
is the easiest way to start building a new React Native application. It allows
|
||||
you to start a project without installing or configuring any tools to build
|
||||
native code - no Xcode or Android Studio installation required (see
|
||||
<a href="/react-native/docs/0.10/getting-started.html#caveats">Caveats</a>).</p>
|
||||
<p>Assuming that you have <a href="https://nodejs.org/en/download/">Node</a> installed, you
|
||||
can use npm to install the <code>create-react-native-app</code> command line utility:</p>
|
||||
<p><a href="https://github.com/react-community/create-react-native-app">Create React Native App</a> is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code - no Xcode or Android Studio installation required (see <a href="/react-native/docs/0.10/getting-started.html#caveats">Caveats</a>).</p>
|
||||
<p>Assuming that you have <a href="https://nodejs.org/en/download/">Node</a> installed, you can use npm to install the <code>create-react-native-app</code> command line utility:</p>
|
||||
<pre><code class="hljs"><span class="hljs-string">npm </span><span class="hljs-string">install </span>-g <span class="hljs-built_in">create-react-native-app</span>
|
||||
</code></pre>
|
||||
<p>Then run the following commands to create a new React Native project called
|
||||
"AwesomeProject":</p>
|
||||
<p>Then run the following commands to create a new React Native project called "AwesomeProject":</p>
|
||||
<pre><code class="hljs"><span class="hljs-built_in">create-react-native-app</span> <span class="hljs-string">AwesomeProject
|
||||
</span>
|
||||
<span class="hljs-string">cd </span><span class="hljs-string">AwesomeProject
|
||||
</span><span class="hljs-string">npm </span><span class="hljs-string">start
|
||||
</span></code></pre>
|
||||
<p>This will start a development server for you, and print a QR code in your
|
||||
terminal.</p>
|
||||
<p>This will start a development server for you, and print a QR code in your terminal.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="running-your-react-native-application"></a><a href="#running-your-react-native-application" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Running your React Native application</h2>
|
||||
<p>Install the <a href="https://expo.io">Expo</a> client app on your iOS or Android phone and
|
||||
connect to the same wireless network as your computer. Using the Expo app, scan
|
||||
the QR code from your terminal to open your project.</p>
|
||||
<p>Install the <a href="https://expo.io">Expo</a> client app on your iOS or Android phone and connect to the same wireless network as your computer. Using the Expo app, scan the QR code from your terminal to open your project.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="modifying-your-app"></a><a href="#modifying-your-app" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Modifying your app</h3>
|
||||
<p>Now that you have successfully run the app, let's modify it. Open <code>App.js</code> in
|
||||
your text editor of choice and edit some lines. The application should reload
|
||||
automatically once you save your changes.</p>
|
||||
<p>Now that you have successfully run the app, let's modify it. Open <code>App.js</code> in your text editor of choice and edit some lines. The application should reload automatically once you save your changes.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native app.</p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Now what?</h2>
|
||||
<ul>
|
||||
<li><p>Create React Native App also has a
|
||||
<a href="https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md">user guide</a>
|
||||
you can reference if you have questions specific to the tool.</p></li>
|
||||
<li><p>If you can't get this to work, see the
|
||||
<a href="https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#troubleshooting">Troubleshooting</a>
|
||||
section in the README for Create React Native App.</p></li>
|
||||
<li><p>Create React Native App also has a <a href="https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md">user guide</a> you can reference if you have questions specific to the tool.</p></li>
|
||||
<li><p>If you can't get this to work, see the <a href="https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#troubleshooting">Troubleshooting</a> section in the README for Create React Native App.</p></li>
|
||||
</ul>
|
||||
<p>If you're curious to learn more about React Native, continue on to the
|
||||
<a href="/react-native/docs/0.10/tutorial.html">Tutorial</a>.</p>
|
||||
<p>If you're curious to learn more about React Native, continue on to the <a href="/react-native/docs/0.10/tutorial.html">Tutorial</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="running-your-app-on-a-simulator-or-virtual-device"></a><a href="#running-your-app-on-a-simulator-or-virtual-device" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Running your app on a simulator or virtual device</h3>
|
||||
<p>Create React Native App makes it really easy to run your React Native app on a
|
||||
physical device without setting up a development environment. If you want to run
|
||||
your app on the iOS Simulator or an Android Virtual Device, please refer to the
|
||||
instructions for building projects with native code to learn how to install
|
||||
Xcode and set up your Android development environment.</p>
|
||||
<p>Once you've set these up, you can launch your app on an Android Virtual Device
|
||||
by running <code>npm run android</code>, or on the iOS Simulator by running <code>npm run ios</code>
|
||||
(macOS only).</p>
|
||||
<p>Create React Native App makes it really easy to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for building projects with native code to learn how to install Xcode and set up your Android development environment.</p>
|
||||
<p>Once you've set these up, you can launch your app on an Android Virtual Device by running <code>npm run android</code>, or on the iOS Simulator by running <code>npm run ios</code> (macOS only).</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="caveats"></a><a href="#caveats" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Caveats</h3>
|
||||
<p>Because you don't build any native code when using Create React Native App to
|
||||
create a project, it's not possible to include custom native modules beyond the
|
||||
React Native APIs and components that are available in the Expo client app.</p>
|
||||
<p>If you know that you'll eventually need to include your own native code, Create
|
||||
React Native App is still a good way to get started. In that case you'll just
|
||||
need to
|
||||
"<a href="https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#ejecting-from-create-react-native-app">eject</a>"
|
||||
eventually to create your own native builds. If you do eject, the "Building
|
||||
Projects with Native Code" instructions will be required to continue working on
|
||||
your project.</p>
|
||||
<p>Create React Native App configures your project to use the most recent React
|
||||
Native version that is supported by the Expo client app. The Expo client app
|
||||
usually gains support for a given React Native version about a week after the
|
||||
React Native version is released as stable. You can check
|
||||
<a href="https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md">this document</a>
|
||||
to find out what versions are supported.</p>
|
||||
<p>If you're integrating React Native into an existing project, you'll want to skip
|
||||
Create React Native App and go directly to setting up the native build
|
||||
environment. Select "Building Projects with Native Code" above for instructions
|
||||
on configuring a native build environment for React Native.</p>
|
||||
<p>Because you don't build any native code when using Create React Native App to create a project, it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app.</p>
|
||||
<p>If you know that you'll eventually need to include your own native code, Create React Native App is still a good way to get started. In that case you'll just need to "<a href="https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#ejecting-from-create-react-native-app">eject</a>" eventually to create your own native builds. If you do eject, the "Building Projects with Native Code" instructions will be required to continue working on your project.</p>
|
||||
<p>Create React Native App configures your project to use the most recent React Native version that is supported by the Expo client app. The Expo client app usually gains support for a given React Native version about a week after the React Native version is released as stable. You can check <a href="https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md">this document</a> to find out what versions are supported.</p>
|
||||
<p>If you're integrating React Native into an existing project, you'll want to skip Create React Native App and go directly to setting up the native build environment. Select "Building Projects with Native Code" above for instructions on configuring a native build environment for React Native.</p>
|
||||
<p><block class="native mac windows linux ios android" /></p>
|
||||
<p>Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from <a href="getting-started.md" onclick="displayTab('guide', 'quickstart')">Create React Native App</a>, you'll need this section.</p>
|
||||
<p>The instructions are a bit different depending on your development operating
|
||||
system, and whether you want to start developing for iOS or Android. If you want
|
||||
to develop for both iOS and Android, that's fine - you just have to pick one to
|
||||
start with, since the setup is a bit different.</p>
|
||||
<p>The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that's fine - you just have to pick one to start with, since the setup is a bit different.</p>
|
||||
<div class="toggler">
|
||||
<span>Development OS:</span>
|
||||
<a href="javascript:void(0);" class="button-mac" onclick="displayTab('os', 'mac')">macOS</a>
|
||||
@@ -184,114 +140,75 @@ start with, since the setup is a bit different.</p>
|
||||
<blockquote><p>A Mac is required to build projects with native code for iOS. You can follow the <a href="getting-started.md" onclick="displayTab('guide', 'quickstart')">Quick Start</a> to learn how to build your app using Create React Native App instead.</p></blockquote>
|
||||
<p><block class="native mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="installing-dependencies"></a><a href="#installing-dependencies" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Installing dependencies</h2>
|
||||
<p>You will need Node, Watchman, the React Native command line interface, and
|
||||
Xcode.</p>
|
||||
<p>While you can use any editor of your choice to develop your app, you will need
|
||||
to install Xcode in order to set up the necessary tooling to build your React
|
||||
Native app for iOS.</p>
|
||||
<p>You will need Node, Watchman, the React Native command line interface, and Xcode.</p>
|
||||
<p>While you can use any editor of your choice to develop your app, you will need to install Xcode in order to set up the necessary tooling to build your React Native app for iOS.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="installing-dependencies"></a><a href="#installing-dependencies" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Installing dependencies</h2>
|
||||
<p>You will need Node, Watchman, the React Native command line interface, a JDK,
|
||||
and Android Studio.</p>
|
||||
<p>You will need Node, Watchman, the React Native command line interface, a JDK, and Android Studio.</p>
|
||||
<p><block class="native linux android" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="installing-dependencies"></a><a href="#installing-dependencies" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Installing dependencies</h2>
|
||||
<p>You will need Node, the React Native command line interface, a JDK, and Android
|
||||
Studio.</p>
|
||||
<p>You will need Node, the React Native command line interface, a JDK, and Android Studio.</p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="installing-dependencies"></a><a href="#installing-dependencies" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Installing dependencies</h2>
|
||||
<p>You will need Node, the React Native command line interface, Python2, a JDK, and
|
||||
Android Studio.</p>
|
||||
<p>You will need Node, the React Native command line interface, Python2, a JDK, and Android Studio.</p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>While you can use any editor of your choice to develop your app, you will need
|
||||
to install Android Studio in order to set up the necessary tooling to build your
|
||||
React Native app for Android.</p>
|
||||
<p>While you can use any editor of your choice to develop your app, you will need to install Android Studio in order to set up the necessary tooling to build your React Native app for Android.</p>
|
||||
<p><block class="native mac ios android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="node-watchman"></a><a href="#node-watchman" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Node, Watchman</h3>
|
||||
<p>We recommend installing Node and Watchman using <a href="http://brew.sh/">Homebrew</a>. Run
|
||||
the following commands in a Terminal after installing Homebrew:</p>
|
||||
<p>We recommend installing Node and Watchman using <a href="http://brew.sh/">Homebrew</a>. Run the following commands in a Terminal after installing Homebrew:</p>
|
||||
<pre><code class="hljs">brew install <span class="hljs-keyword">node</span>
|
||||
<span class="hljs-title">brew</span> install watchman
|
||||
</code></pre>
|
||||
<p>If you have already installed Node on your system, make sure it is version 4 or
|
||||
newer.</p>
|
||||
<p><a href="https://facebook.github.io/watchman">Watchman</a> is a tool by Facebook for
|
||||
watching changes in the filesystem. It is highly recommended you install it for
|
||||
better performance.</p>
|
||||
<p>If you have already installed Node on your system, make sure it is version 4 or newer.</p>
|
||||
<p><a href="https://facebook.github.io/watchman">Watchman</a> is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.</p>
|
||||
<p><block class="native linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="node"></a><a href="#node" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Node</h3>
|
||||
<p>Follow the
|
||||
<a href="https://nodejs.org/en/download/package-manager/">installation instructions for your Linux distribution</a>
|
||||
to install Node 6 or newer.</p>
|
||||
<p>Follow the <a href="https://nodejs.org/en/download/package-manager/">installation instructions for your Linux distribution</a> to install Node 6 or newer.</p>
|
||||
<p><block class='native windows android' /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="node-python2-jdk"></a><a href="#node-python2-jdk" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Node, Python2, JDK</h3>
|
||||
<p>We recommend installing Node and Python2 via
|
||||
<a href="https://chocolatey.org">Chocolatey</a>, a popular package manager for Windows.</p>
|
||||
<p>React Native also requires a recent version of the
|
||||
<a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html">Java SE Development Kit (JDK)</a>,
|
||||
as well as Python 2. Both can be installed using Chocolatey.</p>
|
||||
<p>Open an Administrator Command Prompt (right click Command Prompt and select "Run
|
||||
as Administrator"), then run the following command:</p>
|
||||
<p>We recommend installing Node and Python2 via <a href="https://chocolatey.org">Chocolatey</a>, a popular package manager for Windows.</p>
|
||||
<p>React Native also requires a recent version of the <a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html">Java SE Development Kit (JDK)</a>, as well as Python 2. Both can be installed using Chocolatey.</p>
|
||||
<p>Open an Administrator Command Prompt (right click Command Prompt and select "Run as Administrator"), then run the following command:</p>
|
||||
<pre><code class="hljs css powershell">choco install -y nodejs.install python2 jdk8
|
||||
</code></pre>
|
||||
<p>If you have already installed Node on your system, make sure it is version 4 or
|
||||
newer. If you already have a JDK on your system, make sure it is version 8 or
|
||||
newer.</p>
|
||||
<p>If you have already installed Node on your system, make sure it is version 4 or newer. If you already have a JDK on your system, make sure it is version 8 or newer.</p>
|
||||
<blockquote>
|
||||
<p>You can find additional installation options on
|
||||
<a href="https://nodejs.org/en/download/">Node's Downloads page</a>.</p>
|
||||
<p>You can find additional installation options on <a href="https://nodejs.org/en/download/">Node's Downloads page</a>.</p>
|
||||
</blockquote>
|
||||
<p><block class="native mac ios android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="the-react-native-cli"></a><a href="#the-react-native-cli" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The React Native CLI</h3>
|
||||
<p>Node comes with npm, which lets you install the React Native command line
|
||||
interface.</p>
|
||||
<p>Node comes with npm, which lets you install the React Native command line interface.</p>
|
||||
<p>Run the following command in a Terminal:</p>
|
||||
<pre><code class="hljs"><span class="hljs-built_in">npm</span> install -g react-<span class="hljs-keyword">native</span>-cli
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>If you get an error like <code>Cannot find module 'npmlog'</code>, try installing npm
|
||||
directly: <code>curl -0 -L https://npmjs.org/install.sh | sudo sh</code>.</p>
|
||||
<p>If you get an error like <code>Cannot find module 'npmlog'</code>, try installing npm directly: <code>curl -0 -L https://npmjs.org/install.sh | sudo sh</code>.</p>
|
||||
</blockquote>
|
||||
<p><block class="native windows linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="the-react-native-cli"></a><a href="#the-react-native-cli" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The React Native CLI</h3>
|
||||
<p>Node comes with npm, which lets you install the React Native command line
|
||||
interface.</p>
|
||||
<p>Node comes with npm, which lets you install the React Native command line interface.</p>
|
||||
<p>Run the following command in a Command Prompt or shell:</p>
|
||||
<pre><code class="hljs css powershell">npm install -g react-native-cli
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>If you get an error like <code>Cannot find module 'npmlog'</code>, try installing npm
|
||||
directly: <code>curl -0 -L https://npmjs.org/install.sh | sudo sh</code>.</p>
|
||||
<p>If you get an error like <code>Cannot find module 'npmlog'</code>, try installing npm directly: <code>curl -0 -L https://npmjs.org/install.sh | sudo sh</code>.</p>
|
||||
</blockquote>
|
||||
<p><block class="native mac ios" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="xcode"></a><a href="#xcode" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Xcode</h3>
|
||||
<p>The easiest way to install Xcode is via the
|
||||
<a href="https://itunes.apple.com/us/app/xcode/id497799835?mt=12">Mac App Store</a>.
|
||||
Installing Xcode will also install the iOS Simulator and all the necessary tools
|
||||
to build your iOS app.</p>
|
||||
<p>If you have already installed Xcode on your system, make sure it is version 8 or
|
||||
higher.</p>
|
||||
<p>The easiest way to install Xcode is via the <a href="https://itunes.apple.com/us/app/xcode/id497799835?mt=12">Mac App Store</a>. Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.</p>
|
||||
<p>If you have already installed Xcode on your system, make sure it is version 8 or higher.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="command-line-tools"></a><a href="#command-line-tools" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Command Line Tools</h4>
|
||||
<p>You will also need to install the Xcode Command Line Tools. Open Xcode, then
|
||||
choose "Preferences..." from the Xcode menu. Go to the Locations panel and
|
||||
install the tools by selecting the most recent version in the Command Line Tools
|
||||
dropdown.</p>
|
||||
<p>You will also need to install the Xcode Command Line Tools. Open Xcode, then choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.</p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedXcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="java-development-kit"></a><a href="#java-development-kit" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Java Development Kit</h3>
|
||||
<p>React Native requires a recent version of the Java SE Development Kit (JDK).
|
||||
<a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html">Download and install JDK 8 or newer</a>
|
||||
if needed.</p>
|
||||
<p>React Native requires a recent version of the Java SE Development Kit (JDK). <a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html">Download and install JDK 8 or newer</a> if needed.</p>
|
||||
<p><block class="native mac linux windows android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="android-development-environment"></a><a href="#android-development-environment" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Android development environment</h3>
|
||||
<p>Setting up your development environment can be somewhat tedious if you're new to
|
||||
Android development. If you're already familiar with Android development, there
|
||||
are a few things you may need to configure. In either case, please make sure to
|
||||
carefully follow the next few steps.</p>
|
||||
<p>Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.</p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="1-install-android-studio"></a><a href="#1-install-android-studio" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Install Android Studio</h4>
|
||||
<p><a href="https://developer.android.com/studio/index.html">Download and install Android Studio</a>.
|
||||
Choose a "Custom" setup when prompted to select an installation type. Make sure
|
||||
the boxes next to all of the following are checked:</p>
|
||||
<p><a href="https://developer.android.com/studio/index.html">Download and install Android Studio</a>. Choose a "Custom" setup when prompted to select an installation type. Make sure the boxes next to all of the following are checked:</p>
|
||||
<p><block class="native mac windows android" /></p>
|
||||
<ul>
|
||||
<li><code>Android SDK</code></li>
|
||||
@@ -308,32 +225,21 @@ the boxes next to all of the following are checked:</p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Then, click "Next" to install all of these components.</p>
|
||||
<blockquote>
|
||||
<p>If the checkboxes are grayed out, you will have a chance to install these
|
||||
components later on.</p>
|
||||
<p>If the checkboxes are grayed out, you will have a chance to install these components later on.</p>
|
||||
</blockquote>
|
||||
<p>Once setup has finalized and you're presented with the Welcome screen, proceed
|
||||
to the next step.</p>
|
||||
<p>Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="2-install-the-android-sdk"></a><a href="#2-install-the-android-sdk" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Install the Android SDK</h4>
|
||||
<p>Android Studio installs the latest Android SDK by default. Building a React
|
||||
Native app with native code, however, requires the <code>Android 6.0 (Marshmallow)</code>
|
||||
SDK in particular. Additional Android SDKs can be installed through the SDK
|
||||
Manager in Android Studio.</p>
|
||||
<p>The SDK Manager can be accessed from the "Welcome to Android Studio" screen.
|
||||
Click on "Configure", then select "SDK Manager".</p>
|
||||
<p>Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the <code>Android 6.0 (Marshmallow)</code> SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.</p>
|
||||
<p>The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png" alt="Android Studio Welcome"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<blockquote>
|
||||
<p>The SDK Manager can also be found within the Android Studio "Preferences"
|
||||
dialog, under <strong>Appearance & Behavior</strong> → <strong>System Settings</strong> → <strong>Android
|
||||
SDK</strong>.</p>
|
||||
<p>The SDK Manager can also be found within the Android Studio "Preferences" dialog, under <strong>Appearance & Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
|
||||
</blockquote>
|
||||
<p>Select the "SDK Platforms" tab from within the SDK Manager, then check the box
|
||||
next to "Show Package Details" in the bottom right corner. Look for and expand
|
||||
the <code>Android 6.0 (Marshmallow)</code> entry, then make sure the following items are
|
||||
all checked:</p>
|
||||
<p>Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the <code>Android 6.0 (Marshmallow)</code> entry, then make sure the following items are all checked:</p>
|
||||
<ul>
|
||||
<li><code>Google APIs</code></li>
|
||||
<li><code>Android SDK Platform 23</code></li>
|
||||
@@ -345,24 +251,20 @@ all checked:</p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerWindows.png" alt="Android SDK Manager"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Next, select the "SDK Tools" tab and check the box next to "Show Package
|
||||
Details" here as well. Look for and expand the "Android SDK Build-Tools" entry,
|
||||
then make sure that <code>23.0.1</code> is selected.</p>
|
||||
<p>Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that <code>23.0.1</code> is selected.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png" alt="Android SDK Manager - 23.0.1 Build Tools"></p>
|
||||
<p><block class="native windows mac linux android" /></p>
|
||||
<p>Finally, click "Apply" to download and install the Android SDK and related build
|
||||
tools.</p>
|
||||
<p>Finally, click "Apply" to download and install the Android SDK and related build tools.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="3-configure-the-android-home-environment-variable"></a><a href="#3-configure-the-android-home-environment-variable" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Configure the ANDROID_HOME environment variable</h4>
|
||||
<p>The React Native tools require some environment variables to be set up in order
|
||||
to build apps with native code.</p>
|
||||
<p>The React Native tools require some environment variables to be set up in order to build apps with native code.</p>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
<p>Add the following lines to your <code>$HOME/.bash_profile</code> config file:</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
@@ -377,113 +279,72 @@ to build apps with native code.</p>
|
||||
</code></pre>
|
||||
<p><block class="native mac linux android" /></p>
|
||||
<blockquote>
|
||||
<p><code>.bash_profile</code> is specific to <code>bash</code>. If you're using another shell, you will
|
||||
need to edit the appropriate shell-specific config file.</p>
|
||||
<p><code>.bash_profile</code> is specific to <code>bash</code>. If you're using another shell, you will need to edit the appropriate shell-specific config file.</p>
|
||||
</blockquote>
|
||||
<p>Type <code>source $HOME/.bash_profile</code> to load the config into your current shell.
|
||||
Verify that ANDROID_HOME has been added to your path by running <code>echo $PATH</code>.</p>
|
||||
<p>Type <code>source $HOME/.bash_profile</code> to load the config into your current shell. Verify that ANDROID_HOME has been added to your path by running <code>echo $PATH</code>.</p>
|
||||
<blockquote>
|
||||
<p>Please make sure you use the correct Android SDK path. You can find the actual
|
||||
location of the SDK in the Android Studio "Preferences" dialog, under
|
||||
<strong>Appearance & Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
|
||||
<p>Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under <strong>Appearance & Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
|
||||
</blockquote>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p>Open the System pane under <strong>System and Security</strong> in the Control Panel, then
|
||||
click on <strong>Change settings...</strong>. Open the <strong>Advanced</strong> tab and click on
|
||||
<strong>Environment Variables...</strong>. Click on <strong>New...</strong> to create a new <code>ANDROID_HOME</code>
|
||||
user variable that points to the path to your Android SDK:</p>
|
||||
<p>Open the System pane under <strong>System and Security</strong> in the Control Panel, then click on <strong>Change settings...</strong>. Open the <strong>Advanced</strong> tab and click on <strong>Environment Variables...</strong>. Click on <strong>New...</strong> to create a new <code>ANDROID_HOME</code> user variable that points to the path to your Android SDK:</p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p>
|
||||
<p>The SDK is installed, by default, at the following location:</p>
|
||||
<pre><code class="hljs css powershell">c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
|
||||
</code></pre>
|
||||
<p>You can find the actual location of the SDK in the Android Studio "Preferences"
|
||||
dialog, under <strong>Appearance & Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
|
||||
<p>Open a new Command Prompt window to ensure the new environment variable is
|
||||
loaded before proceeding to the next step.</p>
|
||||
<p>You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under <strong>Appearance & Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p>
|
||||
<p>Open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step.</p>
|
||||
<p><block class="native linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="watchman-optional"></a><a href="#watchman-optional" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Watchman (optional)</h3>
|
||||
<p>Follow the
|
||||
<a href="https://facebook.github.io/watchman/install.html#buildinstall">Watchman installation guide</a>
|
||||
to compile and install Watchman from source.</p>
|
||||
<p>Follow the <a href="https://facebook.github.io/watchman/install.html#buildinstall">Watchman installation guide</a> to compile and install Watchman from source.</p>
|
||||
<blockquote>
|
||||
<p><a href="https://facebook.github.io/watchman/docs/install.html">Watchman</a> is a tool by
|
||||
Facebook for watching changes in the filesystem. It is highly recommended you
|
||||
install it for better performance, but it's alright to skip this if you find
|
||||
the process to be tedious.</p>
|
||||
<p><a href="https://facebook.github.io/watchman/docs/install.html">Watchman</a> is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance, but it's alright to skip this if you find the process to be tedious.</p>
|
||||
</blockquote>
|
||||
<p><block class="native mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="creating-a-new-application"></a><a href="#creating-a-new-application" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Creating a new application</h2>
|
||||
<p>Use the React Native command line interface to generate a new React Native
|
||||
project called "AwesomeProject":</p>
|
||||
<p>Use the React Native command line interface to generate a new React Native project called "AwesomeProject":</p>
|
||||
<pre><code class="hljs">react-<span class="hljs-keyword">native</span> init AwesomeProject
|
||||
</code></pre>
|
||||
<p>This is not necessary if you are integrating React Native into an existing
|
||||
application, if you "ejected" from Create React Native App, or if you're adding
|
||||
iOS support to an existing React Native project (see
|
||||
<a href="/react-native/docs/0.10/platform-specific-code.html">Platform Specific Code</a>).</p>
|
||||
<p>This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Create React Native App, or if you're adding iOS support to an existing React Native project (see <a href="/react-native/docs/0.10/platform-specific-code.html">Platform Specific Code</a>).</p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="creating-a-new-application"></a><a href="#creating-a-new-application" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Creating a new application</h2>
|
||||
<p>Use the React Native command line interface to generate a new React Native
|
||||
project called "AwesomeProject":</p>
|
||||
<p>Use the React Native command line interface to generate a new React Native project called "AwesomeProject":</p>
|
||||
<pre><code class="hljs">react-<span class="hljs-keyword">native</span> init AwesomeProject
|
||||
</code></pre>
|
||||
<p>This is not necessary if you are integrating React Native into an existing
|
||||
application, if you "ejected" from Create React Native App, or if you're adding
|
||||
Android support to an existing React Native project (see
|
||||
<a href="/react-native/docs/0.10/platform-specific-code.html">Platform Specific Code</a>).</p>
|
||||
<p>This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Create React Native App, or if you're adding Android support to an existing React Native project (see <a href="/react-native/docs/0.10/platform-specific-code.html">Platform Specific Code</a>).</p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="preparing-the-android-device"></a><a href="#preparing-the-android-device" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Preparing the Android device</h2>
|
||||
<p>You will need an Android device to run your React Native Android app. This can
|
||||
be either a physical Android device, or more commonly, you can use an Android
|
||||
Virtual Device which allows you to emulate an Android device on your computer.</p>
|
||||
<p>Either way, you will need to prepare the device to run Android apps for
|
||||
development.</p>
|
||||
<p>You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer.</p>
|
||||
<p>Either way, you will need to prepare the device to run Android apps for development.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="using-a-physical-device"></a><a href="#using-a-physical-device" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using a physical device</h3>
|
||||
<p>If you have a physical Android device, you can use it for development in place
|
||||
of an AVD by plugging it in to your computer using a USB cable and following the
|
||||
instructions <a href="/react-native/docs/0.10/running-on-device.html">here</a>.</p>
|
||||
<p>If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions <a href="/react-native/docs/0.10/running-on-device.html">here</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="using-a-virtual-device"></a><a href="#using-a-virtual-device" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using a virtual device</h3>
|
||||
<p>You can see the list of available Android Virtual Devices (AVDs) by opening the
|
||||
"AVD Manager" from within Android Studio. Look for an icon that looks like this:</p>
|
||||
<p>You can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:</p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidStudioAVD.png" alt="Android Studio AVD Manager"></p>
|
||||
<p>If you have just installed Android Studio, you will likely need to
|
||||
<a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>.
|
||||
Select "Create Virtual Device...", then pick any Phone from the list and click
|
||||
"Next".</p>
|
||||
<p>If you have just installed Android Studio, you will likely need to <a href="https://developer.android.com/studio/run/managing-avds.html">create a new AVD</a>. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".</p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDWindows.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDMacOS.png" alt="Android Studio AVD Manager"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Select the "x86 Images" tab, then look for the <strong>Marshmallow</strong> API Level 23,
|
||||
x86_64 ABI image with a Android 6.0 (Google APIs) target.</p>
|
||||
<p>Select the "x86 Images" tab, then look for the <strong>Marshmallow</strong> API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.</p>
|
||||
<p><block class="native linux android" /></p>
|
||||
<blockquote>
|
||||
<p>We recommend configuring
|
||||
<a href="https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux">VM acceleration</a>
|
||||
on your system to improve performance. Once you've followed those
|
||||
instructions, go back to the AVD Manager.</p>
|
||||
<p>We recommend configuring <a href="https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux">VM acceleration</a> on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86Windows.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, click on "Install HAXM" or follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
<p>If you don't have HAXM installed, click on "Install HAXM" or follow <a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows">these instructions</a> to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerWindows.png" alt="AVD List"></p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedCreateAVDx86MacOS.png" alt="Install HAXM"></p>
|
||||
<blockquote>
|
||||
<p>If you don't have HAXM installed, follow
|
||||
<a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-mac-os-x">these instructions</a>
|
||||
to set it up, then go back to the AVD Manager.</p>
|
||||
<p>If you don't have HAXM installed, follow <a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-mac-os-x">these instructions</a> to set it up, then go back to the AVD Manager.</p>
|
||||
</blockquote>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAVDManagerMacOS.png" alt="AVD List"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p>Click "Next" then "Finish" to create your AVD. At this point you should be able
|
||||
to click on the green triangle button next to your AVD to launch it, then
|
||||
proceed to the next step.</p>
|
||||
<p>Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step.</p>
|
||||
<p><block class="native mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="running-your-react-native-application"></a><a href="#running-your-react-native-application" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Running your React Native application</h2>
|
||||
<p>Run <code>react-native run-ios</code> inside your React Native project folder:</p>
|
||||
@@ -492,34 +353,27 @@ react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>You should see your new app running in the iOS Simulator shortly.</p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartediOSSuccess.png" alt="AwesomeProject on iOS"></p>
|
||||
<p><code>react-native run-ios</code> is just one way to run your app. You can also run it
|
||||
directly from within Xcode or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
<p><code>react-native run-ios</code> is just one way to run your app. You can also run it directly from within Xcode or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
<blockquote>
|
||||
<p>If you can't get this to work, see the
|
||||
<a href="/react-native/docs/0.10/troubleshooting.html#content">Troubleshooting</a> page.</p>
|
||||
<p>If you can't get this to work, see the <a href="/react-native/docs/0.10/troubleshooting.html#content">Troubleshooting</a> page.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" name="running-on-a-device"></a><a href="#running-on-a-device" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Running on a device</h3>
|
||||
<p>The above command will automatically run your app on the iOS Simulator by
|
||||
default. If you want to run the app on an actual physical iOS device, please
|
||||
follow the instructions <a href="/react-native/docs/0.10/running-on-device.html">here</a>.</p>
|
||||
<p>The above command will automatically run your app on the iOS Simulator by default. If you want to run the app on an actual physical iOS device, please follow the instructions <a href="/react-native/docs/0.10/running-on-device.html">here</a>.</p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="running-your-react-native-application"></a><a href="#running-your-react-native-application" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Running your React Native application</h2>
|
||||
<p>Run <code>react-native run-android</code> inside your React Native project folder:</p>
|
||||
<pre><code class="hljs">cd AwesomeProject
|
||||
react-native <span class="hljs-keyword">run</span><span class="bash">-android
|
||||
</span></code></pre>
|
||||
<p>If everything is set up correctly, you should see your new app running in your
|
||||
Android emulator shortly.</p>
|
||||
<p>If everything is set up correctly, you should see your new app running in your Android emulator shortly.</p>
|
||||
<p><block class="native mac android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessMacOS.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native windows android" /></p>
|
||||
<p><img src="/react-native/docs/assets/GettingStartedAndroidSuccessWindows.png" alt="AwesomeProject on Android"></p>
|
||||
<p><block class="native mac windows linux android" /></p>
|
||||
<p><code>react-native run-android</code> is just one way to run your app - you can also run it
|
||||
directly from within Android Studio or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
<p><code>react-native run-android</code> is just one way to run your app - you can also run it directly from within Android Studio or <a href="https://nuclide.io/">Nuclide</a>.</p>
|
||||
<blockquote>
|
||||
<p>If you can't get this to work, see the
|
||||
<a href="/react-native/docs/0.10/troubleshooting.html#content">Troubleshooting</a> page.</p>
|
||||
<p>If you can't get this to work, see the <a href="/react-native/docs/0.10/troubleshooting.html#content">Troubleshooting</a> page.</p>
|
||||
</blockquote>
|
||||
<p><block class="native mac ios android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="modifying-your-app"></a><a href="#modifying-your-app" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Modifying your app</h3>
|
||||
@@ -532,8 +386,7 @@ directly from within Android Studio or <a href="https://nuclide.io/">Nuclide</a>
|
||||
<p><block class="native mac android" /></p>
|
||||
<ul>
|
||||
<li>Open <code>App.js</code> in your text editor of choice and edit some lines.</li>
|
||||
<li>Press the <code>R</code> key twice or select <code>Reload</code> from the Developer Menu (<code>⌘M</code>) to
|
||||
see your changes!</li>
|
||||
<li>Press the <code>R</code> key twice or select <code>Reload</code> from the Developer Menu (<code>⌘M</code>) to see your changes!</li>
|
||||
</ul>
|
||||
<p><block class="native windows linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="modifying-your-app"></a><a href="#modifying-your-app" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Modifying your app</h3>
|
||||
@@ -544,34 +397,26 @@ see your changes!</li>
|
||||
</ul>
|
||||
<p><block class="native mac ios android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native app.</p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native windows linux android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="that-s-it"></a><a href="#that-s-it" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>That's it!</h3>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native
|
||||
app.</p>
|
||||
<p>Congratulations! You've successfully run and modified your first React Native app.</p>
|
||||
<p><center><img src="/react-native/docs/assets/GettingStartedCongratulations.png" width="150"></img></center></p>
|
||||
<p><block class="native mac ios" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Now what?</h2>
|
||||
<ul>
|
||||
<li><p>Turn on <a href="/react-native/docs/0.10/debugging.html#reloading-javascript">Live Reload</a> in the Developer
|
||||
Menu. Your app will now reload automatically whenever you save any changes!</p></li>
|
||||
<li><p>If you want to add this new React Native code to an existing application,
|
||||
check out the <a href="/react-native/docs/0.10/integration-with-existing-apps.html">Integration guide</a>.</p></li>
|
||||
<li><p>Turn on <a href="/react-native/docs/0.10/debugging.html#reloading-javascript">Live Reload</a> in the Developer Menu. Your app will now reload automatically whenever you save any changes!</p></li>
|
||||
<li><p>If you want to add this new React Native code to an existing application, check out the <a href="/react-native/docs/0.10/integration-with-existing-apps.html">Integration guide</a>.</p></li>
|
||||
</ul>
|
||||
<p>If you're curious to learn more about React Native, continue on to the
|
||||
<a href="/react-native/docs/0.10/tutorial.html">Tutorial</a>.</p>
|
||||
<p>If you're curious to learn more about React Native, continue on to the <a href="/react-native/docs/0.10/tutorial.html">Tutorial</a>.</p>
|
||||
<p><block class="native windows linux mac android" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Now what?</h2>
|
||||
<ul>
|
||||
<li><p>Turn on <a href="/react-native/docs/0.10/debugging.html#reloading-javascript">Live Reload</a> in the Developer
|
||||
Menu. Your app will now reload automatically whenever you save any changes!</p></li>
|
||||
<li><p>If you want to add this new React Native code to an existing application,
|
||||
check out the <a href="/react-native/docs/0.10/integration-with-existing-apps.html">Integration guide</a>.</p></li>
|
||||
<li><p>Turn on <a href="/react-native/docs/0.10/debugging.html#reloading-javascript">Live Reload</a> in the Developer Menu. Your app will now reload automatically whenever you save any changes!</p></li>
|
||||
<li><p>If you want to add this new React Native code to an existing application, check out the <a href="/react-native/docs/0.10/integration-with-existing-apps.html">Integration guide</a>.</p></li>
|
||||
</ul>
|
||||
<p>If you're curious to learn more about React Native, continue on to the
|
||||
<a href="/react-native/docs/0.10/tutorial.html">Tutorial</a>.</p>
|
||||
<p>If you're curious to learn more about React Native, continue on to the <a href="/react-native/docs/0.10/tutorial.html">Tutorial</a>.</p>
|
||||
<script>
|
||||
function displayTab(type, value) {
|
||||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -10,9 +10,9 @@
|
||||
<pre><code class="hljs css js">AppRegistry.registerHeadlessTask(<span class="hljs-string">'SomeTaskName'</span>, () => <span class="hljs-built_in">require</span>(<span class="hljs-string">'SomeTaskName'</span>));
|
||||
</code></pre>
|
||||
<p>Then, in <code>SomeTaskName.js</code>:</p>
|
||||
<pre><code class="hljs css js"><span class="hljs-built_in">module</span>.exports = <span class="hljs-keyword">async</span> (taskData) => {
|
||||
<pre><code class="hljs css js"><span class="hljs-built_in">module</span>.exports = <span class="hljs-keyword">async</span> taskData => {
|
||||
<span class="hljs-comment">// do stuff</span>
|
||||
}
|
||||
};
|
||||
</code></pre>
|
||||
<p>You can do anything in your task as long as it doesn't touch UI: network requests, timers and so on. Once your task completes (i.e. the promise is resolved), React Native will go into "paused" mode (unless there are other tasks running, or there is a foreground app).</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="the-java-api"></a><a href="#the-java-api" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The Java API</h2>
|
||||
@@ -72,7 +72,7 @@ getApplicationContext().startService(service);
|
||||
**/</span>
|
||||
<span class="hljs-keyword">if</span> (!isAppOnForeground((context))) {
|
||||
<span class="hljs-comment">/**
|
||||
We will start our service and send extra info about
|
||||
We will start our service and send extra info about
|
||||
network connections
|
||||
**/</span>
|
||||
<span class="hljs-keyword">boolean</span> hasInternet = isNetworkAvailable(context);
|
||||
@@ -89,14 +89,14 @@ getApplicationContext().startService(service);
|
||||
http://stackoverflow.com/questions/8489993/check-android-application-is-in-foreground-or-not
|
||||
**/</span>
|
||||
ActivityManager activityManager = (ActivityManager) context.getSystemService(Context.ACTIVITY_SERVICE);
|
||||
List<ActivityManager.RunningAppProcessInfo> appProcesses =
|
||||
List<ActivityManager.RunningAppProcessInfo> appProcesses =
|
||||
activityManager.getRunningAppProcesses();
|
||||
<span class="hljs-keyword">if</span> (appProcesses == <span class="hljs-keyword">null</span>) {
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-keyword">false</span>;
|
||||
}
|
||||
<span class="hljs-keyword">final</span> String packageName = context.getPackageName();
|
||||
<span class="hljs-keyword">for</span> (ActivityManager.RunningAppProcessInfo appProcess : appProcesses) {
|
||||
<span class="hljs-keyword">if</span> (appProcess.importance ==
|
||||
<span class="hljs-keyword">if</span> (appProcess.importance ==
|
||||
ActivityManager.RunningAppProcessInfo.IMPORTANCE_FOREGROUND &&
|
||||
appProcess.processName.equals(packageName)) {
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-keyword">true</span>;
|
||||
@@ -106,7 +106,7 @@ getApplicationContext().startService(service);
|
||||
}
|
||||
|
||||
<span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">boolean</span> <span class="hljs-title">isNetworkAvailable</span><span class="hljs-params">(Context context)</span> </span>{
|
||||
ConnectivityManager cm = (ConnectivityManager)
|
||||
ConnectivityManager cm = (ConnectivityManager)
|
||||
context.getSystemService(Context.CONNECTIVITY_SERVICE);
|
||||
NetworkInfo netInfo = cm.getActiveNetworkInfo();
|
||||
<span class="hljs-keyword">return</span> (netInfo != <span class="hljs-keyword">null</span> && netInfo.isConnected());
|
||||
|
||||
+9
-22
File diff suppressed because one or more lines are too long
@@ -6,7 +6,7 @@
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="cropimage"></a><a href="#cropimage" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>cropImage()</code></h3>
|
||||
<pre><code class="hljs css javascript">ImageEditor.cropImage(uri, cropData, success, failure)
|
||||
<pre><code class="hljs css javascript">ImageEditor.cropImage(uri, cropData, success, failure);
|
||||
</code></pre>
|
||||
<p>Crop the image specified by the URI param. If URI points to a remote image, it will be downloaded automatically. If the image cannot be loaded/downloaded, the failure callback will be called.</p>
|
||||
<p>If the cropping process is successful, the resultant cropped image will be stored in the ImageStore, and the URI returned in the success callback will point to the image in the store. Remember to delete the cropped image from the ImageStore when you are done with it.</p>
|
||||
|
||||
@@ -9,19 +9,19 @@
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="canrecordvideos"></a><a href="#canrecordvideos" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>canRecordVideos()</code></h3>
|
||||
<pre><code class="hljs css javascript">ImagePickerIOS.canRecordVideos(callback)
|
||||
<pre><code class="hljs css javascript">ImagePickerIOS.canRecordVideos(callback);
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="canusecamera"></a><a href="#canusecamera" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>canUseCamera()</code></h3>
|
||||
<pre><code class="hljs css javascript">ImagePickerIOS.canUseCamera(callback)
|
||||
<pre><code class="hljs css javascript">ImagePickerIOS.canUseCamera(callback);
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="opencameradialog"></a><a href="#opencameradialog" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>openCameraDialog()</code></h3>
|
||||
<pre><code class="hljs css javascript">ImagePickerIOS.openCameraDialog(config, successCallback, cancelCallback)
|
||||
<pre><code class="hljs css javascript">ImagePickerIOS.openCameraDialog(config, successCallback, cancelCallback);
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="openselectdialog"></a><a href="#openselectdialog" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>openSelectDialog()</code></h3>
|
||||
<pre><code class="hljs css javascript">ImagePickerIOS.openSelectDialog(config, successCallback, cancelCallback)
|
||||
<pre><code class="hljs css javascript">ImagePickerIOS.openSelectDialog(config, successCallback, cancelCallback);
|
||||
</code></pre>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
||||
+61
-148
@@ -5,17 +5,11 @@
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</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/images.md" target="_blank">Edit</a><h1>Images</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" name="static-image-resources"></a><a href="#static-image-resources" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Image Resources</h2>
|
||||
<p>React Native provides a unified way of managing images and other media assets in
|
||||
your iOS and Android apps. To add a static image to your app, place it somewhere
|
||||
in your source code tree and reference it like this:</p>
|
||||
<pre><code class="hljs css javascript"><Image source={<span class="hljs-built_in">require</span>(<span class="hljs-string">"./my-icon.png"</span>)} />;
|
||||
<p>React Native provides a unified way of managing images and other media assets in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:</p>
|
||||
<pre><code class="hljs css javascript"><Image source={<span class="hljs-built_in">require</span>(<span class="hljs-string">'./my-icon.png'</span>)} />
|
||||
</code></pre>
|
||||
<p>The image name is resolved the same way JS modules are resolved. In the example
|
||||
above, the packager will look for <code>my-icon.png</code> in the same folder as the
|
||||
component that requires it. Also, if you have <code>my-icon.ios.png</code> and
|
||||
<code>my-icon.android.png</code>, the packager will pick the correct file for the platform.</p>
|
||||
<p>You can also use the <code>@2x</code> and <code>@3x</code> suffixes to provide images for different
|
||||
screen densities. If you have the following file structure:</p>
|
||||
<p>The image name is resolved the same way JS modules are resolved. In the example above, the packager will look for <code>my-icon.png</code> in the same folder as the component that requires it. Also, if you have <code>my-icon.ios.png</code> and <code>my-icon.android.png</code>, the packager will pick the correct file for the platform.</p>
|
||||
<p>You can also use the <code>@2x</code> and <code>@3x</code> suffixes to provide images for different screen densities. If you have the following file structure:</p>
|
||||
<pre><code class="hljs">.
|
||||
├── <span class="hljs-selector-tag">button</span><span class="hljs-selector-class">.js</span>
|
||||
└── <span class="hljs-selector-tag">img</span>
|
||||
@@ -23,81 +17,50 @@ screen densities. If you have the following file structure:</p>
|
||||
└── check@<span class="hljs-number">3</span>x<span class="hljs-selector-class">.png</span>
|
||||
</code></pre>
|
||||
<p>...and <code>button.js</code> code contains:</p>
|
||||
<pre><code class="hljs css javascript"><Image source={<span class="hljs-built_in">require</span>(<span class="hljs-string">"./assets/check.png"</span>)} />;
|
||||
<pre><code class="hljs css javascript"><Image source={<span class="hljs-built_in">require</span>(<span class="hljs-string">'./assets/check.png'</span>)} />
|
||||
</code></pre>
|
||||
<p>...the packager will bundle and serve the image corresponding to device's screen
|
||||
density. For example, <code>check@2x.png</code>, will be used on an iPhone 7,
|
||||
while<code>check@3x.png</code> will be used on an iPhone 7 Plus or a Nexus 5. If there is
|
||||
no image matching the screen density, the closest best option will be selected.</p>
|
||||
<p>On Windows, you might need to restart the packager if you add new images to your
|
||||
project.</p>
|
||||
<p>...the packager will bundle and serve the image corresponding to device's screen density. For example, <code>check@2x.png</code>, will be used on an iPhone 7, while<code>check@3x.png</code> will be used on an iPhone 7 Plus or a Nexus 5. If there is no image matching the screen density, the closest best option will be selected.</p>
|
||||
<p>On Windows, you might need to restart the packager if you add new images to your project.</p>
|
||||
<p>Here are some benefits that you get:</p>
|
||||
<ol>
|
||||
<li>Same system on iOS and Android.</li>
|
||||
<li>Images live in the same folder as your JavaScript code. Components are
|
||||
self-contained.</li>
|
||||
<li>Images live in the same folder as your JavaScript code. Components are self-contained.</li>
|
||||
<li>No global namespace, i.e. you don't have to worry about name collisions.</li>
|
||||
<li>Only the images that are actually used will be packaged into your app.</li>
|
||||
<li>Adding and changing images doesn't require app recompilation, just refresh
|
||||
the simulator as you normally do.</li>
|
||||
<li>Adding and changing images doesn't require app recompilation, just refresh the simulator as you normally do.</li>
|
||||
<li>The packager knows the image dimensions, no need to duplicate it in the code.</li>
|
||||
<li>Images can be distributed via <a href="https://www.npmjs.com/">npm</a> packages.</li>
|
||||
</ol>
|
||||
<p>In order for this to work, the image name in <code>require</code> has to be known
|
||||
statically.</p>
|
||||
<p>In order for this to work, the image name in <code>require</code> has to be known statically.</p>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-comment">// GOOD</span>
|
||||
<Image source={<span class="hljs-built_in">require</span>(<span class="hljs-string">"./my-icon.png"</span>)} />;
|
||||
<Image source={<span class="hljs-built_in">require</span>(<span class="hljs-string">'./my-icon.png'</span>)} />;
|
||||
|
||||
<span class="hljs-comment">// BAD</span>
|
||||
<span class="hljs-keyword">var</span> icon = <span class="hljs-keyword">this</span>.props.active ? <span class="hljs-string">"my-icon-active"</span> : <span class="hljs-string">"my-icon-inactive"</span>;
|
||||
<Image source={require("./" + icon + ".png")} />;
|
||||
<span class="hljs-keyword">var</span> icon = <span class="hljs-keyword">this</span>.props.active ? <span class="hljs-string">'my-icon-active'</span> : <span class="hljs-string">'my-icon-inactive'</span>;
|
||||
<Image source={require('./' + icon + '.png')} />;
|
||||
|
||||
// GOOD
|
||||
var icon = this.props.active
|
||||
? require("./my-icon-active.png")
|
||||
: require("./my-icon-inactive.png");
|
||||
? require('./my-icon-active.png')
|
||||
: require('./my-icon-inactive.png');
|
||||
<Image source={icon} />;
|
||||
</code></pre>
|
||||
<p>Note that image sources required this way include size (width, height) info for
|
||||
the Image. If you need to scale the image dynamically (i.e. via flex), you may
|
||||
need to manually set <code>{ width: undefined, height: undefined }</code> on the style
|
||||
attribute.</p>
|
||||
<p>Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set <code>{ width: undefined, height: undefined }</code> on the style attribute.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="static-non-image-resources"></a><a href="#static-non-image-resources" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Static Non-Image Resources</h2>
|
||||
<p>The <code>require</code> syntax described above can be used to statically include audio,
|
||||
video or document files in your project as well. Most common file types are
|
||||
supported including <code>.mp3</code>, <code>.wav</code>, <code>.mp4</code>, <code>.mov</code>, <code>.html</code> and <code>.pdf</code>. See
|
||||
<a href="https://github.com/facebook/metro/blob/master/packages/metro/src/defaults.js#L13-L18">packager defaults</a>
|
||||
for the full list.</p>
|
||||
<p>You can add support for other types by creating a packager config file (see the
|
||||
<a href="https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L34-L39">packager config file</a>
|
||||
for the full list of configuration options).</p>
|
||||
<p>A caveat is that videos must use absolute positioning instead of <code>flexGrow</code>,
|
||||
since size info is not currently passed for non-image assets. This limitation
|
||||
doesn't occur for videos that are linked directly into Xcode or the Assets
|
||||
folder for Android.</p>
|
||||
<p>The <code>require</code> syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including <code>.mp3</code>, <code>.wav</code>, <code>.mp4</code>, <code>.mov</code>, <code>.html</code> and <code>.pdf</code>. See <a href="https://github.com/facebook/metro/blob/master/packages/metro/src/defaults.js#L13-L18">packager defaults</a> for the full list.</p>
|
||||
<p>You can add support for other types by creating a packager config file (see the <a href="https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L34-L39">packager config file</a> for the full list of configuration options).</p>
|
||||
<p>A caveat is that videos must use absolute positioning instead of <code>flexGrow</code>, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="images-from-hybrid-app-s-resources"></a><a href="#images-from-hybrid-app-s-resources" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Images From Hybrid App's Resources</h2>
|
||||
<p>If you are building a hybrid app (some UIs in React Native, some UIs in platform
|
||||
code) you can still use images that are already bundled into the app.</p>
|
||||
<p>For images included via Xcode asset catalogs or in the Android drawable folder,
|
||||
use the image name without the extension:</p>
|
||||
<pre><code class="hljs css javascript"><Image source={{ <span class="hljs-attr">uri</span>: <span class="hljs-string">"app_icon"</span> }} style={{ <span class="hljs-attr">width</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">40</span> }} />;
|
||||
<p>If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.</p>
|
||||
<p>For images included via Xcode asset catalogs or in the Android drawable folder, use the image name without the extension:</p>
|
||||
<pre><code class="hljs css javascript"><Image source={{<span class="hljs-attr">uri</span>: <span class="hljs-string">'app_icon'</span>}} style={{<span class="hljs-attr">width</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">40</span>}} />
|
||||
</code></pre>
|
||||
<p>For images in the Android assets folder, use the <code>asset:/</code> scheme:</p>
|
||||
<pre><code class="hljs css javascript"><Image
|
||||
source={{ <span class="hljs-attr">uri</span>: <span class="hljs-string">"asset:/app_icon.png"</span> }}
|
||||
style={{ <span class="hljs-attr">width</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">40</span> }}
|
||||
/>;
|
||||
<pre><code class="hljs css javascript"><Image source={{<span class="hljs-attr">uri</span>: <span class="hljs-string">'asset:/app_icon.png'</span>}} style={{<span class="hljs-attr">width</span>: <span class="hljs-number">40</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">40</span>}} />
|
||||
</code></pre>
|
||||
<p>These approaches provide no safety checks. It's up to you to guarantee that
|
||||
those images are available in the application. Also you have to specify image
|
||||
dimensions manually.</p>
|
||||
<p>These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="network-images"></a><a href="#network-images" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Network Images</h2>
|
||||
<p>Many of the images you will display in your app will not be available at compile
|
||||
time, or you will want to load some dynamically to keep the binary size down.
|
||||
Unlike with static resources, <em>you will need to manually specify the dimensions
|
||||
of your image</em>. It's highly recommended that you use https as well in order to
|
||||
satisfy <a href="/react-native/docs/0.10/running-on-device.html#app-transport-security">App Transport Security</a>
|
||||
requirements on iOS.</p>
|
||||
<p>Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, <em>you will need to manually specify the dimensions of your image</em>. It's highly recommended that you use https as well in order to satisfy <a href="/react-native/docs/0.10/running-on-device.html#app-transport-security">App Transport Security</a> requirements on iOS.</p>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-comment">// GOOD</span>
|
||||
<Image source={{<span class="hljs-attr">uri</span>: <span class="hljs-string">'https://facebook.github.io/react/logo-og.png'</span>}}
|
||||
style={{<span class="hljs-attr">width</span>: <span class="hljs-number">400</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">400</span>}} />
|
||||
@@ -106,116 +69,72 @@ requirements on iOS.</p>
|
||||
<Image source={{<span class="hljs-attr">uri</span>: <span class="hljs-string">'https://facebook.github.io/react/logo-og.png'</span>}} />
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" name="network-requests-for-images"></a><a href="#network-requests-for-images" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Network Requests for Images</h3>
|
||||
<p>If you would like to set such things as the HTTP-Verb, Headers or a Body along
|
||||
with the image request, you may do this by defining these properties on the
|
||||
source object:</p>
|
||||
<p>If you would like to set such things as the HTTP-Verb, Headers or a Body along with the image request, you may do this by defining these properties on the source object:</p>
|
||||
<pre><code class="hljs css javascript"><Image
|
||||
source={{
|
||||
<span class="hljs-attr">uri</span>: <span class="hljs-string">"https://facebook.github.io/react/logo-og.png"</span>,
|
||||
<span class="hljs-attr">method</span>: <span class="hljs-string">"POST"</span>,
|
||||
<span class="hljs-attr">uri</span>: <span class="hljs-string">'https://facebook.github.io/react/logo-og.png'</span>,
|
||||
<span class="hljs-attr">method</span>: <span class="hljs-string">'POST'</span>,
|
||||
<span class="hljs-attr">headers</span>: {
|
||||
<span class="hljs-attr">Pragma</span>: <span class="hljs-string">"no-cache"</span>
|
||||
<span class="hljs-attr">Pragma</span>: <span class="hljs-string">'no-cache'</span>,
|
||||
},
|
||||
<span class="hljs-attr">body</span>: <span class="hljs-string">"Your Body goes here"</span>
|
||||
<span class="hljs-attr">body</span>: <span class="hljs-string">'Your Body goes here'</span>,
|
||||
}}
|
||||
style={{ <span class="hljs-attr">width</span>: <span class="hljs-number">400</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">400</span> }}
|
||||
/>;
|
||||
style={{<span class="hljs-attr">width</span>: <span class="hljs-number">400</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">400</span>}}
|
||||
/>
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" name="uri-data-images"></a><a href="#uri-data-images" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Uri Data Images</h2>
|
||||
<p>Sometimes, you might be getting encoded image data from a REST API call. You can
|
||||
use the <code>'data:'</code> uri scheme to use these images. Same as for network resources,
|
||||
<em>you will need to manually specify the dimensions of your image</em>.</p>
|
||||
<p>Sometimes, you might be getting encoded image data from a REST API call. You can use the <code>'data:'</code> uri scheme to use these images. Same as for network resources, <em>you will need to manually specify the dimensions of your image</em>.</p>
|
||||
<blockquote>
|
||||
<p>This is recommended for very small and dynamic images only, like icons in a
|
||||
list from a DB.</p>
|
||||
<p>This is recommended for very small and dynamic images only, like icons in a list from a DB.</p>
|
||||
</blockquote>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-comment">// include at least width and height!</span>
|
||||
<Image
|
||||
style={{ <span class="hljs-attr">width</span>: <span class="hljs-number">51</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">51</span>, <span class="hljs-attr">resizeMode</span>: Image.resizeMode.contain }}
|
||||
style={{
|
||||
<span class="hljs-attr">width</span>: <span class="hljs-number">51</span>,
|
||||
<span class="hljs-attr">height</span>: <span class="hljs-number">51</span>,
|
||||
<span class="hljs-attr">resizeMode</span>: Image.resizeMode.contain,
|
||||
}}
|
||||
source={{
|
||||
<span class="hljs-attr">uri</span>:
|
||||
<span class="hljs-string">"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=="</span>
|
||||
<span class="hljs-string">'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='</span>,
|
||||
}}
|
||||
/>;
|
||||
/>
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" name="cache-control-ios-only"></a><a href="#cache-control-ios-only" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Cache Control (iOS Only)</h3>
|
||||
<p>In some cases you might only want to display an image if it is already in the
|
||||
local cache, i.e. a low resolution placeholder until a higher resolution is
|
||||
available. In other cases you do not care if the image is outdated and are
|
||||
willing to display an outdated image to save bandwidth. The <code>cache</code> source
|
||||
property gives you control over how the network layer interacts with the cache.</p>
|
||||
<p>In some cases you might only want to display an image if it is already in the local cache, i.e. a low resolution placeholder until a higher resolution is available. In other cases you do not care if the image is outdated and are willing to display an outdated image to save bandwidth. The <code>cache</code> source property gives you control over how the network layer interacts with the cache.</p>
|
||||
<ul>
|
||||
<li><code>default</code>: Use the native platforms default strategy.</li>
|
||||
<li><code>reload</code>: The data for the URL will be loaded from the originating source. No
|
||||
existing cache data should be used to satisfy a URL load request.</li>
|
||||
<li><code>force-cache</code>: The existing cached data will be used to satisfy the request,
|
||||
regardless of its age or expiration date. If there is no existing data in the
|
||||
cache corresponding the request, the data is loaded from the originating
|
||||
source.</li>
|
||||
<li><code>only-if-cached</code>: The existing cache data will be used to satisfy a request,
|
||||
regardless of its age or expiration date. If there is no existing data in the
|
||||
cache corresponding to a URL load request, no attempt is made to load the data
|
||||
from the originating source, and the load is considered to have failed.</li>
|
||||
<li><code>reload</code>: The data for the URL will be loaded from the originating source. No existing cache data should be used to satisfy a URL load request.</li>
|
||||
<li><code>force-cache</code>: The existing cached data will be used to satisfy the request, regardless of its age or expiration date. If there is no existing data in the cache corresponding the request, the data is loaded from the originating source.</li>
|
||||
<li><code>only-if-cached</code>: The existing cache data will be used to satisfy a request, regardless of its age or expiration date. If there is no existing data in the cache corresponding to a URL load request, no attempt is made to load the data from the originating source, and the load is considered to have failed.</li>
|
||||
</ul>
|
||||
<pre><code class="hljs css javascript"><Image
|
||||
source={{
|
||||
<span class="hljs-attr">uri</span>: <span class="hljs-string">"https://facebook.github.io/react/logo-og.png"</span>,
|
||||
<span class="hljs-attr">cache</span>: <span class="hljs-string">"only-if-cached"</span>
|
||||
<span class="hljs-attr">uri</span>: <span class="hljs-string">'https://facebook.github.io/react/logo-og.png'</span>,
|
||||
<span class="hljs-attr">cache</span>: <span class="hljs-string">'only-if-cached'</span>,
|
||||
}}
|
||||
style={{ <span class="hljs-attr">width</span>: <span class="hljs-number">400</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">400</span> }}
|
||||
/>;
|
||||
style={{<span class="hljs-attr">width</span>: <span class="hljs-number">400</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">400</span>}}
|
||||
/>
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" name="local-filesystem-images"></a><a href="#local-filesystem-images" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Local Filesystem Images</h2>
|
||||
<p>See <a href="/react-native/docs/0.10/cameraroll.html">CameraRoll</a> for an example of using local resources that are
|
||||
outside of <code>Images.xcassets</code>.</p>
|
||||
<p>See <a href="/react-native/docs/0.10/cameraroll.html">CameraRoll</a> for an example of using local resources that are outside of <code>Images.xcassets</code>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="best-camera-roll-image"></a><a href="#best-camera-roll-image" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Best Camera Roll Image</h3>
|
||||
<p>iOS saves multiple sizes for the same image in your Camera Roll, it is very
|
||||
important to pick the one that's as close as possible for performance reasons.
|
||||
You wouldn't want to use the full quality 3264x2448 image as source when
|
||||
displaying a 200x200 thumbnail. If there's an exact match, React Native will
|
||||
pick it, otherwise it's going to use the first one that's at least 50% bigger in
|
||||
order to avoid blur when resizing from a close size. All of this is done by
|
||||
default so you don't have to worry about writing the tedious (and error prone)
|
||||
code to do it yourself.</p>
|
||||
<p>iOS saves multiple sizes for the same image in your Camera Roll, it is very important to pick the one that's as close as possible for performance reasons. You wouldn't want to use the full quality 3264x2448 image as source when displaying a 200x200 thumbnail. If there's an exact match, React Native will pick it, otherwise it's going to use the first one that's at least 50% bigger in order to avoid blur when resizing from a close size. All of this is done by default so you don't have to worry about writing the tedious (and error prone) code to do it yourself.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="why-not-automatically-size-everything"></a><a href="#why-not-automatically-size-everything" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Why Not Automatically Size Everything?</h2>
|
||||
<p><em>In the browser</em> if you don't give a size to an image, the browser is going to
|
||||
render a 0x0 element, download the image, and then render the image based with
|
||||
the correct size. The big issue with this behavior is that your UI is going to
|
||||
jump all around as images load, this makes for a very bad user experience.</p>
|
||||
<p><em>In React Native</em> this behavior is intentionally not implemented. It is more
|
||||
work for the developer to know the dimensions (or aspect ratio) of the remote
|
||||
image in advance, but we believe that it leads to a better user experience.
|
||||
Static images loaded from the app bundle via the <code>require('./my-icon.png')</code>
|
||||
syntax <em>can be automatically sized</em> because their dimensions are available
|
||||
immediately at the time of mounting.</p>
|
||||
<p><em>In the browser</em> if you don't give a size to an image, the browser is going to render a 0x0 element, download the image, and then render the image based with the correct size. The big issue with this behavior is that your UI is going to jump all around as images load, this makes for a very bad user experience.</p>
|
||||
<p><em>In React Native</em> this behavior is intentionally not implemented. It is more work for the developer to know the dimensions (or aspect ratio) of the remote image in advance, but we believe that it leads to a better user experience. Static images loaded from the app bundle via the <code>require('./my-icon.png')</code> syntax <em>can be automatically sized</em> because their dimensions are available immediately at the time of mounting.</p>
|
||||
<p>For example, the result of <code>require('./my-icon.png')</code> might be:</p>
|
||||
<pre><code class="hljs css javascript">{<span class="hljs-string">"__packager_asset"</span>:<span class="hljs-literal">true</span>,<span class="hljs-string">"uri"</span>:<span class="hljs-string">"my-icon.png"</span>,<span class="hljs-string">"width"</span>:<span class="hljs-number">591</span>,<span class="hljs-string">"height"</span>:<span class="hljs-number">573</span>}
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" name="source-as-an-object"></a><a href="#source-as-an-object" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Source as an object</h2>
|
||||
<p>In React Native, one interesting decision is that the <code>src</code> attribute is named
|
||||
<code>source</code> and doesn't take a string but an object with a <code>uri</code> attribute.</p>
|
||||
<pre><code class="hljs css javascript"><Image source={{ <span class="hljs-attr">uri</span>: <span class="hljs-string">"something.jpg"</span> }} />;
|
||||
<p>In React Native, one interesting decision is that the <code>src</code> attribute is named <code>source</code> and doesn't take a string but an object with a <code>uri</code> attribute.</p>
|
||||
<pre><code class="hljs css javascript"><Image source={{<span class="hljs-attr">uri</span>: <span class="hljs-string">'something.jpg'</span>}} />
|
||||
</code></pre>
|
||||
<p>On the infrastructure side, the reason is that it allows us to attach metadata
|
||||
to this object. For example if you are using <code>require('./my-icon.png')</code>, then we
|
||||
add information about its actual location and size (don't rely on this fact, it
|
||||
might change in the future!). This is also future proofing, for example we may
|
||||
want to support sprites at some point, instead of outputting <code>{uri: ...}</code>, we
|
||||
can output <code>{uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}}</code> and
|
||||
transparently support spriting on all the existing call sites.</p>
|
||||
<p>On the user side, this lets you annotate the object with useful attributes such
|
||||
as the dimension of the image in order to compute the size it's going to be
|
||||
displayed in. Feel free to use it as your data structure to store more
|
||||
information about your image.</p>
|
||||
<p>On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using <code>require('./my-icon.png')</code>, then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting <code>{uri: ...}</code>, we can output <code>{uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}}</code> and transparently support spriting on all the existing call sites.</p>
|
||||
<p>On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="background-image-via-nesting"></a><a href="#background-image-via-nesting" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Background Image via Nesting</h2>
|
||||
<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>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>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">ImageBackground</span> <span class="hljs-attr">source</span>=<span class="hljs-string">{...}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span>></span>Inside<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
@@ -223,8 +142,7 @@ for more insight, and create your own custom component when needed.</p>
|
||||
);
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" name="ios-border-radius-styles"></a><a href="#ios-border-radius-styles" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>iOS Border Radius Styles</h2>
|
||||
<p>Please note that the following corner specific, border radius style properties
|
||||
are currently ignored by iOS's image component:</p>
|
||||
<p>Please note that the following corner specific, border radius style properties are currently ignored by iOS's image component:</p>
|
||||
<ul>
|
||||
<li><code>borderTopLeftRadius</code></li>
|
||||
<li><code>borderTopRightRadius</code></li>
|
||||
@@ -232,12 +150,7 @@ are currently ignored by iOS's image component:</p>
|
||||
<li><code>borderBottomRightRadius</code></li>
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" name="off-thread-decoding"></a><a href="#off-thread-decoding" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Off-thread Decoding</h2>
|
||||
<p>Image decoding can take more than a frame-worth of time. This is one of the
|
||||
major sources of frame drops on the web because decoding is done in the main
|
||||
thread. In React Native, image decoding is done in a different thread. In
|
||||
practice, you already need to handle the case when the image is not downloaded
|
||||
yet, so displaying the placeholder for a few more frames while it is decoding
|
||||
does not require any code change.</p>
|
||||
<p>Image decoding can take more than a frame-worth of time. This is one of the major sources of frame drops on the web because decoding is done in the main thread. In React Native, image decoding is done in a different thread. In practice, you already need to handle the case when the image is not downloaded yet, so displaying the placeholder for a few more frames while it is decoding does not require any code change.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="navigation.html">← Navigating Between Screens</a><a class="docs-next button" href="animations.html">Animations →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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),
|
||||
|
||||
+10
-28
@@ -9,44 +9,26 @@
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="hasimagefortag"></a><a href="#hasimagefortag" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>hasImageForTag()</code></h3>
|
||||
<pre><code class="hljs css javascript">ImageStore.hasImageForTag(uri, callback)
|
||||
<pre><code class="hljs css javascript">ImageStore.hasImageForTag(uri, callback);
|
||||
</code></pre>
|
||||
<p>Check if the ImageStore contains image data for the specified URI.
|
||||
@platform ios</p>
|
||||
<p>Check if the ImageStore contains image data for the specified URI. @platform ios</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="removeimagefortag"></a><a href="#removeimagefortag" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeImageForTag()</code></h3>
|
||||
<pre><code class="hljs css javascript">ImageStore.removeImageForTag(uri)
|
||||
<pre><code class="hljs css javascript">ImageStore.removeImageForTag(uri);
|
||||
</code></pre>
|
||||
<p>Delete an image from the ImageStore. Images are stored in memory and
|
||||
must be manually removed when you are finished with them, otherwise they
|
||||
will continue to use up RAM until the app is terminated. It is safe to
|
||||
call <code>removeImageForTag()</code> without first calling <code>hasImageForTag()</code>, it
|
||||
will simply fail silently.
|
||||
@platform ios</p>
|
||||
<p>Delete an image from the ImageStore. Images are stored in memory and must be manually removed when you are finished with them, otherwise they will continue to use up RAM until the app is terminated. It is safe to call <code>removeImageForTag()</code> without first calling <code>hasImageForTag()</code>, it will simply fail silently. @platform ios</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="addimagefrombase64"></a><a href="#addimagefrombase64" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>addImageFromBase64()</code></h3>
|
||||
<pre><code class="hljs css javascript">ImageStore.addImageFromBase64(base64ImageData, success, failure)
|
||||
<pre><code class="hljs css javascript">ImageStore.addImageFromBase64(base64ImageData, success, failure);
|
||||
</code></pre>
|
||||
<p>Stores a base64-encoded image in the ImageStore, and returns a URI that
|
||||
can be used to access or display the image later. Images are stored in
|
||||
memory only, and must be manually deleted when you are finished with
|
||||
them by calling <code>removeImageForTag()</code>.</p>
|
||||
<p>Note that it is very inefficient to transfer large quantities of binary
|
||||
data between JS and native code, so you should avoid calling this more
|
||||
than necessary.
|
||||
@platform ios</p>
|
||||
<p>Stores a base64-encoded image in the ImageStore, and returns a URI that can be used to access or display the image later. Images are stored in memory only, and must be manually deleted when you are finished with them by calling <code>removeImageForTag()</code>.</p>
|
||||
<p>Note that it is very inefficient to transfer large quantities of binary data between JS and native code, so you should avoid calling this more than necessary. @platform ios</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getbase64fortag"></a><a href="#getbase64fortag" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getBase64ForTag()</code></h3>
|
||||
<pre><code class="hljs css javascript">ImageStore.getBase64ForTag(uri, success, failure)
|
||||
<pre><code class="hljs css javascript">ImageStore.getBase64ForTag(uri, success, failure);
|
||||
</code></pre>
|
||||
<p>Retrieves the base64-encoded data for an image in the ImageStore. If the
|
||||
specified URI does not match an image in the store, the failure callback
|
||||
will be called.</p>
|
||||
<p>Note that it is very inefficient to transfer large quantities of binary
|
||||
data between JS and native code, so you should avoid calling this more
|
||||
than necessary. To display an image in the ImageStore, you can just pass
|
||||
the URI to an <code><Image/></code> component; there is no need to retrieve the
|
||||
base64 data.</p>
|
||||
<p>Retrieves the base64-encoded data for an image in the ImageStore. If the specified URI does not match an image in the store, the failure callback will be called.</p>
|
||||
<p>Note that it is very inefficient to transfer large quantities of binary data between JS and native code, so you should avoid calling this more than necessary. To display an image in the ImageStore, you can just pass the URI to an <code><Image/></code> component; there is no need to retrieve the base64 data.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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),
|
||||
|
||||
@@ -27,19 +27,19 @@
|
||||
<li>Make sure the return button focuses the next field or submits the form</li>
|
||||
</ul>
|
||||
<p>Check out <a href="/react-native/docs/0.10/textinput.html"><code>TextInput</code> docs</a> for more configuration options.</p>
|
||||
<video src="img/textinput.mp4" autoplay loop width="320" height="430"></video>
|
||||
<video src="/react-native/img/textinput.mp4" autoplay loop width="320" height="430"></video>
|
||||
<p><a href="https://snack.expo.io/H1iGt2vSW">Try it on your phone</a></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="manage-layout-when-keyboard-is-visible"></a><a href="#manage-layout-when-keyboard-is-visible" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Manage layout when keyboard is visible</h2>
|
||||
<p>Software keyboard takes almost half of the screen. If you have interactive elements that can get covered by the keyboard, make sure they are still accessible by using the <a href="/react-native/docs/0.10/keyboardavoidingview.html"><code>KeyboardAvoidingView</code> component</a>.</p>
|
||||
<video src="img/keyboardavoidingview.mp4" autoplay loop width="320" height="448"></video>
|
||||
<video src="/react-native/img/keyboardavoidingview.mp4" autoplay loop width="320" height="448"></video>
|
||||
<p><a href="https://snack.expo.io/ryxRkwnrW">Try it on your phone</a></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="make-tappable-areas-larger"></a><a href="#make-tappable-areas-larger" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Make tappable areas larger</h2>
|
||||
<p>On mobile phones it's hard to be very precise when pressing buttons. Make sure all interactive elements are 44x44 or larger. One way to do this is to leave enough space for the element, <code>padding</code>, <code>minWidth</code> and <code>minHeight</code> style values can be useful for that. Alternatively, you can use <a href="/react-native/docs/0.10/touchablewithoutfeedback.html#hitslop"><code>hitSlop</code> prop</a> to increase interactive area without affecting the layout. Here's a demo:</p>
|
||||
<video src="img/hitslop.mp4" autoplay loop width="320" height="120"></video>
|
||||
<video src="/react-native/img/hitslop.mp4" autoplay loop width="320" height="120"></video>
|
||||
<p><a href="https://snack.expo.io/rJPwCt4HZ">Try it on your phone</a></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="use-android-ripple"></a><a href="#use-android-ripple" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Use Android Ripple</h2>
|
||||
<p>Android API 21+ uses the material design ripple to provide user with feedback when they touch an interactable area on the screen. React Native exposes this through the <a href="/react-native/docs/0.10/touchablenativefeedback.html"><code>TouchableNativeFeedback</code> component</a>. Using this touchable effect instead of opacity or highlight will often make your app feel much more fitting on the platform. That said, you need to be careful when using it because it doesn't work on iOS or on Android API < 21, so you will need to fallback to using one of the other Touchable components on iOS. You can use a library like <a href="https://github.com/react-community/react-native-platform-touchable">react-native-platform-touchable</a> to handle the platform differences for you.</p>
|
||||
<video src="img/ripple.mp4" autoplay loop width="320"></video>
|
||||
<video src="/react-native/img/ripple.mp4" autoplay loop width="320"></video>
|
||||
<p><a href="https://snack.expo.io/SJywqe3rZ">Try it on your phone</a></p>
|
||||
<h1><a class="anchor" aria-hidden="true" name="learn-more"></a><a href="#learn-more" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Learn more</h1>
|
||||
<p><a href="https://material.io/">Material Design</a> and <a href="https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/">Human Interface Guidelines</a> are great resources for learning more about designing for mobile platforms.</p>
|
||||
|
||||
@@ -67,10 +67,7 @@
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<p>React Native is great when you are starting a new mobile app from scratch.
|
||||
However, it also works well for adding a single view or user flow to existing
|
||||
native applications. With a few steps, you can add new React Native based
|
||||
features, screens, views, etc.</p>
|
||||
<p>React Native is great when you are starting a new mobile app from scratch. However, it also works well for adding a single view or user flow to existing native applications. With a few steps, you can add new React Native based features, screens, views, etc.</p>
|
||||
<p>The specific steps are different depending on what platform you're targeting.</p>
|
||||
<div class="toggler">
|
||||
<ul role="tablist" >
|
||||
@@ -88,50 +85,38 @@ features, screens, views, etc.</p>
|
||||
<p><block class="objc swift android" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="key-concepts"></a><a href="#key-concepts" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Key Concepts</h2>
|
||||
<p><block class="objc swift" /></p>
|
||||
<p>The keys to integrating React Native components into your iOS application are
|
||||
to:</p>
|
||||
<p>The keys to integrating React Native components into your iOS application are to:</p>
|
||||
<ol>
|
||||
<li>Set up React Native dependencies and directory structure.</li>
|
||||
<li>Understand what React Native components you will use in your app.</li>
|
||||
<li>Add these components as dependencies using CocoaPods.</li>
|
||||
<li>Develop your React Native components in JavaScript.</li>
|
||||
<li>Add a <code>RCTRootView</code> to your iOS app. This view will serve as the container
|
||||
for your React Native component.</li>
|
||||
<li>Add a <code>RCTRootView</code> to your iOS app. This view will serve as the container for your React Native component.</li>
|
||||
<li>Start the React Native server and run your native application.</li>
|
||||
<li>Verify that the React Native aspect of your application works as expected.</li>
|
||||
</ol>
|
||||
<p><block class="android" /></p>
|
||||
<p>The keys to integrating React Native components into your Android application
|
||||
are to:</p>
|
||||
<p>The keys to integrating React Native components into your Android application are to:</p>
|
||||
<ol>
|
||||
<li>Set up React Native dependencies and directory structure.</li>
|
||||
<li>Develop your React Native components in JavaScript.</li>
|
||||
<li>Add a <code>ReactRootView</code> to your Android app. This view will serve as the
|
||||
container for your React Native component.</li>
|
||||
<li>Add a <code>ReactRootView</code> to your Android app. This view will serve as the container for your React Native component.</li>
|
||||
<li>Start the React Native server and run your native application.</li>
|
||||
<li>Verify that the React Native aspect of your application works as expected.</li>
|
||||
</ol>
|
||||
<p><block class="objc swift android" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="prerequisites"></a><a href="#prerequisites" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Prerequisites</h2>
|
||||
<p><block class="objc swift" /></p>
|
||||
<p>Follow the instructions for building apps with native code from the
|
||||
<a href="/react-native/docs/0.10/getting-started.html">Getting Started guide</a> to configure your development
|
||||
environment for building React Native apps for iOS.</p>
|
||||
<p>Follow the instructions for building apps with native code from the <a href="/react-native/docs/0.10/getting-started.html">Getting Started guide</a> to configure your development environment for building React Native apps for iOS.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="1-set-up-directory-structure"></a><a href="#1-set-up-directory-structure" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Set up directory structure</h3>
|
||||
<p>To ensure a smooth experience, create a new folder for your integrated React
|
||||
Native project, then copy your existing iOS project to a <code>/ios</code> subfolder.</p>
|
||||
<p>To ensure a smooth experience, create a new folder for your integrated React Native project, then copy your existing iOS project to a <code>/ios</code> subfolder.</p>
|
||||
<p><block class="android" /></p>
|
||||
<p>Follow the instructions for building apps with native code from the
|
||||
<a href="/react-native/docs/0.10/getting-started.html">Getting Started guide</a> to configure your development
|
||||
environment for building React Native apps for Android.</p>
|
||||
<p>Follow the instructions for building apps with native code from the <a href="/react-native/docs/0.10/getting-started.html">Getting Started guide</a> to configure your development environment for building React Native apps for Android.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="1-set-up-directory-structure"></a><a href="#1-set-up-directory-structure" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Set up directory structure</h3>
|
||||
<p>To ensure a smooth experience, create a new folder for your integrated React
|
||||
Native project, then copy your existing Android project to a <code>/android</code>
|
||||
subfolder.</p>
|
||||
<p>To ensure a smooth experience, create a new folder for your integrated React Native project, then copy your existing Android project to a <code>/android</code> subfolder.</p>
|
||||
<p><block class="objc swift android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="2-install-javascript-dependencies"></a><a href="#2-install-javascript-dependencies" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Install JavaScript dependencies</h3>
|
||||
<p>Go to the root directory for your project and create a new <code>package.json</code> file
|
||||
with the following contents:</p>
|
||||
<p>Go to the root directory for your project and create a new <code>package.json</code> file with the following contents:</p>
|
||||
<pre><code class="hljs">{
|
||||
<span class="hljs-attr">"name"</span>: <span class="hljs-string">"MyReactNativeApp"</span>,
|
||||
<span class="hljs-attr">"version"</span>: <span class="hljs-string">"0.0.1"</span>,
|
||||
@@ -141,64 +126,37 @@ with the following contents:</p>
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<p>Next, you will install the <code>react</code> and <code>react-native</code> packages. Open a terminal
|
||||
or command prompt, then navigate to the root directory for your project and type
|
||||
the following commands:</p>
|
||||
<p>Next, you will install the <code>react</code> and <code>react-native</code> packages. Open a terminal or command prompt, then navigate to the root directory for your project and type the following commands:</p>
|
||||
<pre><code class="hljs">$ npm install --save react@<span class="hljs-number">16.0</span><span class="hljs-number">.0</span>-beta<span class="hljs-number">.5</span> react-native
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>Make sure you use the same React version as specified in the
|
||||
<a href="https://github.com/facebook/react-native/blob/master/package.json">React Native package.json</a>
|
||||
for your release. This will only be necessary as long as React Native depends
|
||||
on a pre-release version of React.</p>
|
||||
<p>Make sure you use the same React version as specified in the <a href="https://github.com/facebook/react-native/blob/master/package.json">React Native package.json</a> for your release. This will only be necessary as long as React Native depends on a pre-release version of React.</p>
|
||||
</blockquote>
|
||||
<p>This will create a new <code>/node_modules</code> folder in your project's root directory.
|
||||
This folder stores all the JavaScript dependencies required to build your
|
||||
project.</p>
|
||||
<p>This will create a new <code>/node_modules</code> folder in your project's root directory. This folder stores all the JavaScript dependencies required to build your project.</p>
|
||||
<p><block class="objc swift" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="3-install-cocoapods"></a><a href="#3-install-cocoapods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Install CocoaPods</h3>
|
||||
<p><a href="http://cocoapods.org">CocoaPods</a> is a package management tool for iOS and macOS
|
||||
development. We use it to add the actual React Native framework code locally
|
||||
into your current project.</p>
|
||||
<p><a href="http://cocoapods.org">CocoaPods</a> is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.</p>
|
||||
<p>We recommend installing CocoaPods using <a href="http://brew.sh/">Homebrew</a>.</p>
|
||||
<pre><code class="hljs">$ <span class="hljs-keyword">brew </span><span class="hljs-keyword">install </span>cocoapods
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>It is technically possible not to use CocoaPods, but that would require manual
|
||||
library and linker additions that would overly complicate this process.</p>
|
||||
<p>It is technically possible not to use CocoaPods, but that would require manual library and linker additions that would overly complicate this process.</p>
|
||||
</blockquote>
|
||||
<p><block class="objc swift" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="adding-react-native-to-your-app"></a><a href="#adding-react-native-to-your-app" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Adding React Native to your app</h2>
|
||||
<p><block class="objc" /></p>
|
||||
<p>Assume the <a href="https://github.com/JoelMarcey/iOS-2048">app for integration</a> is a
|
||||
<a href="https://en.wikipedia.org/wiki/2048_%28video_game%29">2048</a> game. Here is what
|
||||
the main menu of the native application looks like without React Native.</p>
|
||||
<p>Assume the <a href="https://github.com/JoelMarcey/iOS-2048">app for integration</a> is a <a href="https://en.wikipedia.org/wiki/2048_%28video_game%29">2048</a> game. Here is what the main menu of the native application looks like without React Native.</p>
|
||||
<p><block class="swift" /></p>
|
||||
<p>Assume the <a href="https://github.com/JoelMarcey/swift-2048">app for integration</a> is a
|
||||
<a href="https://en.wikipedia.org/wiki/2048_%28video_game%29">2048</a> game. Here is what
|
||||
the main menu of the native application looks like without React Native.</p>
|
||||
<p>Assume the <a href="https://github.com/JoelMarcey/swift-2048">app for integration</a> is a <a href="https://en.wikipedia.org/wiki/2048_%28video_game%29">2048</a> game. Here is what the main menu of the native application looks like without React Native.</p>
|
||||
<p><block class="objc swift" /></p>
|
||||
<p><img src="/react-native/docs/assets/react-native-existing-app-integration-ios-before.png" alt="Before RN Integration"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="configuring-cocoapods-dependencies"></a><a href="#configuring-cocoapods-dependencies" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Configuring CocoaPods dependencies</h3>
|
||||
<p>Before you integrate React Native into your application, you will want to decide
|
||||
what parts of the React Native framework you would like to integrate. We will
|
||||
use CocoaPods to specify which of these "subspecs" your app will depend on.</p>
|
||||
<p>The list of supported <code>subspec</code>s is available in
|
||||
<a href="https://github.com/facebook/react-native/blob/master/React.podspec"><code>/node_modules/react-native/React.podspec</code></a>.
|
||||
They are generally named by functionality. For example, you will generally
|
||||
always want the <code>Core</code> <code>subspec</code>. That will get you the <code>AppRegistry</code>,
|
||||
<code>StyleSheet</code>, <code>View</code> and other core React Native libraries. If you want to add
|
||||
the React Native <code>Text</code> library (e.g., for <code><Text></code> elements), then you will
|
||||
need the <code>RCTText</code> <code>subspec</code>. If you want the <code>Image</code> library (e.g., for
|
||||
<code><Image></code> elements), then you will need the <code>RCTImage</code> <code>subspec</code>.</p>
|
||||
<p>You can specify which <code>subspec</code>s your app will depend on in a <code>Podfile</code> file.
|
||||
The easiest way to create a <code>Podfile</code> is by running the CocoaPods <code>init</code> command
|
||||
in the <code>/ios</code> subfolder of your project:</p>
|
||||
<p>Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.</p>
|
||||
<p>The list of supported <code>subspec</code>s is available in <a href="https://github.com/facebook/react-native/blob/master/React.podspec"><code>/node_modules/react-native/React.podspec</code></a>. They are generally named by functionality. For example, you will generally always want the <code>Core</code> <code>subspec</code>. That will get you the <code>AppRegistry</code>, <code>StyleSheet</code>, <code>View</code> and other core React Native libraries. If you want to add the React Native <code>Text</code> library (e.g., for <code><Text></code> elements), then you will need the <code>RCTText</code> <code>subspec</code>. If you want the <code>Image</code> library (e.g., for <code><Image></code> elements), then you will need the <code>RCTImage</code> <code>subspec</code>.</p>
|
||||
<p>You can specify which <code>subspec</code>s your app will depend on in a <code>Podfile</code> file. The easiest way to create a <code>Podfile</code> is by running the CocoaPods <code>init</code> command in the <code>/ios</code> subfolder of your project:</p>
|
||||
<pre><code class="hljs"><span class="hljs-meta">$</span><span class="bash"> pod init</span>
|
||||
</code></pre>
|
||||
<p>The <code>Podfile</code> will contain a boilerplate setup that you will tweak for your
|
||||
integration purposes. In the end, <code>Podfile</code> should look something similar to
|
||||
this:</p>
|
||||
<p>The <code>Podfile</code> will contain a boilerplate setup that you will tweak for your integration purposes. In the end, <code>Podfile</code> should look something similar to this:</p>
|
||||
<p><block class="objc" /></p>
|
||||
<pre><code class="hljs"><span class="hljs-comment"># The target name is most likely the name of your project.</span>
|
||||
target <span class="hljs-string">'NumberTileGame'</span> <span class="hljs-keyword">do</span>
|
||||
@@ -255,8 +213,7 @@ target <span class="hljs-string">'swift-2048'</span> <span class="hljs-keyword">
|
||||
<span class="hljs-keyword">end</span>
|
||||
</code></pre>
|
||||
<p><block class="objc swift" /></p>
|
||||
<p>After you have created your <code>Podfile</code>, you are ready to install the React Native
|
||||
pod.</p>
|
||||
<p>After you have created your <code>Podfile</code>, you are ready to install the React Native pod.</p>
|
||||
<pre><code class="hljs"><span class="hljs-meta">$</span><span class="bash"> pod install</span>
|
||||
</code></pre>
|
||||
<p>You should see output such as:</p>
|
||||
@@ -271,37 +228,27 @@ Pod installation complete! There are 3 dependencies <span class="hljs-keyword">f
|
||||
</code></pre>
|
||||
<p><block class="swift" /></p>
|
||||
<blockquote>
|
||||
<p>If you get a warning such as "<em>The <code>swift-2048 [Debug]</code> target overrides the
|
||||
<code>FRAMEWORK_SEARCH_PATHS</code> build setting defined in <code>Pods/Target Support Files/Pods-swift-2048/Pods-swift-2048.debug.xcconfig</code>. This can lead to
|
||||
problems with the CocoaPods installation</em>", then make sure the <code>Framework Search Paths</code> in <code>Build Settings</code> for both <code>Debug</code> and <code>Release</code> only contain
|
||||
<code>$(inherited)</code>.</p>
|
||||
<p>If you get a warning such as "<em>The <code>swift-2048 [Debug]</code> target overrides the <code>FRAMEWORK_SEARCH_PATHS</code> build setting defined in <code>Pods/Target Support Files/Pods-swift-2048/Pods-swift-2048.debug.xcconfig</code>. This can lead to problems with the CocoaPods installation</em>", then make sure the <code>Framework Search Paths</code> in <code>Build Settings</code> for both <code>Debug</code> and <code>Release</code> only contain <code>$(inherited)</code>.</p>
|
||||
</blockquote>
|
||||
<p><block class="objc swift" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="code-integration"></a><a href="#code-integration" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 integration</h3>
|
||||
<p>Now we will actually modify the native iOS application to integrate React
|
||||
Native. For our 2048 sample app, we will add a "High Score" screen in React
|
||||
Native.</p>
|
||||
<p>Now we will actually modify the native iOS application to integrate React Native. For our 2048 sample app, we will add a "High Score" screen in React Native.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="the-react-native-component"></a><a href="#the-react-native-component" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The React Native component</h4>
|
||||
<p>The first bit of code we will write is the actual React Native code for the new
|
||||
"High Score" screen that will be integrated into our application.</p>
|
||||
<p>The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="1-create-a-indexjs-file"></a><a href="#1-create-a-indexjs-file" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Create a <code>index.js</code> file</h5>
|
||||
<p>First, create an empty <code>index.js</code> file in the root of your React Native project.</p>
|
||||
<p><code>index.js</code> is the starting point for React Native applications, and it is always
|
||||
required. It can be a small file that <code>require</code>s other file that are part of
|
||||
your React Native component or application, or it can contain all the code that
|
||||
is needed for it. In our case, we will just put everything in <code>index.js</code>.</p>
|
||||
<p><code>index.js</code> is the starting point for React Native applications, and it is always required. It can be a small file that <code>require</code>s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will just put everything in <code>index.js</code>.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-add-your-react-native-code"></a><a href="#2-add-your-react-native-code" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Add your React Native code</h5>
|
||||
<p>In your <code>index.js</code>, create your component. In our sample here, we will add
|
||||
simple <code><Text></code> component within a styled <code><View></code></p>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> { AppRegistry, StyleSheet, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
<p>In your <code>index.js</code>, create your component. In our sample here, we will add simple <code><Text></code> component within a styled <code><View></code></p>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> {AppRegistry, StyleSheet, Text, View} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">RNHighScores</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
|
||||
render() {
|
||||
<span class="hljs-keyword">var</span> contents = <span class="hljs-keyword">this</span>.props[<span class="hljs-string">"scores"</span>].map(<span class="hljs-function"><span class="hljs-params">score</span> =></span> (
|
||||
<span class="hljs-keyword">var</span> contents = <span class="hljs-keyword">this</span>.props[<span class="hljs-string">'scores'</span>].map(<span class="hljs-function"><span class="hljs-params">score</span> =></span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{score.name}</span>></span>
|
||||
{score.name}:{score.value}
|
||||
{"\n"}
|
||||
{'\n'}
|
||||
<span class="hljs-tag"></<span class="hljs-name">Text</span>></span></span>
|
||||
));
|
||||
<span class="hljs-keyword">return</span> (
|
||||
@@ -316,63 +263,44 @@ simple <code><Text></code> component within a styled <code><View></c
|
||||
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
|
||||
<span class="hljs-attr">container</span>: {
|
||||
<span class="hljs-attr">flex</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-attr">justifyContent</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">"#FFFFFF"</span>
|
||||
<span class="hljs-attr">justifyContent</span>: <span class="hljs-string">'center'</span>,
|
||||
<span class="hljs-attr">alignItems</span>: <span class="hljs-string">'center'</span>,
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'#FFFFFF'</span>,
|
||||
},
|
||||
<span class="hljs-attr">highScoresTitle</span>: {
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">20</span>,
|
||||
<span class="hljs-attr">textAlign</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">margin</span>: <span class="hljs-number">10</span>
|
||||
<span class="hljs-attr">textAlign</span>: <span class="hljs-string">'center'</span>,
|
||||
<span class="hljs-attr">margin</span>: <span class="hljs-number">10</span>,
|
||||
},
|
||||
<span class="hljs-attr">scores</span>: {
|
||||
<span class="hljs-attr">textAlign</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">"#333333"</span>,
|
||||
<span class="hljs-attr">marginBottom</span>: <span class="hljs-number">5</span>
|
||||
}
|
||||
<span class="hljs-attr">textAlign</span>: <span class="hljs-string">'center'</span>,
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'#333333'</span>,
|
||||
<span class="hljs-attr">marginBottom</span>: <span class="hljs-number">5</span>,
|
||||
},
|
||||
});
|
||||
|
||||
<span class="hljs-comment">// Module name</span>
|
||||
AppRegistry.registerComponent(<span class="hljs-string">"RNHighScores"</span>, () => RNHighScores);
|
||||
AppRegistry.registerComponent(<span class="hljs-string">'RNHighScores'</span>, () => RNHighScores);
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p><code>RNHighScores</code> is the name of your module that will be used when you add a
|
||||
view to React Native from within your iOS application.</p>
|
||||
<p><code>RNHighScores</code> is the name of your module that will be used when you add a view to React Native from within your iOS application.</p>
|
||||
</blockquote>
|
||||
<h4><a class="anchor" aria-hidden="true" name="the-magic-rctrootview"></a><a href="#the-magic-rctrootview" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The Magic: <code>RCTRootView</code></h4>
|
||||
<p>Now that your React Native component is created via <code>index.js</code>, you need to add
|
||||
that component to a new or existing <code>ViewController</code>. The easiest path to take
|
||||
is to optionally create an event path to your component and then add that
|
||||
component to an existing <code>ViewController</code>.</p>
|
||||
<p>We will tie our React Native component with a new native view in the
|
||||
<code>ViewController</code> that will actually host it called <code>RCTRootView</code> .</p>
|
||||
<p>Now that your React Native component is created via <code>index.js</code>, you need to add that component to a new or existing <code>ViewController</code>. The easiest path to take is to optionally create an event path to your component and then add that component to an existing <code>ViewController</code>.</p>
|
||||
<p>We will tie our React Native component with a new native view in the <code>ViewController</code> that will actually host it called <code>RCTRootView</code> .</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="1-create-an-event-path"></a><a href="#1-create-an-event-path" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Create an Event Path</h5>
|
||||
<p>You can add a new link on the main game menu to go to the "High Score" React
|
||||
Native page.</p>
|
||||
<p>You can add a new link on the main game menu to go to the "High Score" React Native page.</p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-link.png" alt="Event Path"></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-event-handler"></a><a href="#2-event-handler" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Event Handler</h5>
|
||||
<p>We will now add an event handler from the menu link. A method will be added to
|
||||
the main <code>ViewController</code> of your application. This is where <code>RCTRootView</code> comes
|
||||
into play.</p>
|
||||
<p>When you build a React Native application, you use the React Native packager to
|
||||
create an <code>index.bundle</code> that will be served by the React Native server. Inside
|
||||
<code>index.bundle</code> will be our <code>RNHighScore</code> module. So, we need to point our
|
||||
<code>RCTRootView</code> to the location of the <code>index.bundle</code> resource (via <code>NSURL</code>) and
|
||||
tie it to the module.</p>
|
||||
<p>We will, for debugging purposes, log that the event handler was invoked. Then,
|
||||
we will create a string with the location of our React Native code that exists
|
||||
inside the <code>index.bundle</code>. Finally, we will create the main <code>RCTRootView</code>.
|
||||
Notice how we provide <code>RNHighScores</code> as the <code>moduleName</code> that we created
|
||||
<a href="#the-react-native-component">above</a> when writing the code for our React Native
|
||||
component.</p>
|
||||
<p>We will now add an event handler from the menu link. A method will be added to the main <code>ViewController</code> of your application. This is where <code>RCTRootView</code> comes into play.</p>
|
||||
<p>When you build a React Native application, you use the React Native packager to create an <code>index.bundle</code> that will be served by the React Native server. Inside <code>index.bundle</code> will be our <code>RNHighScore</code> module. So, we need to point our <code>RCTRootView</code> to the location of the <code>index.bundle</code> resource (via <code>NSURL</code>) and tie it to the module.</p>
|
||||
<p>We will, for debugging purposes, log that the event handler was invoked. Then, we will create a string with the location of our React Native code that exists inside the <code>index.bundle</code>. Finally, we will create the main <code>RCTRootView</code>. Notice how we provide <code>RNHighScores</code> as the <code>moduleName</code> that we created <a href="#the-react-native-component">above</a> when writing the code for our React Native component.</p>
|
||||
<p><block class="objc" /></p>
|
||||
<p>First <code>import</code> the <code>RCTRootView</code> header.</p>
|
||||
<pre><code class="hljs css objectivec"><span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTRootView.h></span></span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>The <code>initialProperties</code> are here for illustration purposes so we have some
|
||||
data for our high score screen. In our React Native component, we will use
|
||||
<code>this.props</code> to get access to that data.</p>
|
||||
<p>The <code>initialProperties</code> are here for illustration purposes so we have some data for our high score screen. In our React Native component, we will use <code>this.props</code> to get access to that data.</p>
|
||||
</blockquote>
|
||||
<pre><code class="hljs css objectivec">- (<span class="hljs-keyword">IBAction</span>)highScoreButtonPressed:(<span class="hljs-keyword">id</span>)sender {
|
||||
<span class="hljs-built_in">NSLog</span>(<span class="hljs-string">@"High Score Button Pressed"</span>);
|
||||
@@ -401,22 +329,14 @@ data for our high score screen. In our React Native component, we will use
|
||||
}
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>Note that <code>RCTRootView initWithURL</code> starts up a new JSC VM. To save resources
|
||||
and simplify the communication between RN views in different parts of your
|
||||
native app, you can have multiple views powered by React Native that are
|
||||
associated with a single JS runtime. To do that, instead of using
|
||||
<code>[RCTRootView alloc] initWithURL</code>, use
|
||||
<a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93"><code>RCTBridge initWithBundleURL</code></a>
|
||||
to create a bridge and then use <code>RCTRootView initWithBridge</code>.</p>
|
||||
<p>Note that <code>RCTRootView initWithURL</code> starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using <code>[RCTRootView alloc] initWithURL</code>, use <a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93"><code>RCTBridge initWithBundleURL</code></a> to create a bridge and then use <code>RCTRootView initWithBridge</code>.</p>
|
||||
</blockquote>
|
||||
<p><block class="swift" /></p>
|
||||
<p>First <code>import</code> the <code>React</code> library.</p>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>The <code>initialProperties</code> are here for illustration purposes so we have some
|
||||
data for our high score screen. In our React Native component, we will use
|
||||
<code>this.props</code> to get access to that data.</p>
|
||||
<p>The <code>initialProperties</code> are here for illustration purposes so we have some data for our high score screen. In our React Native component, we will use <code>this.props</code> to get access to that data.</p>
|
||||
</blockquote>
|
||||
<pre><code class="hljs css swift"><span class="hljs-meta">@IBAction</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">highScoreButtonTapped</span><span class="hljs-params">(sender : UIButton)</span></span> {
|
||||
<span class="hljs-type">NSLog</span>(<span class="hljs-string">"Hello"</span>)
|
||||
@@ -440,43 +360,27 @@ data for our high score screen. In our React Native component, we will use
|
||||
}
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>Note that <code>RCTRootView bundleURL</code> starts up a new JSC VM. To save resources
|
||||
and simplify the communication between RN views in different parts of your
|
||||
native app, you can have multiple views powered by React Native that are
|
||||
associated with a single JS runtime. To do that, instead of using <code>RCTRootView bundleURL</code>, use
|
||||
<a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L89"><code>RCTBridge initWithBundleURL</code></a>
|
||||
to create a bridge and then use <code>RCTRootView initWithBridge</code>.</p>
|
||||
<p>Note that <code>RCTRootView bundleURL</code> starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using <code>RCTRootView bundleURL</code>, use <a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L89"><code>RCTBridge initWithBundleURL</code></a> to create a bridge and then use <code>RCTRootView initWithBridge</code>.</p>
|
||||
</blockquote>
|
||||
<p><block class="objc" /></p>
|
||||
<blockquote>
|
||||
<p>When moving your app to production, the <code>NSURL</code> can point to a pre-bundled
|
||||
file on disk via something like <code>[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];</code>. You can use the <code>react-native-xcode.sh</code> script
|
||||
in <code>node_modules/react-native/scripts/</code> to generate that pre-bundled file.</p>
|
||||
<p>When moving your app to production, the <code>NSURL</code> can point to a pre-bundled file on disk via something like <code>[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];</code>. You can use the <code>react-native-xcode.sh</code> script in <code>node_modules/react-native/scripts/</code> to generate that pre-bundled file.</p>
|
||||
</blockquote>
|
||||
<p><block class="swift" /></p>
|
||||
<blockquote>
|
||||
<p>When moving your app to production, the <code>NSURL</code> can point to a pre-bundled
|
||||
file on disk via something like <code>let mainBundle = NSBundle(URLForResource: "main" withExtension:"jsbundle")</code>. You can use the <code>react-native-xcode.sh</code>
|
||||
script in <code>node_modules/react-native/scripts/</code> to generate that pre-bundled
|
||||
file.</p>
|
||||
<p>When moving your app to production, the <code>NSURL</code> can point to a pre-bundled file on disk via something like <code>let mainBundle = NSBundle(URLForResource: "main" withExtension:"jsbundle")</code>. You can use the <code>react-native-xcode.sh</code> script in <code>node_modules/react-native/scripts/</code> to generate that pre-bundled file.</p>
|
||||
</blockquote>
|
||||
<p><block class="objc swift" /></p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="3-wire-up"></a><a href="#3-wire-up" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Wire Up</h5>
|
||||
<p>Wire up the new link in the main menu to the newly added event handler method.</p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-wire-up.png" alt="Event Path"></p>
|
||||
<blockquote>
|
||||
<p>One of the easier ways to do this is to open the view in the storyboard and
|
||||
right click on the new link. Select something such as the <code>Touch Up Inside</code>
|
||||
event, drag that to the storyboard and then select the created method from the
|
||||
list provided.</p>
|
||||
<p>One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the <code>Touch Up Inside</code> event, drag that to the storyboard and then select the created method from the list provided.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" name="test-your-integration"></a><a href="#test-your-integration" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Test your integration</h3>
|
||||
<p>You have now done all the basic steps to integrate React Native with your
|
||||
current application. Now we will start the React Native packager to build the
|
||||
<code>index.bundle</code> package and the server running on <code>localhost</code> to serve it.</p>
|
||||
<p>You have now done all the basic steps to integrate React Native with your current application. Now we will start the React Native packager to build the <code>index.bundle</code> package and the server running on <code>localhost</code> to serve it.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="1-add-app-transport-security-exception"></a><a href="#1-add-app-transport-security-exception" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Add App Transport Security exception</h5>
|
||||
<p>Apple has blocked implicit cleartext HTTP resource loading. So we need to add
|
||||
the following our project's <code>Info.plist</code> (or equivalent) file.</p>
|
||||
<p>Apple has blocked implicit cleartext HTTP resource loading. So we need to add the following our project's <code>Info.plist</code> (or equivalent) file.</p>
|
||||
<pre><code class="hljs css xml"><span class="hljs-tag"><<span class="hljs-name">key</span>></span>NSAppTransportSecurity<span class="hljs-tag"></<span class="hljs-name">key</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">dict</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">key</span>></span>NSExceptionDomains<span class="hljs-tag"></<span class="hljs-name">key</span>></span>
|
||||
@@ -490,44 +394,30 @@ the following our project's <code>Info.plist</code> (or equivalent) file.</p>
|
||||
<span class="hljs-tag"></<span class="hljs-name">dict</span>></span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>App Transport Security is good for your users. Make sure to re-enable it prior
|
||||
to releasing your app for production.</p>
|
||||
<p>App Transport Security is good for your users. Make sure to re-enable it prior to releasing your app for production.</p>
|
||||
</blockquote>
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-run-the-packager"></a><a href="#2-run-the-packager" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Run the packager</h5>
|
||||
<p>To run your app, you need to first start the development server. To do this,
|
||||
simply run the following command in the root directory of your React Native
|
||||
project:</p>
|
||||
<p>To run your app, you need to first start the development server. To do this, simply run the following command in the root directory of your React Native project:</p>
|
||||
<pre><code class="hljs"><span class="hljs-meta">$</span><span class="bash"> npm start</span>
|
||||
</code></pre>
|
||||
<h5><a class="anchor" aria-hidden="true" name="3-run-the-app"></a><a href="#3-run-the-app" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Run the app</h5>
|
||||
<p>If you are using Xcode or your favorite editor, build and run your native iOS
|
||||
application as normal. Alternatively, you can run the app from the command line
|
||||
using:</p>
|
||||
<p>If you are using Xcode or your favorite editor, build and run your native iOS application as normal. Alternatively, you can run the app from the command line using:</p>
|
||||
<pre><code class="hljs"><span class="hljs-comment"># From the root of your project</span>
|
||||
$ react-native <span class="hljs-keyword">run</span><span class="bash">-ios
|
||||
</span></code></pre>
|
||||
<p>In our sample application, you should see the link to the "High Scores" and then
|
||||
when you click on that you will see the rendering of your React Native
|
||||
component.</p>
|
||||
<p>In our sample application, you should see the link to the "High Scores" and then when you click on that you will see the rendering of your React Native component.</p>
|
||||
<p>Here is the <em>native</em> application home screen:</p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-home-screen.png" alt="Home Screen"></p>
|
||||
<p>Here is the <em>React Native</em> high score screen:</p>
|
||||
<p><img src="/react-native/docs/assets/react-native-add-react-native-integration-example-high-scores.png" alt="High Scores"></p>
|
||||
<blockquote>
|
||||
<p>If you are getting module resolution issues when running your application
|
||||
please see
|
||||
<a href="https://github.com/facebook/react-native/issues/4968">this GitHub issue</a> for
|
||||
information and possible resolution.
|
||||
<a href="https://github.com/facebook/react-native/issues/4968#issuecomment-220941717">This comment</a>
|
||||
seemed to be the latest possible resolution.</p>
|
||||
<p>If you are getting module resolution issues when running your application please see <a href="https://github.com/facebook/react-native/issues/4968">this GitHub issue</a> for information and possible resolution. <a href="https://github.com/facebook/react-native/issues/4968#issuecomment-220941717">This comment</a> seemed to be the latest possible resolution.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" name="see-the-code"></a><a href="#see-the-code" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>See the Code</h3>
|
||||
<p><block class="objc" /></p>
|
||||
<p>You can examine the code that added the React Native screen to our sample app on
|
||||
<a href="https://github.com/JoelMarcey/iOS-2048/commit/9ae70c7cdd53eb59f5f7c7daab382b0300ed3585">GitHub</a>.</p>
|
||||
<p>You can examine the code that added the React Native screen to our sample app on <a href="https://github.com/JoelMarcey/iOS-2048/commit/9ae70c7cdd53eb59f5f7c7daab382b0300ed3585">GitHub</a>.</p>
|
||||
<p><block class="swift" /></p>
|
||||
<p>You can examine the code that added the React Native screen to our sample app on
|
||||
<a href="https://github.com/JoelMarcey/swift-2048/commit/13272a31ee6dd46dc68b1dcf4eaf16c1a10f5229">GitHub</a>.</p>
|
||||
<p>You can examine the code that added the React Native screen to our sample app on <a href="https://github.com/JoelMarcey/swift-2048/commit/13272a31ee6dd46dc68b1dcf4eaf16c1a10f5229">GitHub</a>.</p>
|
||||
<p><block class="android" /></p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="adding-react-native-to-your-app"></a><a href="#adding-react-native-to-your-app" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Adding React Native to your app</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="configuring-maven"></a><a href="#configuring-maven" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Configuring maven</h3>
|
||||
@@ -539,12 +429,9 @@ seemed to be the latest possible resolution.</p>
|
||||
}
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>If you want to ensure that you are always using a specific React Native
|
||||
version in your native build, replace <code>+</code> with an actual React Native version
|
||||
you've downloaded from <code>npm</code>.</p>
|
||||
<p>If you want to ensure that you are always using a specific React Native version in your native build, replace <code>+</code> with an actual React Native version you've downloaded from <code>npm</code>.</p>
|
||||
</blockquote>
|
||||
<p>Add an entry for the local React Native maven directory to <code>build.gradle</code>. Be
|
||||
sure to add it to the "allprojects" block:</p>
|
||||
<p>Add an entry for the local React Native maven directory to <code>build.gradle</code>. Be sure to add it to the "allprojects" block:</p>
|
||||
<pre><code class="hljs">allprojects {
|
||||
repositories {
|
||||
...
|
||||
@@ -557,37 +444,27 @@ sure to add it to the "allprojects" block:</p>
|
||||
}
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>Make sure that the path is correct! You shouldn’t run into any “Failed to
|
||||
resolve: com.facebook.react:react-native:0.x.x" errors after running Gradle
|
||||
sync in Android Studio.</p>
|
||||
<p>Make sure that the path is correct! You shouldn’t run into any “Failed to resolve: com.facebook.react:react-native:0.x.x" errors after running Gradle sync in Android Studio.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" name="configuring-permissions"></a><a href="#configuring-permissions" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Configuring permissions</h3>
|
||||
<p>Next, make sure you have the Internet permission in your <code>AndroidManifest.xml</code>:</p>
|
||||
<pre><code class="hljs"><uses-permission android:name="android.permission.INTERNET" />
|
||||
</code></pre>
|
||||
<p>If you need to access to the <code>DevSettingsActivity</code> add to your
|
||||
<code>AndroidManifest.xml</code>:</p>
|
||||
<p>If you need to access to the <code>DevSettingsActivity</code> add to your <code>AndroidManifest.xml</code>:</p>
|
||||
<pre><code class="hljs"><activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
|
||||
</code></pre>
|
||||
<p>This is only really used in dev mode when reloading JavaScript from the
|
||||
development server, so you can strip this in release builds if you need to.</p>
|
||||
<p>This is only really used in dev mode when reloading JavaScript from the development server, so you can strip this in release builds if you need to.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="code-integration"></a><a href="#code-integration" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 integration</h3>
|
||||
<p>Now we will actually modify the native Android application to integrate React
|
||||
Native.</p>
|
||||
<p>Now we will actually modify the native Android application to integrate React Native.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" name="the-react-native-component"></a><a href="#the-react-native-component" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The React Native component</h4>
|
||||
<p>The first bit of code we will write is the actual React Native code for the new
|
||||
"High Score" screen that will be integrated into our application.</p>
|
||||
<p>The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="1-create-a-indexjs-file"></a><a href="#1-create-a-indexjs-file" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Create a <code>index.js</code> file</h5>
|
||||
<p>First, create an empty <code>index.js</code> file in the root of your React Native project.</p>
|
||||
<p><code>index.js</code> is the starting point for React Native applications, and it is always
|
||||
required. It can be a small file that <code>require</code>s other file that are part of
|
||||
your React Native component or application, or it can contain all the code that
|
||||
is needed for it. In our case, we will just put everything in <code>index.js</code>.</p>
|
||||
<p><code>index.js</code> is the starting point for React Native applications, and it is always required. It can be a small file that <code>require</code>s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will just put everything in <code>index.js</code>.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-add-your-react-native-code"></a><a href="#2-add-your-react-native-code" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Add your React Native code</h5>
|
||||
<p>In your <code>index.js</code>, create your component. In our sample here, we will add
|
||||
simple <code><Text></code> component within a styled <code><View></code>:</p>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> { AppRegistry, StyleSheet, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
<p>In your <code>index.js</code>, create your component. In our sample here, we will add simple <code><Text></code> component within a styled <code><View></code>:</p>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> {AppRegistry, StyleSheet, Text, View} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HelloWorld</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
|
||||
render() {
|
||||
@@ -601,27 +478,19 @@ simple <code><Text></code> component within a styled <code><View></c
|
||||
<span class="hljs-keyword">var</span> styles = StyleSheet.create({
|
||||
<span class="hljs-attr">container</span>: {
|
||||
<span class="hljs-attr">flex</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-attr">justifyContent</span>: <span class="hljs-string">"center"</span>
|
||||
<span class="hljs-attr">justifyContent</span>: <span class="hljs-string">'center'</span>,
|
||||
},
|
||||
<span class="hljs-attr">hello</span>: {
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">20</span>,
|
||||
<span class="hljs-attr">textAlign</span>: <span class="hljs-string">"center"</span>,
|
||||
<span class="hljs-attr">margin</span>: <span class="hljs-number">10</span>
|
||||
}
|
||||
<span class="hljs-attr">textAlign</span>: <span class="hljs-string">'center'</span>,
|
||||
<span class="hljs-attr">margin</span>: <span class="hljs-number">10</span>,
|
||||
},
|
||||
});
|
||||
|
||||
AppRegistry.registerComponent(<span class="hljs-string">"MyReactNativeApp"</span>, () => HelloWorld);
|
||||
AppRegistry.registerComponent(<span class="hljs-string">'MyReactNativeApp'</span>, () => HelloWorld);
|
||||
</code></pre>
|
||||
<h5><a class="anchor" aria-hidden="true" name="3-configure-permissions-for-development-error-overlay"></a><a href="#3-configure-permissions-for-development-error-overlay" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Configure permissions for development error overlay</h5>
|
||||
<p>If your app is targeting the Android <code>API level 23</code> or greater, make sure you
|
||||
have the <code>overlay</code> permission enabled for the development build. You can check
|
||||
it with <code>Settings.canDrawOverlays(this);</code>. This is required in dev builds
|
||||
because react native development errors must be displayed above all the other
|
||||
windows. Due to the new permissions system introduced in the API level 23, the
|
||||
user needs to approve it. This can be achieved by adding the following code to
|
||||
the Activity file in the onCreate() method. OVERLAY_PERMISSION_REQ_CODE is a
|
||||
field of the class which would be responsible for passing the result back to the
|
||||
Activity.</p>
|
||||
<p>If your app is targeting the Android <code>API level 23</code> or greater, make sure you have the <code>overlay</code> permission enabled for the development build. You can check it with <code>Settings.canDrawOverlays(this);</code>. This is required in dev builds because react native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23, the user needs to approve it. This can be achieved by adding the following code to the Activity file in the onCreate() method. OVERLAY_PERMISSION_REQ_CODE is a field of the class which would be responsible for passing the result back to the Activity.</p>
|
||||
<pre><code class="hljs css java"><span class="hljs-keyword">if</span> (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
|
||||
<span class="hljs-keyword">if</span> (!Settings.canDrawOverlays(<span class="hljs-keyword">this</span>)) {
|
||||
Intent intent = <span class="hljs-keyword">new</span> Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
|
||||
@@ -630,8 +499,7 @@ Activity.</p>
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<p>Finally, the <code>onActivityResult()</code> method (as shown in the code below) has to be
|
||||
overridden to handle the permission Accepted or Denied cases for consistent UX.</p>
|
||||
<p>Finally, the <code>onActivityResult()</code> method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX.</p>
|
||||
<pre><code class="hljs css java"><span class="hljs-meta">@Override</span>
|
||||
<span class="hljs-function"><span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onActivityResult</span><span class="hljs-params">(<span class="hljs-keyword">int</span> requestCode, <span class="hljs-keyword">int</span> resultCode, Intent data)</span> </span>{
|
||||
<span class="hljs-keyword">if</span> (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
|
||||
@@ -644,13 +512,9 @@ overridden to handle the permission Accepted or Denied cases for consistent UX.<
|
||||
}
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" name="the-magic-reactrootview"></a><a href="#the-magic-reactrootview" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The Magic: <code>ReactRootView</code></h4>
|
||||
<p>You need to add some native code in order to start the React Native runtime and
|
||||
get it to render something. To do this, we're going to create an <code>Activity</code> that
|
||||
creates a <code>ReactRootView</code>, starts a React application inside it and sets it as
|
||||
the main content view.</p>
|
||||
<p>You need to add some native code in order to start the React Native runtime and get it to render something. To do this, we're going to create an <code>Activity</code> that creates a <code>ReactRootView</code>, starts a React application inside it and sets it as the main content view.</p>
|
||||
<blockquote>
|
||||
<p>If you are targetting Android version <5, use the <code>AppCompatActivity</code> class
|
||||
from the <code>com.android.support:appcompat</code> package instead of <code>Activity</code>.</p>
|
||||
<p>If you are targetting Android version <5, use the <code>AppCompatActivity</code> class from the <code>com.android.support:appcompat</code> package instead of <code>Activity</code>.</p>
|
||||
</blockquote>
|
||||
<pre><code class="hljs css java"><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyReactActivity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Activity</span> <span class="hljs-keyword">implements</span> <span class="hljs-title">DefaultHardwareBackBtnHandler</span> </span>{
|
||||
<span class="hljs-keyword">private</span> ReactRootView mReactRootView;
|
||||
@@ -681,15 +545,10 @@ from the <code>com.android.support:appcompat</code> package instead of <code>Act
|
||||
}
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>If you are using a starter kit for React Native, replace the "HelloWorld"
|
||||
string with the one in your index.js file (it’s the first argument to the
|
||||
<code>AppRegistry.registerComponent()</code> method).</p>
|
||||
<p>If you are using a starter kit for React Native, replace the "HelloWorld" string with the one in your index.js file (it’s the first argument to the <code>AppRegistry.registerComponent()</code> method).</p>
|
||||
</blockquote>
|
||||
<p>If you are using Android Studio, use <code>Alt + Enter</code> to add all missing imports in
|
||||
your MyReactActivity class. Be careful to use your package’s <code>BuildConfig</code> and
|
||||
not the one from the <code>...facebook...</code> package.</p>
|
||||
<p>We need set the theme of <code>MyReactActivity</code> to
|
||||
<code>Theme.AppCompat.Light.NoActionBar</code> because some components rely on this theme.</p>
|
||||
<p>If you are using Android Studio, use <code>Alt + Enter</code> to add all missing imports in your MyReactActivity class. Be careful to use your package’s <code>BuildConfig</code> and not the one from the <code>...facebook...</code> package.</p>
|
||||
<p>We need set the theme of <code>MyReactActivity</code> to <code>Theme.AppCompat.Light.NoActionBar</code> because some components rely on this theme.</p>
|
||||
<pre><code class="hljs css xml"><span class="hljs-tag"><<span class="hljs-name">activity</span>
|
||||
<span class="hljs-attr">android:name</span>=<span class="hljs-string">".MyReactActivity"</span>
|
||||
<span class="hljs-attr">android:label</span>=<span class="hljs-string">"@string/app_name"</span>
|
||||
@@ -697,15 +556,9 @@ not the one from the <code>...facebook...</code> package.</p>
|
||||
<span class="hljs-tag"></<span class="hljs-name">activity</span>></span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>A <code>ReactInstanceManager</code> can be shared amongst multiple activities and/or
|
||||
fragments. You will want to make your own <code>ReactFragment</code> or <code>ReactActivity</code>
|
||||
and have a singleton <em>holder</em> that holds a <code>ReactInstanceManager</code>. When you
|
||||
need the <code>ReactInstanceManager</code> (e.g., to hook up the <code>ReactInstanceManager</code>
|
||||
to the lifecycle of those Activities or Fragments) use the one provided by the
|
||||
singleton.</p>
|
||||
<p>A <code>ReactInstanceManager</code> can be shared amongst multiple activities and/or fragments. You will want to make your own <code>ReactFragment</code> or <code>ReactActivity</code> and have a singleton <em>holder</em> that holds a <code>ReactInstanceManager</code>. When you need the <code>ReactInstanceManager</code> (e.g., to hook up the <code>ReactInstanceManager</code> to the lifecycle of those Activities or Fragments) use the one provided by the singleton.</p>
|
||||
</blockquote>
|
||||
<p>Next, we need to pass some activity lifecycle callbacks down to the
|
||||
<code>ReactInstanceManager</code>:</p>
|
||||
<p>Next, we need to pass some activity lifecycle callbacks down to the <code>ReactInstanceManager</code>:</p>
|
||||
<pre><code class="hljs css java"><span class="hljs-meta">@Override</span>
|
||||
<span class="hljs-function"><span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onPause</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">super</span>.onPause();
|
||||
@@ -743,14 +596,8 @@ singleton.</p>
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<p>This allows JavaScript to control what happens when the user presses the
|
||||
hardware back button (e.g. to implement navigation). When JavaScript doesn't
|
||||
handle a back press, your <code>invokeDefaultOnBackPressed</code> method will be called. By
|
||||
default this simply finishes your <code>Activity</code>.</p>
|
||||
<p>Finally, we need to hook up the dev menu. By default, this is activated by
|
||||
(rage) shaking the device, but this is not very useful in emulators. So we make
|
||||
it show when you press the hardware menu button (use <code>Ctrl + M</code> if you're using
|
||||
Android Studio emulator):</p>
|
||||
<p>This allows JavaScript to control what happens when the user presses the hardware back button (e.g. to implement navigation). When JavaScript doesn't handle a back press, your <code>invokeDefaultOnBackPressed</code> method will be called. By default this simply finishes your <code>Activity</code>.</p>
|
||||
<p>Finally, we need to hook up the dev menu. By default, this is activated by (rage) shaking the device, but this is not very useful in emulators. So we make it show when you press the hardware menu button (use <code>Ctrl + M</code> if you're using Android Studio emulator):</p>
|
||||
<pre><code class="hljs css java"><span class="hljs-meta">@Override</span>
|
||||
<span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">boolean</span> <span class="hljs-title">onKeyUp</span><span class="hljs-params">(<span class="hljs-keyword">int</span> keyCode, KeyEvent event)</span> </span>{
|
||||
<span class="hljs-keyword">if</span> (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != <span class="hljs-keyword">null</span>) {
|
||||
@@ -762,39 +609,26 @@ Android Studio emulator):</p>
|
||||
</code></pre>
|
||||
<p>Now your activity is ready to run some JavaScript code.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="test-your-integration"></a><a href="#test-your-integration" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Test your integration</h3>
|
||||
<p>You have now done all the basic steps to integrate React Native with your
|
||||
current application. Now we will start the React Native packager to build the
|
||||
<code>index.bundle</code> package and the server running on localhost to serve it.</p>
|
||||
<p>You have now done all the basic steps to integrate React Native with your current application. Now we will start the React Native packager to build the <code>index.bundle</code> package and the server running on localhost to serve it.</p>
|
||||
<h5><a class="anchor" aria-hidden="true" name="1-run-the-packager"></a><a href="#1-run-the-packager" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Run the packager</h5>
|
||||
<p>To run your app, you need to first start the development server. To do this,
|
||||
simply run the following command in the root directory of your React Native
|
||||
project:</p>
|
||||
<p>To run your app, you need to first start the development server. To do this, simply run the following command in the root directory of your React Native project:</p>
|
||||
<pre><code class="hljs"><span class="hljs-meta">$</span><span class="bash"> npm start</span>
|
||||
</code></pre>
|
||||
<h5><a class="anchor" aria-hidden="true" name="2-run-the-app"></a><a href="#2-run-the-app" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Run the app</h5>
|
||||
<p>Now build and run your Android app as normal.</p>
|
||||
<p>Once you reach your React-powered activity inside the app, it should load the
|
||||
JavaScript code from the development server and display:</p>
|
||||
<p>Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:</p>
|
||||
<p><img src="/react-native/docs/assets/EmbeddedAppAndroid.png" alt="Screenshot"></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="creating-a-release-build-in-android-studio"></a><a href="#creating-a-release-build-in-android-studio" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Creating a release build in Android Studio</h3>
|
||||
<p>You can use Android Studio to create your release builds too! It’s as easy as
|
||||
creating release builds of your previously-existing native Android app. There’s
|
||||
just one additional step, which you’ll have to do before every release build.
|
||||
You need to execute the following to create a React Native bundle, which will be
|
||||
included with your native Android app:</p>
|
||||
<p>You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which will be included with your native Android app:</p>
|
||||
<pre><code class="hljs">$ react-<span class="hljs-keyword">native</span> bundle --platform android --dev <span class="hljs-keyword">false</span> --entry-<span class="hljs-keyword">file</span> index.js --bundle-output android<span class="hljs-regexp">/com/y</span>our-company-name<span class="hljs-regexp">/app-package-name/</span>src<span class="hljs-regexp">/main/</span>assets<span class="hljs-regexp">/index.android.bundle --assets-dest android/</span>com<span class="hljs-regexp">/your-company-name/</span>app-<span class="hljs-keyword">package</span>-name<span class="hljs-regexp">/src/m</span>ain<span class="hljs-regexp">/res/</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>Don’t forget to replace the paths with correct ones and create the assets
|
||||
folder if it doesn’t exist.</p>
|
||||
<p>Don’t forget to replace the paths with correct ones and create the assets folder if it doesn’t exist.</p>
|
||||
</blockquote>
|
||||
<p>Now just create a release build of your native app from within Android Studio as
|
||||
usual and you should be good to go!</p>
|
||||
<p>Now just create a release build of your native app from within Android Studio as usual and you should be good to go!</p>
|
||||
<p><block class="objc swift android" /></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="now-what"></a><a href="#now-what" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Now what?</h3>
|
||||
<p>At this point you can continue developing your app as usual. Refer to our
|
||||
<a href="/react-native/docs/0.10/debugging.html">debugging</a> and <a href="/react-native/docs/0.10/running-on-device.html">deployment</a> docs to learn
|
||||
more about working with React Native.</p>
|
||||
<p>At this point you can continue developing your app as usual. Refer to our <a href="/react-native/docs/0.10/debugging.html">debugging</a> and <a href="/react-native/docs/0.10/running-on-device.html">deployment</a> docs to learn more about working with React Native.</p>
|
||||
<script>
|
||||
function displayTab(type, value) {
|
||||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||
|
||||
File diff suppressed because one or more lines are too long
+9
-16
@@ -1,7 +1,6 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Keyboard · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Keyboard · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="`Keyboard` module to control keyboard events."/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/keyboard.md" target="_blank">Edit</a><h1>Keyboard</h1></header><article><div><span><p><code>Keyboard</code> module to control keyboard events.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="usage"></a><a href="#usage" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Usage</h3>
|
||||
<p>The Keyboard module allows you to listen for native events and react to them, as
|
||||
well as make changes to the keyboard, like dismissing it.</p>
|
||||
<p>The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.</p>
|
||||
<pre><code class="hljs"><span class="hljs-keyword">import</span> <span class="hljs-type">React</span>, { <span class="hljs-type">Component</span> } from <span class="hljs-symbol">'reac</span>t';
|
||||
<span class="hljs-keyword">import</span> { <span class="hljs-type">Keyboard</span>, <span class="hljs-type">TextInput</span> } from <span class="hljs-symbol">'react</span>-native';
|
||||
|
||||
@@ -44,13 +43,11 @@ well as make changes to the keyboard, like dismissing it.</p>
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="addlistener"></a><a href="#addlistener" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>addListener()</code></h3>
|
||||
<pre><code class="hljs css javascript">Keyboard.addListener(eventName, callback)
|
||||
<pre><code class="hljs css javascript">Keyboard.addListener(eventName, callback);
|
||||
</code></pre>
|
||||
<p>The <code>addListener</code> function connects a JavaScript function to an identified native
|
||||
keyboard notification event.</p>
|
||||
<p>The <code>addListener</code> function connects a JavaScript function to an identified native keyboard notification event.</p>
|
||||
<p>This function then returns the reference to the listener.</p>
|
||||
<p>@param {string} eventName The <code>nativeEvent</code> is the string that identifies the event you're listening for. This
|
||||
can be any of the following:</p>
|
||||
<p>@param {string} eventName The <code>nativeEvent</code> is the string that identifies the event you're listening for. This can be any of the following:</p>
|
||||
<ul>
|
||||
<li><code>keyboardWillShow</code></li>
|
||||
<li><code>keyboardDidShow</code></li>
|
||||
@@ -59,27 +56,23 @@ can be any of the following:</p>
|
||||
<li><code>keyboardWillChangeFrame</code></li>
|
||||
<li><code>keyboardDidChangeFrame</code></li>
|
||||
</ul>
|
||||
<p>Note that if you set <code>android:windowSoftInputMode</code> to <code>adjustResize</code> or <code>adjustNothing</code>,
|
||||
only <code>keyboardDidShow</code> and <code>keyboardDidHide</code> events will be available on Android.
|
||||
<code>keyboardWillShow</code> as well as <code>keyboardWillHide</code> are generally not available on Android
|
||||
since there is no native corresponding event.</p>
|
||||
<p>Note that if you set <code>android:windowSoftInputMode</code> to <code>adjustResize</code> or <code>adjustNothing</code>, only <code>keyboardDidShow</code> and <code>keyboardDidHide</code> events will be available on Android. <code>keyboardWillShow</code> as well as <code>keyboardWillHide</code> are generally not available on Android since there is no native corresponding event.</p>
|
||||
<p>@param {function} callback function to be called when the event fires.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="removelistener"></a><a href="#removelistener" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeListener()</code></h3>
|
||||
<pre><code class="hljs css javascript">Keyboard.removeListener(eventName, callback)
|
||||
<pre><code class="hljs css javascript">Keyboard.removeListener(eventName, callback);
|
||||
</code></pre>
|
||||
<p>Removes a specific listener.</p>
|
||||
<p>@param {string} eventName The <code>nativeEvent</code> is the string that identifies the event you're listening for.
|
||||
@param {function} callback function to be called when the event fires.</p>
|
||||
<p>@param {string} eventName The <code>nativeEvent</code> is the string that identifies the event you're listening for. @param {function} callback function to be called when the event fires.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="removealllisteners"></a><a href="#removealllisteners" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>removeAllListeners()</code></h3>
|
||||
<pre><code class="hljs css javascript">Keyboard.removeAllListeners(eventName)
|
||||
<pre><code class="hljs css javascript">Keyboard.removeAllListeners(eventName);
|
||||
</code></pre>
|
||||
<p>Removes all listeners for a specific event type.</p>
|
||||
<p>@param {string} eventType The native event string listeners are watching which will be removed.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="dismiss"></a><a href="#dismiss" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>dismiss()</code></h3>
|
||||
<pre><code class="hljs css javascript">Keyboard.dismiss()
|
||||
<pre><code class="hljs css javascript">Keyboard.dismiss();
|
||||
</code></pre>
|
||||
<p>Dismisses the active keyboard and removes focus.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>KeyboardAvoidingView · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="KeyboardAvoidingView · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="It is a component to solve the common problem of views that need to move out of"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/keyboardavoidingview.md" target="_blank">Edit</a><h1>KeyboardAvoidingView</h1></header><article><div><span><p>It is a component to solve the common problem of views that need to move out of
|
||||
the way of the virtual keyboard. It can automatically adjust either its position
|
||||
or bottom padding based on the position of the keyboard.</p>
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>KeyboardAvoidingView · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="KeyboardAvoidingView · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its position or bottom padding based on the position of the keyboard."/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/keyboardavoidingview.md" target="_blank">Edit</a><h1>KeyboardAvoidingView</h1></header><article><div><span><p>It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its position or bottom padding based on the position of the keyboard.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="props"></a><a href="#props" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.10/view.html#props">View props...</a></li>
|
||||
@@ -18,8 +16,7 @@ or bottom padding based on the position of the keyboard.</p>
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="props"></a><a href="#props" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="keyboardverticaloffset"></a><a href="#keyboardverticaloffset" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>keyboardVerticalOffset</code></h3>
|
||||
<p>This is the distance between the top of the user screen and the react native
|
||||
view, may be non-zero in some use cases.</p>
|
||||
<p>This is the distance between the top of the user screen and the react native view, may be non-zero in some use cases.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>LayoutAnimation · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="LayoutAnimation · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Automatically animates views to their new positions when the"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/layoutanimation.md" target="_blank">Edit</a><h1>LayoutAnimation</h1></header><article><div><span><p>Automatically animates views to their new positions when the
|
||||
next layout happens.</p>
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>LayoutAnimation · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="LayoutAnimation · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Automatically animates views to their new positions when the next layout happens."/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/layoutanimation.md" target="_blank">Edit</a><h1>LayoutAnimation</h1></header><article><div><span><p>Automatically animates views to their new positions when the next layout happens.</p>
|
||||
<p>A common way to use this API is to call it before calling <code>setState</code>.</p>
|
||||
<p>Note that in order to get this to work on <strong>Android</strong> you need to set the following flags via <code>UIManager</code>:</p>
|
||||
<pre><code class="hljs">UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
|
||||
@@ -30,20 +29,17 @@ next layout happens.</p>
|
||||
<ul>
|
||||
<li><code>duration</code> in milliseconds</li>
|
||||
<li><code>create</code>, config for animating in new views (see <code>Anim</code> type)</li>
|
||||
<li><code>update</code>, config for animating views that have been updated
|
||||
(see <code>Anim</code> type)</li>
|
||||
<li><code>update</code>, config for animating views that have been updated (see <code>Anim</code> type)</li>
|
||||
</ul>
|
||||
<p>@param onAnimationDidEnd Called when the animation finished.
|
||||
Only supported on iOS.
|
||||
@param onError Called on error. Only supported on iOS.</p>
|
||||
<p>@param onAnimationDidEnd Called when the animation finished. Only supported on iOS. @param onError Called on error. Only supported on iOS.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="create"></a><a href="#create" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>create()</code></h3>
|
||||
<pre><code class="hljs css javascript">LayoutAnimation.create(duration, type, creationProp)
|
||||
<pre><code class="hljs css javascript">LayoutAnimation.create(duration, type, creationProp);
|
||||
</code></pre>
|
||||
<p>Helper for creating a config for <code>configureNext</code>.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="checkconfig"></a><a href="#checkconfig" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>checkConfig()</code></h3>
|
||||
<pre><code class="hljs css javascript">LayoutAnimation.checkConfig(config, location, name)
|
||||
<pre><code class="hljs css javascript">LayoutAnimation.checkConfig(config, location, name);
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" name="properties"></a><a href="#properties" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<hr>
|
||||
|
||||
File diff suppressed because one or more lines are too long
+18
-36
@@ -8,12 +8,10 @@
|
||||
the Create React Native App repository.
|
||||
</p>
|
||||
</div>
|
||||
<p><code>Linking</code> gives you a general interface to interact with both incoming
|
||||
and outgoing app links.</p>
|
||||
<p><code>Linking</code> gives you a general interface to interact with both incoming and outgoing app links.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="basic-usage"></a><a href="#basic-usage" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Basic Usage</h3>
|
||||
<h4><a class="anchor" aria-hidden="true" name="handling-deep-links"></a><a href="#handling-deep-links" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Handling deep links</h4>
|
||||
<p>If your app was launched from an external url registered to your app you can
|
||||
access and handle it from any component you want with</p>
|
||||
<p>If your app was launched from an external url registered to your app you can access and handle it from any component you want with</p>
|
||||
<pre><code class="hljs">componentDidMount() {
|
||||
Linking.getInitialURL().<span class="hljs-keyword">then</span>(<span class="hljs-function"><span class="hljs-params">(url)</span> =></span> {
|
||||
<span class="hljs-keyword">if</span> (url) {
|
||||
@@ -22,20 +20,13 @@ access and handle it from any component you want with</p>
|
||||
}).<span class="hljs-keyword">catch</span>(err => <span class="hljs-built_in">console</span>.error(<span class="hljs-string">'An error occurred'</span>, err));
|
||||
}
|
||||
</code></pre>
|
||||
<p>NOTE: For instructions on how to add support for deep linking on Android,
|
||||
refer to <a href="http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters">Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links</a>.</p>
|
||||
<p>If you wish to receive the intent in an existing instance of MainActivity,
|
||||
you may set the <code>launchMode</code> of MainActivity to <code>singleTask</code> in
|
||||
<code>AndroidManifest.xml</code>. See <a href="http://developer.android.com/guide/topics/manifest/activity-element.html"><code><activity></code></a>
|
||||
documentation for more information.</p>
|
||||
<p>NOTE: For instructions on how to add support for deep linking on Android, refer to <a href="http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters">Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links</a>.</p>
|
||||
<p>If you wish to receive the intent in an existing instance of MainActivity, you may set the <code>launchMode</code> of MainActivity to <code>singleTask</code> in <code>AndroidManifest.xml</code>. See <a href="http://developer.android.com/guide/topics/manifest/activity-element.html"><code><activity></code></a> documentation for more information.</p>
|
||||
<pre><code class="hljs"><activity
|
||||
android:<span class="hljs-attribute">name</span>=<span class="hljs-string">".MainActivity"</span>
|
||||
android:<span class="hljs-attribute">launchMode</span>=<span class="hljs-string">"singleTask"</span>>
|
||||
</code></pre>
|
||||
<p>NOTE: On iOS, you'll need to link <code>RCTLinking</code> to your project by following
|
||||
the steps described <a href="/react-native/docs/0.10/linking-libraries-ios.html#manual-linking">here</a>.
|
||||
If you also want to listen to incoming app links during your app's
|
||||
execution, you'll need to add the following lines to your <code>*AppDelegate.m</code>:</p>
|
||||
<p>NOTE: On iOS, you'll need to link <code>RCTLinking</code> to your project by following the steps described <a href="/react-native/docs/0.10/linking-libraries-ios.html#manual-linking">here</a>. If you also want to listen to incoming app links during your app's execution, you'll need to add the following lines to your <code>*AppDelegate.m</code>:</p>
|
||||
<pre><code class="hljs"><span class="hljs-comment">// iOS 9.x or newer</span>
|
||||
<span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTLinkingManager.h></span></span>
|
||||
|
||||
@@ -57,8 +48,7 @@ execution, you'll need to add the following lines to your <code>*AppDelegate.m</
|
||||
sourceApplication:sourceApplication annotation:annotation];
|
||||
}
|
||||
</code></pre>
|
||||
<p>// If your app is using <a href="https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/AppSearch/UniversalLinks.html">Universal Links</a>,
|
||||
you'll need to add the following code as well:</p>
|
||||
<p>// If your app is using <a href="https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/AppSearch/UniversalLinks.html">Universal Links</a>, you'll need to add the following code as well:</p>
|
||||
<pre><code class="hljs"><span class="hljs-selector-tag">-</span> (BOOL)<span class="hljs-selector-tag">application</span><span class="hljs-selector-pseudo">:(UIApplication</span> *)<span class="hljs-selector-tag">application</span> <span class="hljs-selector-tag">continueUserActivity</span><span class="hljs-selector-pseudo">:(NSUserActivity</span> *)<span class="hljs-selector-tag">userActivity</span>
|
||||
<span class="hljs-selector-tag">restorationHandler</span><span class="hljs-selector-pseudo">:(void</span> (^)(NSArray * _Nullable))<span class="hljs-selector-tag">restorationHandler</span>
|
||||
{
|
||||
@@ -67,8 +57,7 @@ you'll need to add the following code as well:</p>
|
||||
restorationHandler:restorationHandler]</span>;
|
||||
}
|
||||
</code></pre>
|
||||
<p>And then on your React component you'll be able to listen to the events on
|
||||
<code>Linking</code> as follows</p>
|
||||
<p>And then on your React component you'll be able to listen to the events on <code>Linking</code> as follows</p>
|
||||
<pre><code class="hljs"><span class="hljs-selector-tag">componentDidMount</span>() {
|
||||
<span class="hljs-selector-tag">Linking</span><span class="hljs-selector-class">.addEventListener</span>(<span class="hljs-string">'url'</span>, this._handleOpenURL);
|
||||
},
|
||||
@@ -105,30 +94,25 @@ you'll need to add the following code as well:</p>
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="constructor"></a><a href="#constructor" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>constructor()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">constructor</span>()
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">constructor</span>();
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="addeventlistener"></a><a href="#addeventlistener" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>addEventListener()</code></h3>
|
||||
<pre><code class="hljs css javascript">addEventListener(type, handler)
|
||||
<pre><code class="hljs css javascript">addEventListener(type, handler);
|
||||
</code></pre>
|
||||
<p>Add a handler to Linking changes by listening to the <code>url</code> event type
|
||||
and providing the handler</p>
|
||||
<p>Add a handler to Linking changes by listening to the <code>url</code> event type and providing the handler</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="removeeventlistener"></a><a href="#removeeventlistener" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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 javascript">removeEventListener(type, handler)
|
||||
<pre><code class="hljs css javascript">removeEventListener(type, handler);
|
||||
</code></pre>
|
||||
<p>Remove a handler by passing the <code>url</code> event type and the handler</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="openurl"></a><a href="#openurl" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>openURL()</code></h3>
|
||||
<pre><code class="hljs css javascript">openURL(url)
|
||||
<pre><code class="hljs css javascript">openURL(url);
|
||||
</code></pre>
|
||||
<p>Try to open the given <code>url</code> with any of the installed apps.</p>
|
||||
<p>You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android
|
||||
or "<a href="http://maps.apple.com/?ll=37.484847,-122.148386">http://maps.apple.com/?ll=37.484847,-122.148386</a>" on iOS), a contact,
|
||||
or any other URL that can be opened with the installed apps.</p>
|
||||
<p>The method returns a <code>Promise</code> object. If the user confirms the open dialog or the
|
||||
url automatically opens, the promise is resolved. If the user cancels the open dialog
|
||||
or there are no registered applications for the url, the promise is rejected.</p>
|
||||
<p>You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android or "<a href="http://maps.apple.com/?ll=37.484847,-122.148386">http://maps.apple.com/?ll=37.484847,-122.148386</a>" on iOS), a contact, or any other URL that can be opened with the installed apps.</p>
|
||||
<p>The method returns a <code>Promise</code> object. If the user confirms the open dialog or the url automatically opens, the promise is resolved. If the user cancels the open dialog or there are no registered applications for the url, the promise is rejected.</p>
|
||||
<blockquote>
|
||||
<p>This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first.</p>
|
||||
</blockquote>
|
||||
@@ -137,15 +121,14 @@ or there are no registered applications for the url, the promise is rejected.</p
|
||||
</blockquote>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="canopenurl"></a><a href="#canopenurl" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>canOpenURL()</code></h3>
|
||||
<pre><code class="hljs css javascript">canOpenURL(url)
|
||||
<pre><code class="hljs css javascript">canOpenURL(url);
|
||||
</code></pre>
|
||||
<p>Determine whether or not an installed app can handle a given URL.</p>
|
||||
<blockquote>
|
||||
<p>For web URLs, the protocol ("http://", "https://") must be set accordingly!</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>As of iOS 9, your app needs to provide the <code>LSApplicationQueriesSchemes</code> key
|
||||
inside <code>Info.plist</code> or canOpenURL will always return false.</p>
|
||||
<p>As of iOS 9, your app needs to provide the <code>LSApplicationQueriesSchemes</code> key inside <code>Info.plist</code> or canOpenURL will always return false.</p>
|
||||
</blockquote>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
<table>
|
||||
@@ -158,10 +141,9 @@ inside <code>Info.plist</code> or canOpenURL will always return false.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getinitialurl"></a><a href="#getinitialurl" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getInitialURL()</code></h3>
|
||||
<pre><code class="hljs css javascript">getInitialURL()
|
||||
<pre><code class="hljs css javascript">getInitialURL();
|
||||
</code></pre>
|
||||
<p>If the app launch was triggered by an app link,
|
||||
it will give the link url, otherwise it will give <code>null</code></p>
|
||||
<p>If the app launch was triggered by an app link, it will give the link url, otherwise it will give <code>null</code></p>
|
||||
<blockquote>
|
||||
<p>To support deep linking on Android, refer <a href="http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents">http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents</a></p>
|
||||
</blockquote>
|
||||
|
||||
+24
-89
@@ -1,14 +1,5 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>ListView · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><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/index.html"/><meta property="og:description" content="DEPRECATED - use one of the new list components, such as [`FlatList`](/react-native/docs/0.10/flatlist.html)"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listview.md" target="_blank">Edit</a><h1>ListView</h1></header><article><div><span><p>DEPRECATED - use one of the new list components, such as <a href="/react-native/docs/0.10/flatlist.html"><code>FlatList</code></a>
|
||||
or <a href="/react-native/docs/0.10/sectionlist.html"><code>SectionList</code></a> for bounded memory use, fewer bugs,
|
||||
better performance, an easier to use API, and more features. Check out this
|
||||
<a href="https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html">blog post</a>
|
||||
for more details.</p>
|
||||
<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="/react-native/docs/0.10/listviewdatasource.html"><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>
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>ListView · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><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/index.html"/><meta property="og:description" content="DEPRECATED - use one of the new list components, such as [`FlatList`](/react-native/docs/0.10/flatlist.html) or [`SectionList`](/react-native/docs/0.10/sectionlist.html) for bounded memory use, fewer bugs, better performance, an easier to use API, and more features. Check out this [blog post](https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html) for more details."/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listview.md" target="_blank">Edit</a><h1>ListView</h1></header><article><div><span><p>DEPRECATED - use one of the new list components, such as <a href="/react-native/docs/0.10/flatlist.html"><code>FlatList</code></a> or <a href="/react-native/docs/0.10/sectionlist.html"><code>SectionList</code></a> for bounded memory use, fewer bugs, better performance, an easier to use API, and more features. Check out this <a href="https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html">blog post</a> for more details.</p>
|
||||
<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="/react-native/docs/0.10/listviewdatasource.html"><code>ListView.DataSource</code></a>, populate it with a simple array of data blobs, and instantiate a <code>ListView</code> component with that data source and a <code>renderRow</code> callback which takes a blob from the data array and returns a renderable component.</p>
|
||||
<p>Minimal example:</p>
|
||||
<pre><code class="hljs"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
<span class="hljs-keyword">constructor</span>() {
|
||||
@@ -29,22 +20,11 @@ returns a renderable component.</p>
|
||||
}
|
||||
}
|
||||
</span></code></pre>
|
||||
<p>ListView also supports more advanced features, including sections with sticky
|
||||
section headers, header and footer support, callbacks on reaching the end of
|
||||
the available data (<code>onEndReached</code>) and on the set of rows that are visible
|
||||
in the device viewport change (<code>onChangeVisibleRows</code>), and several
|
||||
performance optimizations.</p>
|
||||
<p>There are a few performance operations designed to make ListView scroll
|
||||
smoothly while dynamically loading potentially very large (or conceptually
|
||||
infinite) data sets:</p>
|
||||
<p>ListView also supports more advanced features, including sections with sticky section headers, header and footer support, callbacks on reaching the end of the available data (<code>onEndReached</code>) and on the set of rows that are visible in the device viewport change (<code>onChangeVisibleRows</code>), and several performance optimizations.</p>
|
||||
<p>There are a few performance operations designed to make ListView scroll smoothly while dynamically loading potentially very large (or conceptually infinite) data sets:</p>
|
||||
<ul>
|
||||
<li><p>Only re-render changed rows - the rowHasChanged function provided to the
|
||||
data source tells the ListView if it needs to re-render a row because the
|
||||
source data has changed - see ListViewDataSource for more details.</p></li>
|
||||
<li><p>Rate-limited row rendering - By default, only one row is rendered per
|
||||
event-loop (customizable with the <code>pageSize</code> prop). This breaks up the
|
||||
work into smaller chunks to reduce the chance of dropping frames while
|
||||
rendering rows.</p></li>
|
||||
<li><p>Only re-render changed rows - the rowHasChanged function provided to the data source tells the ListView if it needs to re-render a row because the source data has changed - see ListViewDataSource for more details.</p></li>
|
||||
<li><p>Rate-limited row rendering - By default, only one row is rendered per event-loop (customizable with the <code>pageSize</code> prop). This breaks up the work into smaller chunks to reduce the chance of dropping frames while rendering rows.</p></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" name="props"></a><a href="#props" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>
|
||||
@@ -91,9 +71,7 @@ rendering rows.</p></li>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="initiallistsize"></a><a href="#initiallistsize" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>initialListSize</code></h3>
|
||||
<p>How many rows to render on initial component mount. Use this to make
|
||||
it so that the first screen worth of data appears at one time instead of
|
||||
over the course of multiple frames.</p>
|
||||
<p>How many rows to render on initial component mount. Use this to make it so that the first screen worth of data appears at one time instead of over the course of multiple frames.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -115,11 +93,7 @@ over the course of multiple frames.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="pagesize"></a><a href="#pagesize" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>pageSize</code></h3>
|
||||
<p>Number of rows to render per event loop. Note: if your 'rows' are actually
|
||||
cells, i.e. they don't span the full width of your view (as in the
|
||||
ListViewGridLayoutExample), you should set the pageSize to be a multiple
|
||||
of the number of cells per row, otherwise you're likely to see gaps at
|
||||
the edge of the ListView as new pages are loaded.</p>
|
||||
<p>Number of rows to render per event loop. Note: if your 'rows' are actually cells, i.e. they don't span the full width of your view (as in the ListViewGridLayoutExample), you should set the pageSize to be a multiple of the number of cells per row, otherwise you're likely to see gaps at the edge of the ListView as new pages are loaded.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -131,14 +105,7 @@ the edge of the ListView as new pages are loaded.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="renderrow"></a><a href="#renderrow" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>renderRow</code></h3>
|
||||
<p>(rowData, sectionID, rowID, highlightRow) => renderable</p>
|
||||
<p>Takes a data entry from the data source and its ids and should return
|
||||
a renderable component to be rendered as the row. By default the data
|
||||
is exactly what was put into the data source, but it's also possible to
|
||||
provide custom extractors. ListView can be notified when a row is
|
||||
being highlighted by calling <code>highlightRow(sectionID, rowID)</code>. This
|
||||
sets a boolean value of adjacentRowHighlighted in renderSeparator, allowing you
|
||||
to control the separators above and below the highlighted row. The highlighted
|
||||
state of a row can be reset by calling highlightRow(null).</p>
|
||||
<p>Takes a data entry from the data source and its ids and should return a renderable component to be rendered as the row. By default the data is exactly what was put into the data source, but it's also possible to provide custom extractors. ListView can be notified when a row is being highlighted by calling <code>highlightRow(sectionID, rowID)</code>. This sets a boolean value of adjacentRowHighlighted in renderSeparator, allowing you to control the separators above and below the highlighted row. The highlighted state of a row can be reset by calling highlightRow(null).</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -150,8 +117,7 @@ state of a row can be reset by calling highlightRow(null).</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="renderscrollcomponent"></a><a href="#renderscrollcomponent" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>renderScrollComponent</code></h3>
|
||||
<p>(props) => renderable</p>
|
||||
<p>A function that returns the scrollable component in which the list rows
|
||||
are rendered. Defaults to returning a ScrollView with the given props.</p>
|
||||
<p>A function that returns the scrollable component in which the list rows are rendered. Defaults to returning a ScrollView with the given props.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -162,8 +128,7 @@ are rendered. Defaults to returning a ScrollView with the given props.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="scrollrenderaheaddistance"></a><a href="#scrollrenderaheaddistance" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>scrollRenderAheadDistance</code></h3>
|
||||
<p>How early to start rendering rows before they come on screen, in
|
||||
pixels.</p>
|
||||
<p>How early to start rendering rows before they come on screen, in pixels.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -174,11 +139,7 @@ pixels.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="stickyheaderindices"></a><a href="#stickyheaderindices" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>stickyHeaderIndices</code></h3>
|
||||
<p>An array of child indices determining which children get docked to the
|
||||
top of the screen when scrolling. For example, passing
|
||||
<code>stickyHeaderIndices={[0]}</code> will cause the first child to be fixed to the
|
||||
top of the scroll view. This property is not supported in conjunction
|
||||
with <code>horizontal={true}</code>.</p>
|
||||
<p>An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing <code>stickyHeaderIndices={[0]}</code> will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction with <code>horizontal={true}</code>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -189,9 +150,7 @@ with <code>horizontal={true}</code>.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="enableemptysections"></a><a href="#enableemptysections" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>enableEmptySections</code></h3>
|
||||
<p>Flag indicating whether empty section headers should be rendered. In the future release
|
||||
empty section headers will be rendered by default, and the flag will be deprecated.
|
||||
If empty sections are not desired to be rendered their indices should be excluded from sectionID object.</p>
|
||||
<p>Flag indicating whether empty section headers should be rendered. In the future release empty section headers will be rendered by default, and the flag will be deprecated. If empty sections are not desired to be rendered their indices should be excluded from sectionID object.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -212,9 +171,7 @@ If empty sections are not desired to be rendered their indices should be exclude
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="onendreached"></a><a href="#onendreached" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>onEndReached</code></h3>
|
||||
<p>Called when all rows have been rendered and the list has been scrolled
|
||||
to within onEndReachedThreshold of the bottom. The native scroll
|
||||
event is provided.</p>
|
||||
<p>Called when all rows have been rendered and the list has been scrolled to within onEndReachedThreshold of the bottom. The native scroll event is provided.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -225,12 +182,7 @@ event is provided.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="stickysectionheadersenabled"></a><a href="#stickysectionheadersenabled" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>stickySectionHeadersEnabled</code></h3>
|
||||
<p>Makes the sections headers sticky. The sticky behavior means that it
|
||||
will scroll with the content at the top of the section until it reaches
|
||||
the top of the screen, at which point it will stick to the top until it
|
||||
is pushed off the screen by the next section header. This property is
|
||||
not supported in conjunction with <code>horizontal={true}</code>. Only enabled by
|
||||
default on iOS because of typical platform standards.</p>
|
||||
<p>Makes the sections headers sticky. The sticky behavior means that it will scroll with the content at the top of the section until it reaches the top of the screen, at which point it will stick to the top until it is pushed off the screen by the next section header. This property is not supported in conjunction with <code>horizontal={true}</code>. Only enabled by default on iOS because of typical platform standards.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -254,10 +206,7 @@ default on iOS because of typical platform standards.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="renderseparator"></a><a href="#renderseparator" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>renderSeparator</code></h3>
|
||||
<p>(sectionID, rowID, adjacentRowHighlighted) => renderable</p>
|
||||
<p>If provided, a renderable component to be rendered as the separator
|
||||
below each row but not the last row if there is a section header below.
|
||||
Take a sectionID and rowID of the row above and whether its adjacent row
|
||||
is highlighted.</p>
|
||||
<p>If provided, a renderable component to be rendered as the separator below each row but not the last row if there is a section header below. Take a sectionID and rowID of the row above and whether its adjacent row is highlighted.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -269,11 +218,7 @@ is highlighted.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="onchangevisiblerows"></a><a href="#onchangevisiblerows" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>onChangeVisibleRows</code></h3>
|
||||
<p>(visibleRows, changedRows) => void</p>
|
||||
<p>Called when the set of visible rows changes. <code>visibleRows</code> maps
|
||||
{ sectionID: { rowID: true }} for all the visible rows, and
|
||||
<code>changedRows</code> maps { sectionID: { rowID: true | false }} for the rows
|
||||
that have changed their visibility, with true indicating visible, and
|
||||
false indicating the view has moved out of view.</p>
|
||||
<p>Called when the set of visible rows changes. <code>visibleRows</code> maps { sectionID: { rowID: true }} for all the visible rows, and <code>changedRows</code> maps { sectionID: { rowID: true | false }} for the rows that have changed their visibility, with true indicating visible, and false indicating the view has moved out of view.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -284,9 +229,7 @@ false indicating the view has moved out of view.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="removeclippedsubviews"></a><a href="#removeclippedsubviews" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeClippedSubviews</code></h3>
|
||||
<p>A performance optimization for improving scroll perf of
|
||||
large lists, used in conjunction with overflow: 'hidden' on the row
|
||||
containers. This is enabled by default.</p>
|
||||
<p>A performance optimization for improving scroll perf of large lists, used in conjunction with overflow: 'hidden' on the row containers. This is enabled by default.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -298,12 +241,7 @@ containers. This is enabled by default.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="renderfooter"></a><a href="#renderfooter" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>renderFooter</code></h3>
|
||||
<p>() => renderable</p>
|
||||
<p>The header and footer are always rendered (if these props are provided)
|
||||
on every render pass. If they are expensive to re-render, wrap them
|
||||
in StaticContainer or other mechanism as appropriate. Footer is always
|
||||
at the bottom of the list, and header at the top, on every render pass.
|
||||
In a horizontal ListView, the header is rendered on the left and the
|
||||
footer on the right.</p>
|
||||
<p>The header and footer are always rendered (if these props are provided) on every render pass. If they are expensive to re-render, wrap them in StaticContainer or other mechanism as appropriate. Footer is always at the bottom of the list, and header at the top, on every render pass. In a horizontal ListView, the header is rendered on the left and the footer on the right.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -314,7 +252,7 @@ footer on the right.</p>
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getmetrics"></a><a href="#getmetrics" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getMetrics()</code></h3>
|
||||
<pre><code class="hljs css javascript">getMetrics()
|
||||
<pre><code class="hljs css javascript">getMetrics();
|
||||
</code></pre>
|
||||
<p>Exports some data, e.g. for perf investigations or analytics.</p>
|
||||
<hr>
|
||||
@@ -325,17 +263,14 @@ footer on the right.</p>
|
||||
<p>See <code>ScrollView#scrollTo</code>.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="scrolltoend"></a><a href="#scrolltoend" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>scrollToEnd()</code></h3>
|
||||
<pre><code class="hljs css javascript">scrollToEnd([options]: object)
|
||||
<pre><code class="hljs css javascript">scrollToEnd(([options]: object));
|
||||
</code></pre>
|
||||
<p>If this is a vertical ListView scrolls to the bottom.
|
||||
If this is a horizontal ListView scrolls to the right.</p>
|
||||
<p>Use <code>scrollToEnd({animated: true})</code> for smooth animated scrolling,
|
||||
<code>scrollToEnd({animated: false})</code> for immediate scrolling.
|
||||
If no options are passed, <code>animated</code> defaults to true.</p>
|
||||
<p>If this is a vertical ListView scrolls to the bottom. If this is a horizontal ListView scrolls to the right.</p>
|
||||
<p>Use <code>scrollToEnd({animated: true})</code> for smooth animated scrolling, <code>scrollToEnd({animated: false})</code> for immediate scrolling. If no options are passed, <code>animated</code> defaults to true.</p>
|
||||
<p>See <code>ScrollView#scrollToEnd</code>.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="flashscrollindicators"></a><a href="#flashscrollindicators" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>flashScrollIndicators()</code></h3>
|
||||
<pre><code class="hljs css javascript">flashScrollIndicators()
|
||||
<pre><code class="hljs css javascript">flashScrollIndicators();
|
||||
</code></pre>
|
||||
<p>Displays the scroll indicators momentarily.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
|
||||
@@ -1,19 +1,6 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Provides efficient data processing and access to the"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listviewdatasource.md" target="_blank">Edit</a><h1>ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the
|
||||
<code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for
|
||||
extracting data from the input blob, and comparing elements (with default
|
||||
implementations for convenience). The input blob can be as simple as an
|
||||
array of strings, or an object with rows nested inside section objects.</p>
|
||||
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or
|
||||
<code>cloneWithRowsAndSections</code> if you care about sections). The data in the
|
||||
data source is immutable, so you can't modify it directly. The clone methods
|
||||
suck in the new data and compute a diff for each row so ListView knows
|
||||
whether to re-render it or not.</p>
|
||||
<p>In this example, a component receives data in chunks, handled by
|
||||
<code>_onDataArrived</code>, which concats the new data onto the old data and updates the
|
||||
data source. We use <code>concat</code> to create a new array - mutating <code>this._data</code>,
|
||||
e.g. with <code>this._data.push(newRowData)</code>, would be an error. <code>_rowHasChanged</code>
|
||||
understands the shape of the row data and knows how to efficiently compare
|
||||
it.</p>
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>ListViewDataSource · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="ListViewDataSource · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Provides efficient data processing and access to the `ListView` component. A `ListViewDataSource` is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects."/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/listviewdatasource.md" target="_blank">Edit</a><h1>ListViewDataSource</h1></header><article><div><span><p>Provides efficient data processing and access to the <code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for extracting data from the input blob, and comparing elements (with default implementations for convenience). The input blob can be as simple as an array of strings, or an object with rows nested inside section objects.</p>
|
||||
<p>To update the data in the datasource, use <code>cloneWithRows</code> (or <code>cloneWithRowsAndSections</code> if you care about sections). The data in the data source is immutable, so you can't modify it directly. The clone methods suck in the new data and compute a diff for each row so ListView knows whether to re-render it or not.</p>
|
||||
<p>In this example, a component receives data in chunks, handled by <code>_onDataArrived</code>, which concats the new data onto the old data and updates the data source. We use <code>concat</code> to create a new array - mutating <code>this._data</code>, e.g. with <code>this._data.push(newRowData)</code>, would be an error. <code>_rowHasChanged</code> understands the shape of the row data and knows how to efficiently compare it.</p>
|
||||
<pre><code class="hljs">getInitialState: function() {
|
||||
<span class="hljs-keyword">var</span> ds = new ListView.DataSource({rowHasChanged: <span class="hljs-keyword">this</span>._rowHasChanged});
|
||||
<span class="hljs-keyword">return</span> {ds};
|
||||
@@ -44,11 +31,9 @@ _onDataArrived(newData) {
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="constructor"></a><a href="#constructor" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>constructor()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">constructor</span>(params)
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">constructor</span>(params);
|
||||
</code></pre>
|
||||
<p>You can provide custom extraction and <code>hasChanged</code> functions for section
|
||||
headers and rows. If absent, data will be extracted with the
|
||||
<code>defaultGetRowData</code> and <code>defaultGetSectionHeaderData</code> functions.</p>
|
||||
<p>You can provide custom extraction and <code>hasChanged</code> functions for section headers and rows. If absent, data will be extracted with the <code>defaultGetRowData</code> and <code>defaultGetSectionHeaderData</code> functions.</p>
|
||||
<p>The default extractor expects data of one of the following forms:</p>
|
||||
<pre><code class="hljs"> { sectionID_1: { rowID_1: <rowData1>, ... }, ... }
|
||||
</code></pre>
|
||||
@@ -58,8 +43,7 @@ headers and rows. If absent, data will be extracted with the
|
||||
<p>or</p>
|
||||
<pre><code class="hljs"> [ [ <rowData1>, <rowData2>, ... ], ... ]
|
||||
</code></pre>
|
||||
<p>The constructor takes in a params argument that can contain any of the
|
||||
following:</p>
|
||||
<p>The constructor takes in a params argument that can contain any of the following:</p>
|
||||
<ul>
|
||||
<li>getRowData(dataBlob, sectionID, rowID);</li>
|
||||
<li>getSectionHeaderData(dataBlob, sectionID);</li>
|
||||
@@ -68,31 +52,17 @@ following:</p>
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="clonewithrows"></a><a href="#clonewithrows" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>cloneWithRows()</code></h3>
|
||||
<pre><code class="hljs css javascript">cloneWithRows(dataBlob, rowIdentities)
|
||||
<pre><code class="hljs css javascript">cloneWithRows(dataBlob, rowIdentities);
|
||||
</code></pre>
|
||||
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and
|
||||
<code>rowIdentities</code>. The <code>dataBlob</code> is just an arbitrary blob of data. At
|
||||
construction an extractor to get the interesting information was defined
|
||||
(or the default was used).</p>
|
||||
<p>The <code>rowIdentities</code> is a 2D array of identifiers for rows.
|
||||
ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's
|
||||
assumed that the keys of the section data are the row identities.</p>
|
||||
<p>Note: This function does NOT clone the data in this data source. It simply
|
||||
passes the functions defined at construction to a new data source with
|
||||
the data specified. If you wish to maintain the existing data you must
|
||||
handle merging of old and new data separately and then pass that into
|
||||
this function as the <code>dataBlob</code>.</p>
|
||||
<p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and <code>rowIdentities</code>. The <code>dataBlob</code> is just an arbitrary blob of data. At construction an extractor to get the interesting information was defined (or the default was used).</p>
|
||||
<p>The <code>rowIdentities</code> is a 2D array of identifiers for rows. ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's assumed that the keys of the section data are the row identities.</p>
|
||||
<p>Note: This function does NOT clone the data in this data source. It simply passes the functions defined at construction to a new data source with the data specified. If you wish to maintain the existing data you must handle merging of old and new data separately and then pass that into this function as the <code>dataBlob</code>.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="clonewithrowsandsections"></a><a href="#clonewithrowsandsections" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>cloneWithRowsAndSections()</code></h3>
|
||||
<pre><code class="hljs css javascript">cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities)
|
||||
<pre><code class="hljs css javascript">cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities);
|
||||
</code></pre>
|
||||
<p>This performs the same function as the <code>cloneWithRows</code> function but here
|
||||
you also specify what your <code>sectionIdentities</code> are. If you don't care
|
||||
about sections you should safely be able to use <code>cloneWithRows</code>.</p>
|
||||
<p><code>sectionIdentities</code> is an array of identifiers for sections.
|
||||
ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes
|
||||
of the data you wish to include. If not provided, it's assumed that the
|
||||
keys of dataBlob are the section identities.</p>
|
||||
<p>This performs the same function as the <code>cloneWithRows</code> function but here you also specify what your <code>sectionIdentities</code> are. If you don't care about sections you should safely be able to use <code>cloneWithRows</code>.</p>
|
||||
<p><code>sectionIdentities</code> is an array of identifiers for sections. ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes of the data you wish to include. If not provided, it's assumed that the keys of dataBlob are the section identities.</p>
|
||||
<p>Note: this returns a new object!</p>
|
||||
<pre><code class="hljs">const dataSource = ds.cloneWithRowsAndSections({
|
||||
addresses: [<span class="hljs-string">'row 1'</span>, <span class="hljs-string">'row 2'</span>],
|
||||
@@ -101,51 +71,49 @@ keys of dataBlob are the section identities.</p>
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getrowcount"></a><a href="#getrowcount" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getRowCount()</code></h3>
|
||||
<pre><code class="hljs css javascript">getRowCount()
|
||||
<pre><code class="hljs css javascript">getRowCount();
|
||||
</code></pre>
|
||||
<p>Returns the total number of rows in the data source.</p>
|
||||
<p>If you are specifying the rowIdentities or sectionIdentities, then <code>getRowCount</code> will return the number of rows in the filtered data source.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getrowandsectioncount"></a><a href="#getrowandsectioncount" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getRowAndSectionCount()</code></h3>
|
||||
<pre><code class="hljs css javascript">getRowAndSectionCount()
|
||||
<pre><code class="hljs css javascript">getRowAndSectionCount();
|
||||
</code></pre>
|
||||
<p>Returns the total number of rows in the data source (see <code>getRowCount</code> for how this is calculated) plus the number of sections in the data.</p>
|
||||
<p>If you are specifying the rowIdentities or sectionIdentities, then <code>getRowAndSectionCount</code> will return the number of rows & sections in the filtered data source.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="rowshouldupdate"></a><a href="#rowshouldupdate" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>rowShouldUpdate()</code></h3>
|
||||
<pre><code class="hljs css javascript">rowShouldUpdate(sectionIndex, rowIndex)
|
||||
<pre><code class="hljs css javascript">rowShouldUpdate(sectionIndex, rowIndex);
|
||||
</code></pre>
|
||||
<p>Returns if the row is dirtied and needs to be rerendered</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getrowdata"></a><a href="#getrowdata" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getRowData()</code></h3>
|
||||
<pre><code class="hljs css javascript">getRowData(sectionIndex, rowIndex)
|
||||
<pre><code class="hljs css javascript">getRowData(sectionIndex, rowIndex);
|
||||
</code></pre>
|
||||
<p>Gets the data required to render the row.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getrowidforflatindex"></a><a href="#getrowidforflatindex" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getRowIDForFlatIndex()</code></h3>
|
||||
<pre><code class="hljs css javascript">getRowIDForFlatIndex(index)
|
||||
<pre><code class="hljs css javascript">getRowIDForFlatIndex(index);
|
||||
</code></pre>
|
||||
<p>Gets the rowID at index provided if the dataSource arrays were flattened,
|
||||
or null of out of range indexes.</p>
|
||||
<p>Gets the rowID at index provided if the dataSource arrays were flattened, or null of out of range indexes.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getsectionidforflatindex"></a><a href="#getsectionidforflatindex" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getSectionIDForFlatIndex()</code></h3>
|
||||
<pre><code class="hljs css javascript">getSectionIDForFlatIndex(index)
|
||||
<pre><code class="hljs css javascript">getSectionIDForFlatIndex(index);
|
||||
</code></pre>
|
||||
<p>Gets the sectionID at index provided if the dataSource arrays were flattened,
|
||||
or null for out of range indexes.</p>
|
||||
<p>Gets the sectionID at index provided if the dataSource arrays were flattened, or null for out of range indexes.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getsectionlengths"></a><a href="#getsectionlengths" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getSectionLengths()</code></h3>
|
||||
<pre><code class="hljs css javascript">getSectionLengths()
|
||||
<pre><code class="hljs css javascript">getSectionLengths();
|
||||
</code></pre>
|
||||
<p>Returns an array containing the number of rows in each section</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="sectionheadershouldupdate"></a><a href="#sectionheadershouldupdate" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>sectionHeaderShouldUpdate()</code></h3>
|
||||
<pre><code class="hljs css javascript">sectionHeaderShouldUpdate(sectionIndex)
|
||||
<pre><code class="hljs css javascript">sectionHeaderShouldUpdate(sectionIndex);
|
||||
</code></pre>
|
||||
<p>Returns if the section header is dirtied and needs to be rerendered</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getsectionheaderdata"></a><a href="#getsectionheaderdata" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getSectionHeaderData()</code></h3>
|
||||
<pre><code class="hljs css javascript">getSectionHeaderData(sectionIndex)
|
||||
<pre><code class="hljs css javascript">getSectionHeaderData(sectionIndex);
|
||||
</code></pre>
|
||||
<p>Gets the data required to render the section header</p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
|
||||
@@ -23,8 +23,7 @@
|
||||
<p>Even if the feature does belong in the core library, adding it means maintaining it. A maintainer will encourage you to submit a pull request or otherwise post your request to <a href="https://react-native.canny.io/feature-requests">Canny</a> by issuing the <code>@facebook-github-bot feature</code> command, closing the issue.</p>
|
||||
<p>An exception can be made for proposals and long-running discussions, though these should be rare. If you have been contributing to the project long enough, you will probably already have access to the <a href="https://www.facebook.com/groups/reactnativeoss/">React Native Core Contributors</a> Facebook Group, where this sort of discussion is usually held.</p></li>
|
||||
<li><p><strong>Is this issue a request for help?</strong></p>
|
||||
<p>Questions should absolutely be asked on Stack Overflow rather than GitHub. Maintainers may encourage you to ask on Stack Overflow by issuing the <code>@facebook-github-bot stack-overflow</code> command, closing the issue.
|
||||
Feel free to also answer some <a href="stackoverflow.com/questions/tagged/react-native">questions on Stack Overflow</a>, you'll get rep!</p></li>
|
||||
<p>Questions should absolutely be asked on Stack Overflow rather than GitHub. Maintainers may encourage you to ask on Stack Overflow by issuing the <code>@facebook-github-bot stack-overflow</code> command, closing the issue. Feel free to also answer some <a href="stackoverflow.com/questions/tagged/react-native">questions on Stack Overflow</a>, you'll get rep!</p></li>
|
||||
<li><p><strong>Was the <a href="https://github.com/facebook/react-native/blob/master/.github/ISSUE_TEMPLATE.md">Issue Template</a> used to fill out the issue? Did the author answer Yes to both questions at the top?</strong></p>
|
||||
<p>If not, the maintainer will ask you to provide more information by issuing the <code>@facebook-github-bot no-template</code> command, closing the issue.</p></li>
|
||||
<li><p><strong>Is the issue a duplicate of an existing, open issue?</strong></p>
|
||||
@@ -77,8 +76,7 @@ Feel free to also answer some <a href="stackoverflow.com/questions/tagged/react-
|
||||
<li><p><strong>Is the pull request missing information?</strong></p>
|
||||
<p>A test plan is required! Add the labels 'Needs revision' and 'Needs response from author'. You can then follow up with a response like:</p>
|
||||
<blockquote>
|
||||
<p>Hey @author, thanks for sending the pull request.
|
||||
Can you please add all the info specified in the <a href="https://github.com/facebook/react-native/blob/master/.github/PULL_REQUEST_TEMPLATE.md">template</a>? This is necessary for people to be able to understand and review your pull request.</p>
|
||||
<p>Hey @author, thanks for sending the pull request. Can you please add all the info specified in the <a href="https://github.com/facebook/react-native/blob/master/.github/PULL_REQUEST_TEMPLATE.md">template</a>? This is necessary for people to be able to understand and review your pull request.</p>
|
||||
</blockquote></li>
|
||||
<li><p><strong>Does the code style match the <a href="/react-native/docs/0.10/contributing.html#style-guide">Style guide</a>?</strong></p>
|
||||
<p>If not, link to the style guide and add the label 'Needs revision'.</p></li>
|
||||
@@ -108,8 +106,7 @@ Can you please add all the info specified in the <a href="https://github.com/fac
|
||||
<p>Sometimes when a maintainer says no to a pull request or close an issue, a contributor may get upset and criticize your decision. Maintainers will take steps to defuse the situation.</p>
|
||||
<p>If a contributor becomes hostile or disrespectful, they will be referred to the <a href="https://code.facebook.com/codeofconduct">Code of Conduct</a>. Negative users will be blocked, and inappropriate comments will be deleted.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="facebook-github-bot"></a><a href="#facebook-github-bot" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Facebook GitHub Bot</h2>
|
||||
<p>The Facebook GitHub Bot allows members of the community to perform administrative actions such as labeling and closing issues.
|
||||
To have access to the bot, please add your GitHub username to the first line of <a href="https://github.com/facebook/react-native/blob/master/bots/IssueCommands.txt">IssueCommands.txt</a>, in alphabetical order, by submitting a Pull Request.</p>
|
||||
<p>The Facebook GitHub Bot allows members of the community to perform administrative actions such as labeling and closing issues. To have access to the bot, please add your GitHub username to the first line of <a href="https://github.com/facebook/react-native/blob/master/bots/IssueCommands.txt">IssueCommands.txt</a>, in alphabetical order, by submitting a Pull Request.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="using-the-facebook-github-bot"></a><a href="#using-the-facebook-github-bot" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using the Facebook GitHub Bot</h3>
|
||||
<p>The bot can be triggered by adding any of the following commands as a standalone comment on an issue:</p>
|
||||
<div class="botActions">
|
||||
|
||||
@@ -21,12 +21,8 @@
|
||||
}
|
||||
}
|
||||
</span></code></pre>
|
||||
<p>The above example will render a view with a blue background that fills its
|
||||
parent, and then mask that view with text that says "Basic Mask".</p>
|
||||
<p>The alpha channel of the view rendered by the <code>maskElement</code> prop determines how
|
||||
much of the view's content and background shows through. Fully or partially
|
||||
opaque pixels allow the underlying content to show through but fully
|
||||
transparent pixels block that content.</p>
|
||||
<p>The above example will render a view with a blue background that fills its parent, and then mask that view with text that says "Basic Mask".</p>
|
||||
<p>The alpha channel of the view rendered by the <code>maskElement</code> prop determines how much of the view's content and background shows through. Fully or partially opaque pixels allow the underlying content to show through but fully transparent pixels block that content.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="props"></a><a href="#props" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.10/view.html#props">View props...</a></li>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -74,7 +74,7 @@
|
||||
<pre><code class="hljs css js"><span class="hljs-comment">// ImageView.js</span>
|
||||
|
||||
<span class="hljs-keyword">import</span> PropTypes <span class="hljs-keyword">from</span> <span class="hljs-string">'prop-types'</span>;
|
||||
<span class="hljs-keyword">import</span> { requireNativeComponent, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
<span class="hljs-keyword">import</span> {requireNativeComponent, View} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">var</span> iface = {
|
||||
<span class="hljs-attr">name</span>: <span class="hljs-string">'ImageView'</span>,
|
||||
@@ -82,13 +82,13 @@
|
||||
<span class="hljs-attr">src</span>: PropTypes.string,
|
||||
<span class="hljs-attr">borderRadius</span>: PropTypes.number,
|
||||
<span class="hljs-attr">resizeMode</span>: PropTypes.oneOf([<span class="hljs-string">'cover'</span>, <span class="hljs-string">'contain'</span>, <span class="hljs-string">'stretch'</span>]),
|
||||
...View.propTypes <span class="hljs-comment">// include the default view properties</span>
|
||||
...View.propTypes, <span class="hljs-comment">// include the default view properties</span>
|
||||
},
|
||||
};
|
||||
|
||||
<span class="hljs-built_in">module</span>.exports = requireNativeComponent(<span class="hljs-string">'RCTImageView'</span>, iface);
|
||||
</code></pre>
|
||||
<p><code>requireNativeComponent</code> commonly takes two parameters, the first is the name of the native view and the second is an object that describes the component interface. The component interface should declare a friendly <code>name</code> for use in debug messages and must declare the <code>propTypes</code> reflected by the Native View. The <code>propTypes</code> are used for checking the validity of a user's use of the native view. Note that if you need your JavaScript component to do more than just specify a name and propTypes, like do custom event handling, you can wrap the native component in a normal react component. In that case, you want to pass in the wrapper component instead of <code>iface</code> to <code>requireNativeComponent</code>. This is illustrated in the <code>MyCustomView</code> example below.</p>
|
||||
<p><code>requireNativeComponent</code> commonly takes two parameters, the first is the name of the native view and the second is an object that describes the component interface. The component interface should declare a friendly <code>name</code> for use in debug messages and must declare the <code>propTypes</code> reflected by the Native View. The <code>propTypes</code> are used for checking the validity of a user's use of the native view. Note that if you need your JavaScript component to do more than just specify a name and propTypes, like do custom event handling, you can wrap the native component in a normal react component. In that case, you want to pass in the wrapper component instead of <code>iface</code> to <code>requireNativeComponent</code>. This is illustrated in the <code>MyCustomView</code> example below.</p>
|
||||
<h1><a class="anchor" aria-hidden="true" name="events"></a><a href="#events" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Events</h1>
|
||||
<p>So now we know how to expose native view components that we can control easily from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the <code>getId()</code> method.</p>
|
||||
<pre><code class="hljs css java"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyCustomView</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">View</span> </span>{
|
||||
@@ -148,7 +148,7 @@ var RCTMyCustomView = requireNativeComponent(`RCTMyCustomView`, MyCustomView, {
|
||||
nativeOnly: {onChange: true}
|
||||
});
|
||||
</span></code></pre>
|
||||
<p>Note the use of <code>nativeOnly</code> above. Sometimes you'll have some special properties that you need to expose for the native component, but don't actually want them as part of the API for the associated React component. For example, <code>Switch</code> has a custom <code>onChange</code> handler for the raw native event, and exposes an <code>onValueChange</code> handler property that is invoked with just the boolean value rather than the raw event (similar to <code>onChangeMessage</code> in the example above). Since you don't want these native only properties to be part of the API, you don't want to put them in <code>propTypes</code>, but if you don't you'll get an error. The solution is simply to call them out via the <code>nativeOnly</code> option.</p>
|
||||
<p>Note the use of <code>nativeOnly</code> above. Sometimes you'll have some special properties that you need to expose for the native component, but don't actually want them as part of the API for the associated React component. For example, <code>Switch</code> has a custom <code>onChange</code> handler for the raw native event, and exposes an <code>onValueChange</code> handler property that is invoked with just the boolean value rather than the raw event (similar to <code>onChangeMessage</code> in the example above). Since you don't want these native only properties to be part of the API, you don't want to put them in <code>propTypes</code>, but if you don't you'll get an error. The solution is simply to call them out via the <code>nativeOnly</code> option.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="native-modules-android.html">← Native Modules</a><a class="docs-next button" href="headless-js-android.html">Headless JS →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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),
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -22,7 +22,7 @@
|
||||
<span class="hljs-keyword">import</span> com.facebook.react.bridge.ReactMethod;
|
||||
|
||||
<span class="hljs-keyword">import</span> java.util.Map;
|
||||
<span class="hljs-keyword">import</span> java.util.HashMap;
|
||||
<span class="hljs-keyword">import</span> java.util.HashMap;
|
||||
|
||||
<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ToastModule</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">ReactContextBaseJavaModule</span> </span>{
|
||||
|
||||
@@ -115,7 +115,7 @@ R<span class="hljs-function"><span class="hljs-title">eadableArray</span> -><
|
||||
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
|
||||
* ToastExample.LONG
|
||||
*/</span>
|
||||
<span class="hljs-keyword">import</span> { NativeModules } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
<span class="hljs-keyword">import</span> {NativeModules} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
<span class="hljs-built_in">module</span>.exports = NativeModules.ToastExample;
|
||||
</code></pre>
|
||||
<p>Now, from your other JavaScript file you can call the method like this:</p>
|
||||
@@ -154,7 +154,7 @@ ToastExample.show(<span class="hljs-string">'Awesome'</span>, ToastExample.SHORT
|
||||
<pre><code class="hljs css js">UIManager.measureLayout(
|
||||
<span class="hljs-number">100</span>,
|
||||
<span class="hljs-number">100</span>,
|
||||
(msg) => {
|
||||
msg => {
|
||||
<span class="hljs-built_in">console</span>.log(msg);
|
||||
},
|
||||
(x, y, width, height) => {
|
||||
@@ -199,12 +199,10 @@ ToastExample.show(<span class="hljs-string">'Awesome'</span>, ToastExample.SHORT
|
||||
<p>The JavaScript counterpart of this method returns a Promise. This means you can use the <code>await</code> keyword within an async function to call it and wait for its result:</p>
|
||||
<pre><code class="hljs css js"><span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">measureLayout</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">try</span> {
|
||||
<span class="hljs-keyword">var</span> {
|
||||
relativeX,
|
||||
relativeY,
|
||||
width,
|
||||
height,
|
||||
} = <span class="hljs-keyword">await</span> UIManager.measureLayout(<span class="hljs-number">100</span>, <span class="hljs-number">100</span>);
|
||||
<span class="hljs-keyword">var</span> {relativeX, relativeY, width, height} = <span class="hljs-keyword">await</span> UIManager.measureLayout(
|
||||
<span class="hljs-number">100</span>,
|
||||
<span class="hljs-number">100</span>
|
||||
);
|
||||
|
||||
<span class="hljs-built_in">console</span>.log(relativeX + <span class="hljs-string">':'</span> + relativeY + <span class="hljs-string">':'</span> + width + <span class="hljs-string">':'</span> + height);
|
||||
} <span class="hljs-keyword">catch</span> (e) {
|
||||
|
||||
@@ -42,7 +42,7 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name l
|
||||
}
|
||||
</code></pre>
|
||||
<p>Now, from your JavaScript file you can call the method like this:</p>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> { NativeModules } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> {NativeModules} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
<span class="hljs-keyword">var</span> CalendarManager = NativeModules.CalendarManager;
|
||||
CalendarManager.addEvent(<span class="hljs-string">'Birthday Party'</span>, <span class="hljs-string">'4 Privet Drive, Surrey'</span>);
|
||||
</code></pre>
|
||||
@@ -81,12 +81,20 @@ CalendarManager.addEvent(<span class="hljs-string">'Birthday Party'</span>, <spa
|
||||
}
|
||||
</code></pre>
|
||||
<p>You would then call this from JavaScript by using either:</p>
|
||||
<pre><code class="hljs css javascript">CalendarManager.addEvent(<span class="hljs-string">'Birthday Party'</span>, <span class="hljs-string">'4 Privet Drive, Surrey'</span>, date.getTime()); <span class="hljs-comment">// passing date as number of milliseconds since Unix epoch</span>
|
||||
<pre><code class="hljs css javascript">CalendarManager.addEvent(
|
||||
<span class="hljs-string">'Birthday Party'</span>,
|
||||
<span class="hljs-string">'4 Privet Drive, Surrey'</span>,
|
||||
date.getTime()
|
||||
); <span class="hljs-comment">// passing date as number of milliseconds since Unix epoch</span>
|
||||
</code></pre>
|
||||
<p>or</p>
|
||||
<pre><code class="hljs css javascript">CalendarManager.addEvent(<span class="hljs-string">'Birthday Party'</span>, <span class="hljs-string">'4 Privet Drive, Surrey'</span>, date.toISOString()); <span class="hljs-comment">// passing date as ISO-8601 string</span>
|
||||
<pre><code class="hljs css javascript">CalendarManager.addEvent(
|
||||
<span class="hljs-string">'Birthday Party'</span>,
|
||||
<span class="hljs-string">'4 Privet Drive, Surrey'</span>,
|
||||
date.toISOString()
|
||||
); <span class="hljs-comment">// passing date as ISO-8601 string</span>
|
||||
</code></pre>
|
||||
<p>And both values would get converted correctly to the native <code>NSDate</code>. A bad value, like an <code>Array</code>, would generate a helpful "RedBox" error message.</p>
|
||||
<p>And both values would get converted correctly to the native <code>NSDate</code>. A bad value, like an <code>Array</code>, would generate a helpful "RedBox" error message.</p>
|
||||
<p>As <code>CalendarManager.addEvent</code> method gets more and more complex, the number of arguments will grow. Some of them might be optional. In this case it's worth considering changing the API a little bit to accept a dictionary of event attributes, like this:</p>
|
||||
<pre><code class="hljs css objectivec"><span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTConvert.h></span></span>
|
||||
|
||||
@@ -101,8 +109,8 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name d
|
||||
<pre><code class="hljs css javascript">CalendarManager.addEvent(<span class="hljs-string">'Birthday Party'</span>, {
|
||||
<span class="hljs-attr">location</span>: <span class="hljs-string">'4 Privet Drive, Surrey'</span>,
|
||||
<span class="hljs-attr">time</span>: date.getTime(),
|
||||
<span class="hljs-attr">description</span>: <span class="hljs-string">'...'</span>
|
||||
})
|
||||
<span class="hljs-attr">description</span>: <span class="hljs-string">'...'</span>,
|
||||
});
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p><strong>NOTE</strong>: About array and map</p>
|
||||
@@ -127,10 +135,10 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name d
|
||||
} <span class="hljs-keyword">else</span> {
|
||||
<span class="hljs-keyword">this</span>.setState({<span class="hljs-attr">events</span>: events});
|
||||
}
|
||||
})
|
||||
});
|
||||
</code></pre>
|
||||
<p>A native module should invoke its callback exactly once. It's okay to store the callback and invoke it later. This pattern is often used to wrap iOS APIs that require delegates - see <a href="https://github.com/facebook/react-native/blob/master/React/Modules/RCTAlertManager.m"><code>RCTAlertManager</code></a> for an example. If the callback is never invoked, some memory is leaked. If both <code>onSuccess</code> and <code>onFail</code> callbacks are passed, you should only invoke one of them.</p>
|
||||
<p>If you want to pass error-like objects to JavaScript, use <code>RCTMakeError</code> from <a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTUtils.h"><code>RCTUtils.h</code></a>. Right now this just passes an Error-shaped dictionary to JavaScript, but we would like to automatically generate real JavaScript <code>Error</code> objects in the future.</p>
|
||||
<p>If you want to pass error-like objects to JavaScript, use <code>RCTMakeError</code> from <a href="https://github.com/facebook/react-native/blob/master/React/Base/RCTUtils.h"><code>RCTUtils.h</code></a>. Right now this just passes an Error-shaped dictionary to JavaScript, but we would like to automatically generate real JavaScript <code>Error</code> objects in the future.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="promises"></a><a href="#promises" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Promises</h2>
|
||||
<p>Native modules can also fulfill a promise, which can simplify your code, especially when using ES2016's <code>async/await</code> syntax. When the last parameters of a bridged native method are an <code>RCTPromiseResolveBlock</code> and <code>RCTPromiseRejectBlock</code>, its corresponding JS method will return a JS Promise object.</p>
|
||||
<p>Refactoring the above code to use a promise instead of callbacks looks like this:</p>
|
||||
@@ -152,7 +160,7 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name d
|
||||
<span class="hljs-keyword">try</span> {
|
||||
<span class="hljs-keyword">var</span> events = <span class="hljs-keyword">await</span> CalendarManager.findEvents();
|
||||
|
||||
<span class="hljs-keyword">this</span>.setState({ events });
|
||||
<span class="hljs-keyword">this</span>.setState({events});
|
||||
} <span class="hljs-keyword">catch</span> (e) {
|
||||
<span class="hljs-built_in">console</span>.error(e);
|
||||
}
|
||||
@@ -161,7 +169,7 @@ RCT_EXPORT_METHOD(addEvent:(<span class="hljs-built_in">NSString</span> *)name d
|
||||
updateEvents();
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" name="threading"></a><a href="#threading" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Threading</h2>
|
||||
<p>The native module should not have any assumptions about what thread it is being called on. React Native invokes native modules methods on a separate serial GCD queue, but this is an implementation detail and might change. The <code>- (dispatch_queue_t)methodQueue</code> method allows the native module to specify which queue its methods should be run on. For example, if it needs to use a main-thread-only iOS API, it should specify this via:</p>
|
||||
<p>The native module should not have any assumptions about what thread it is being called on. React Native invokes native modules methods on a separate serial GCD queue, but this is an implementation detail and might change. The <code>- (dispatch_queue_t)methodQueue</code> method allows the native module to specify which queue its methods should be run on. For example, if it needs to use a main-thread-only iOS API, it should specify this via:</p>
|
||||
<pre><code class="hljs css objectivec">- (<span class="hljs-built_in">dispatch_queue_t</span>)methodQueue
|
||||
{
|
||||
<span class="hljs-keyword">return</span> dispatch_get_main_queue();
|
||||
@@ -324,7 +332,7 @@ subscription.remove();
|
||||
<span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">addEvent</span><span class="hljs-params">(name: String, location: String, date: NSNumber)</span></span> -> <span class="hljs-type">Void</span> {
|
||||
<span class="hljs-comment">// Date is ready to use!</span>
|
||||
}
|
||||
|
||||
|
||||
<span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">constantsToExport</span><span class="hljs-params">()</span></span> -> [<span class="hljs-type">AnyHashable</span>: <span class="hljs-type">Any</span>]! {
|
||||
<span class="hljs-keyword">return</span> [<span class="hljs-string">"someKey"</span>: <span class="hljs-string">"someValue"</span>]
|
||||
}
|
||||
|
||||
+10
-11
@@ -5,8 +5,7 @@
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</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/navigation.md" target="_blank">Edit</a><h1>Navigating Between Screens</h1></header><article><div><span><p>Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.</p>
|
||||
<p>This guide covers the various navigation components available in React Native.
|
||||
If you are just getting started with navigation, you will probably want to use <a href="/react-native/docs/0.10/navigation.html#react-navigation">React Navigation</a>. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android. As this is a JavaScript implementation, it provides the greatest amount of configurability as well as flexibility when integrating with state management libraries such as <a href="https://reactnavigation.org/docs/guides/redux">redux</a>.</p>
|
||||
<p>This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use <a href="/react-native/docs/0.10/navigation.html#react-navigation">React Navigation</a>. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android. As this is a JavaScript implementation, it provides the greatest amount of configurability as well as flexibility when integrating with state management libraries such as <a href="https://reactnavigation.org/docs/guides/redux">redux</a>.</p>
|
||||
<p>If you're only targeting iOS, you may want to also check out <a href="/react-native/docs/0.10/navigation.html#navigatorios">NavigatorIOS</a> as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native <code>UINavigationController</code> class. This component will not work on Android, however.</p>
|
||||
<p>If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following libraries provide native navigation on both platforms: <a href="http://airbnb.io/native-navigation/">native-navigation</a>, <a href="https://github.com/wix/react-native-navigation">react-native-navigation</a>.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="react-navigation"></a><a href="#react-navigation" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Navigation</h2>
|
||||
@@ -52,7 +51,7 @@ const App = StackNavigator({
|
||||
initialRoute={{
|
||||
<span class="hljs-attr">component</span>: MyScene,
|
||||
<span class="hljs-attr">title</span>: <span class="hljs-string">'My Initial Scene'</span>,
|
||||
<span class="hljs-attr">passProps</span>: { <span class="hljs-attr">myProp</span>: <span class="hljs-string">'foo'</span> },
|
||||
<span class="hljs-attr">passProps</span>: {<span class="hljs-attr">myProp</span>: <span class="hljs-string">'foo'</span>},
|
||||
}}
|
||||
/>
|
||||
</code></pre>
|
||||
@@ -60,7 +59,7 @@ const App = StackNavigator({
|
||||
<p>As <code>NavigatorIOS</code> leverages native UIKit navigation, it will automatically render a navigation bar with a back button and title.</p>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> PropTypes <span class="hljs-keyword">from</span> <span class="hljs-string">'prop-types'</span>;
|
||||
<span class="hljs-keyword">import</span> { Button, NavigatorIOS, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
<span class="hljs-keyword">import</span> {Button, NavigatorIOS, Text, View} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">NavigatorIOSApp</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
|
||||
render() {
|
||||
@@ -73,42 +72,42 @@ const App = StackNavigator({
|
||||
}}
|
||||
style={{flex: 1}}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class MyScene extends React.Component {
|
||||
static propTypes = {
|
||||
route: PropTypes.shape({
|
||||
title: PropTypes.string.isRequired
|
||||
title: PropTypes.string.isRequired,
|
||||
}),
|
||||
navigator: PropTypes.object.isRequired,
|
||||
}
|
||||
};
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
this._onForward = this._onForward.bind(this);
|
||||
}
|
||||
|
||||
|
||||
_onForward() {
|
||||
let nextIndex = ++this.props.index;
|
||||
this.props.navigator.push({
|
||||
component: MyScene,
|
||||
title: 'Scene ' + nextIndex,
|
||||
passProps: {index: nextIndex}
|
||||
passProps: {index: nextIndex},
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<Text>Current Scene: { this.props.title }</Text>
|
||||
<Text>Current Scene: {this.props.title}</Text>
|
||||
<Button
|
||||
onPress={this._onForward}
|
||||
title="Tap me to load the next scene"
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
+22
-33
File diff suppressed because one or more lines are too long
+29
-69
File diff suppressed because one or more lines are too long
@@ -1,12 +1,6 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>PanResponder · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="PanResponder · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="`PanResponder` reconciles several touches into a single gesture. It makes"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/panresponder.md" target="_blank">Edit</a><h1>PanResponder</h1></header><article><div><span><p><code>PanResponder</code> reconciles several touches into a single gesture. It makes
|
||||
single-touch gestures resilient to extra touches, and can be used to
|
||||
recognize simple multi-touch gestures.</p>
|
||||
<p>By default, <code>PanResponder</code> holds an <code>InteractionManager</code> handle to block
|
||||
long-running JS events from interrupting active gestures.</p>
|
||||
<p>It provides a predictable wrapper of the responder handlers provided by the
|
||||
<a href="/react-native/docs/0.10/gesture-responder-system.html">gesture responder system</a>.
|
||||
For each handler, it provides a new <code>gestureState</code> object alongside the
|
||||
native event object:</p>
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>PanResponder · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="PanResponder · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="`PanResponder` reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize simple multi-touch gestures."/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/panresponder.md" target="_blank">Edit</a><h1>PanResponder</h1></header><article><div><span><p><code>PanResponder</code> reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize simple multi-touch gestures.</p>
|
||||
<p>By default, <code>PanResponder</code> holds an <code>InteractionManager</code> handle to block long-running JS events from interrupting active gestures.</p>
|
||||
<p>It provides a predictable wrapper of the responder handlers provided by the <a href="/react-native/docs/0.10/gesture-responder-system.html">gesture responder system</a>. For each handler, it provides a new <code>gestureState</code> object alongside the native event object:</p>
|
||||
<pre><code class="hljs">onPanResponderMove: <span class="hljs-function"><span class="hljs-params">(event, gestureState)</span> =></span> {}
|
||||
</code></pre>
|
||||
<p>A native event is a synthetic touch event with the following form:</p>
|
||||
@@ -26,8 +20,7 @@ native event object:</p>
|
||||
</ul>
|
||||
<p>A <code>gestureState</code> object has the following:</p>
|
||||
<ul>
|
||||
<li><code>stateID</code> - ID of the gestureState- persisted as long as there at least
|
||||
one touch on screen</li>
|
||||
<li><code>stateID</code> - ID of the gestureState- persisted as long as there at least one touch on screen</li>
|
||||
<li><code>moveX</code> - the latest screen coordinates of the recently-moved touch</li>
|
||||
<li><code>moveY</code> - the latest screen coordinates of the recently-moved touch</li>
|
||||
<li><code>x0</code> - the screen coordinates of the responder grant</li>
|
||||
@@ -81,11 +74,9 @@ one touch on screen</li>
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> {<span class="hljs-attr">...this._panResponder.panHandlers</span>} /></span>
|
||||
);
|
||||
},
|
||||
|
||||
</span></code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" name="working-example"></a><a href="#working-example" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Working Example</h3>
|
||||
<p>To see it in action, try the
|
||||
<a href="https://github.com/facebook/react-native/blob/master/RNTester/js/PanResponderExample.js">PanResponder example in RNTester</a></p>
|
||||
<p>To see it in action, try the <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/PanResponderExample.js">PanResponder example in RNTester</a></p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.10/panresponder.html#create"><code>create</code></a></li>
|
||||
@@ -94,11 +85,9 @@ one touch on screen</li>
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="create"></a><a href="#create" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>create()</code></h3>
|
||||
<pre><code class="hljs css javascript">PanResponder.create(config)
|
||||
<pre><code class="hljs css javascript">PanResponder.create(config);
|
||||
</code></pre>
|
||||
<p>Enhanced versions of all of the responder callbacks
|
||||
that provide not only the typical <code>ResponderSyntheticEvent</code>, but also the <code>PanResponder</code> gesture state. Simply replace the word <code>Responder</code> with
|
||||
<code>PanResponder</code> in each of the typical <code>onResponder*</code> callbacks.</p>
|
||||
<p>Enhanced versions of all of the responder callbacks that provide not only the typical <code>ResponderSyntheticEvent</code>, but also the <code>PanResponder</code> gesture state. Simply replace the word <code>Responder</code> with <code>PanResponder</code> in each of the typical <code>onResponder*</code> callbacks.</p>
|
||||
<p>For example, the <code>config</code> object would look like:</p>
|
||||
<ul>
|
||||
<li><code>onMoveShouldSetPanResponder: (e, gestureState) => {...}</code></li>
|
||||
@@ -116,7 +105,7 @@ that provide not only the typical <code>ResponderSyntheticEvent</code>, but also
|
||||
<li><code>onShouldBlockNativeResponder: (e, gestureState) => {...}</code></li>
|
||||
</ul>
|
||||
<p>In general, for events that have capture equivalents, we update the gestureState once in the capture phase and can use it in the bubble phase as well.</p>
|
||||
<p>Be careful with onStartShould* callbacks. They only reflect updated <code>gestureState</code> for start/end events that bubble/capture to the Node. Once the node is the responder, you can rely on every start/end event being processed by the gesture and <code>gestureState</code> being updated accordingly. (numberActiveTouches) may not be totally accurate unless you are the responder.</p>
|
||||
<p>Be careful with onStartShould* callbacks. They only reflect updated <code>gestureState</code> for start/end events that bubble/capture to the Node. Once the node is the responder, you can rely on every start/end event being processed by the gesture and <code>gestureState</code> being updated accordingly. (numberActiveTouches) may not be totally accurate unless you are the responder.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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),
|
||||
|
||||
+40
-137
File diff suppressed because one or more lines are too long
@@ -8,30 +8,30 @@
|
||||
the Create React Native App repository.
|
||||
</p>
|
||||
</div>
|
||||
<p><code>PermissionsAndroid</code> provides access to Android M's new permissions model. Some permissions are granted by default when the application is installed so long as they appear in <code>AndroidManifest.xml</code>. However, "dangerous" permissions require a dialog prompt. You should use this module for those
|
||||
permissions.</p>
|
||||
<p><code>PermissionsAndroid</code> provides access to Android M's new permissions model. Some permissions are granted by default when the application is installed so long as they appear in <code>AndroidManifest.xml</code>. However, "dangerous" permissions require a dialog prompt. You should use this module for those permissions.</p>
|
||||
<p>On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest, so <code>check</code> and <code>request</code> should always be true.</p>
|
||||
<p>If a user has previously turned off a permission that you prompt for, the OS will advise your app to show a rationale for needing the permission. The optional <code>rationale</code> argument will show a dialog prompt only if necessary - otherwise the normal permission prompt will appear.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="example"></a><a href="#example" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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</h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> { PermissionsAndroid } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> {PermissionsAndroid} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">requestCameraPermission</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">try</span> {
|
||||
<span class="hljs-keyword">const</span> granted = <span class="hljs-keyword">await</span> PermissionsAndroid.request(
|
||||
PermissionsAndroid.PERMISSIONS.CAMERA,
|
||||
{
|
||||
<span class="hljs-string">'title'</span>: <span class="hljs-string">'Cool Photo App Camera Permission'</span>,
|
||||
<span class="hljs-string">'message'</span>: <span class="hljs-string">'Cool Photo App needs access to your camera '</span> +
|
||||
<span class="hljs-string">'so you can take awesome pictures.'</span>
|
||||
<span class="hljs-attr">title</span>: <span class="hljs-string">'Cool Photo App Camera Permission'</span>,
|
||||
<span class="hljs-attr">message</span>:
|
||||
<span class="hljs-string">'Cool Photo App needs access to your camera '</span> +
|
||||
<span class="hljs-string">'so you can take awesome pictures.'</span>,
|
||||
}
|
||||
)
|
||||
);
|
||||
<span class="hljs-keyword">if</span> (granted === PermissionsAndroid.RESULTS.GRANTED) {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"You can use the camera"</span>)
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'You can use the camera'</span>);
|
||||
} <span class="hljs-keyword">else</span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Camera permission denied"</span>)
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Camera permission denied'</span>);
|
||||
}
|
||||
} <span class="hljs-keyword">catch</span> (err) {
|
||||
<span class="hljs-built_in">console</span>.warn(err)
|
||||
<span class="hljs-built_in">console</span>.warn(err);
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
@@ -48,11 +48,11 @@ permissions.</p>
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="constructor"></a><a href="#constructor" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>constructor()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">constructor</span>()
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">constructor</span>();
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="check"></a><a href="#check" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>check()</code></h3>
|
||||
<pre><code class="hljs css javascript">check(permission)
|
||||
<pre><code class="hljs css javascript">check(permission);
|
||||
</code></pre>
|
||||
<p>Returns a promise resolving to a boolean value as to whether the specified permissions has been granted</p>
|
||||
<hr>
|
||||
@@ -63,12 +63,12 @@ permissions.</p>
|
||||
<p>If the optional rationale argument is included (which is an object with a <code>title</code> and <code>message</code>), this function checks with the OS whether it is necessary to show a dialog <a href="https://developer.android.com/training/permissions/requesting.html#explain">explaining why the permission is needed</a> and then shows the system permission dialog</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="requestmultiple"></a><a href="#requestmultiple" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>requestMultiple()</code></h3>
|
||||
<pre><code class="hljs css javascript">requestMultiple(permissions)
|
||||
<pre><code class="hljs css javascript">requestMultiple(permissions);
|
||||
</code></pre>
|
||||
<p>Prompts the user to enable multiple permissions in the same dialog and returns an object with the permissions as keys and strings as values indicating whether the user allowed or denied the request</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="checkpermission"></a><a href="#checkpermission" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>checkPermission()</code></h3>
|
||||
<pre><code class="hljs css javascript">checkPermission(permission)
|
||||
<pre><code class="hljs css javascript">checkPermission(permission);
|
||||
</code></pre>
|
||||
<p><strong>DEPRECATED</strong> - use <a href="/react-native/docs/0.10/permissionsandroid.html#check">check</a></p>
|
||||
<p>Returns a promise resolving to a boolean value as to whether the specified permissions has been granted</p>
|
||||
|
||||
@@ -22,8 +22,7 @@
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="props"></a><a href="#props" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="onvaluechange"></a><a href="#onvaluechange" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>onValueChange</code></h3>
|
||||
<p>Callback for when an item is selected. This is called with the following
|
||||
parameters:</p>
|
||||
<p>Callback for when an item is selected. This is called with the following parameters:</p>
|
||||
<ul>
|
||||
<li><code>itemValue</code>: the <code>value</code> prop of the item that was selected</li>
|
||||
<li><code>itemPosition</code>: the index of the selected item in this picker</li>
|
||||
@@ -49,8 +48,7 @@ parameters:</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="enabled"></a><a href="#enabled" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>enabled</code></h3>
|
||||
<p>If set to false, the picker will be disabled, i.e. the user will not be able to
|
||||
make a selection.</p>
|
||||
<p>If set to false, the picker will be disabled, i.e. the user will not be able to make a selection.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
@@ -61,8 +59,7 @@ make a selection.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="mode"></a><a href="#mode" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>mode</code></h3>
|
||||
<p>On Android, specifies how to display the selection items when the user taps on
|
||||
the picker:</p>
|
||||
<p>On Android, specifies how to display the selection items when the user taps on the picker:</p>
|
||||
<ul>
|
||||
<li>'dialog': Show a modal dialog. This is the default.</li>
|
||||
<li>'dropdown': Shows a dropdown anchored to the picker view</li>
|
||||
@@ -77,8 +74,7 @@ the picker:</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="prompt"></a><a href="#prompt" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>prompt</code></h3>
|
||||
<p>Prompt string for this picker, used on Android in dialog mode as the title of
|
||||
the dialog.</p>
|
||||
<p>Prompt string for this picker, used on Android in dialog mode as the title of the dialog.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
|
||||
@@ -7,17 +7,11 @@
|
||||
</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/pixelratio.md" target="_blank">Edit</a><h1>PixelRatio</h1></header><article><div><span><p>PixelRatio class gives access to the device pixel density.</p>
|
||||
<p>There are a few use cases for using PixelRatio:</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="displaying-a-line-that-s-as-thin-as-the-device-permits"></a><a href="#displaying-a-line-that-s-as-thin-as-the-device-permits" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Displaying a line that's as thin as the device permits</h3>
|
||||
<p>A width of 1 is actually pretty thick on devices with high pixel density
|
||||
(such as iPhone 4+ and many Android devices), we can make one that's
|
||||
thinner using a width of <code>1 / PixelRatio.get()</code>.
|
||||
It's a technique that works on all the devices independent of their
|
||||
pixel density.</p>
|
||||
<p>A width of 1 is actually pretty thick on devices with high pixel density (such as iPhone 4+ and many Android devices), we can make one that's thinner using a width of <code>1 / PixelRatio.get()</code>. It's a technique that works on all the devices independent of their pixel density.</p>
|
||||
<pre><code class="hljs"><span class="hljs-attr">style</span>={{ borderWidth: <span class="hljs-number">1</span> / PixelRatio.get() }}
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" name="fetching-a-correctly-sized-image"></a><a href="#fetching-a-correctly-sized-image" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Fetching a correctly sized image</h3>
|
||||
<p>You should get a higher resolution image if you are on a high pixel density
|
||||
device. A good rule of thumb is to multiply the size of the image you display
|
||||
by the pixel ratio.</p>
|
||||
<p>You should get a higher resolution image if you are on a high pixel density device. A good rule of thumb is to multiply the size of the image you display by the pixel ratio.</p>
|
||||
<pre><code class="hljs"><span class="hljs-built_in">var</span> <span class="hljs-built_in">image</span> = getImage({
|
||||
<span class="hljs-built_in">width</span>: PixelRatio.getPixelSizeForLayoutSize(<span class="hljs-number">200</span>),
|
||||
<span class="hljs-built_in">height</span>: PixelRatio.getPixelSizeForLayoutSize(<span class="hljs-number">100</span>),
|
||||
@@ -68,13 +62,9 @@ by the pixel ratio.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getfontscale"></a><a href="#getfontscale" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getFontScale()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> getFontScale()
|
||||
</code></pre>
|
||||
<p>Returns the scaling factor for font sizes. This is the ratio that is used to calculate the
|
||||
absolute font size, so any elements that heavily depend on that should use this to do
|
||||
calculations.</p>
|
||||
<p>Returns the scaling factor for font sizes. This is the ratio that is used to calculate the absolute font size, so any elements that heavily depend on that should use this to do calculations.</p>
|
||||
<p>If a font scale is not set, this returns the device pixel ratio.</p>
|
||||
<p>Currently this is only implemented on Android and reflects the user preference set in
|
||||
Settings > Display > Font size, on iOS it will always return the default pixel ratio.
|
||||
@platform android</p>
|
||||
<p>Currently this is only implemented on Android and reflects the user preference set in Settings > Display > Font size, on iOS it will always return the default pixel ratio. @platform android</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="getpixelsizeforlayoutsize"></a><a href="#getpixelsizeforlayoutsize" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>getPixelSizeForLayoutSize()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> getPixelSizeForLayoutSize(layoutSize)
|
||||
|
||||
@@ -13,15 +13,15 @@
|
||||
<p>Certain components may have properties that work on one platform only. All of these props are annotated with <code>@platform</code> and have a small badge next to them on the website.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="platform-module"></a><a href="#platform-module" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Platform module</h2>
|
||||
<p>React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.</p>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> { Platform, StyleSheet } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> {Platform, StyleSheet} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
|
||||
<span class="hljs-attr">height</span>: (Platform.OS === <span class="hljs-string">'ios'</span>) ? <span class="hljs-number">200</span> : <span class="hljs-number">100</span>,
|
||||
<span class="hljs-attr">height</span>: Platform.OS === <span class="hljs-string">'ios'</span> ? <span class="hljs-number">200</span> : <span class="hljs-number">100</span>,
|
||||
});
|
||||
</code></pre>
|
||||
<p><code>Platform.OS</code> will be <code>ios</code> when running on iOS and <code>android</code> when running on Android.</p>
|
||||
<p>There is also a <code>Platform.select</code> method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.</p>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> { Platform, StyleSheet } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> {Platform, StyleSheet} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> styles = StyleSheet.create({
|
||||
<span class="hljs-attr">container</span>: {
|
||||
@@ -48,7 +48,7 @@
|
||||
</span></code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" name="detecting-the-android-version"></a><a href="#detecting-the-android-version" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Detecting the Android version</h3>
|
||||
<p>On Android, the <code>Platform</code> module can also be used to detect the version of the Android Platform in which the app is running:</p>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> { Platform } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> {Platform} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">if</span> (Platform.Version === <span class="hljs-number">25</span>) {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Running on Nougat!'</span>);
|
||||
@@ -56,11 +56,11 @@
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" name="detecting-the-ios-version"></a><a href="#detecting-the-ios-version" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Detecting the iOS version</h3>
|
||||
<p>On iOS, the <code>Version</code> is a result of <code>-[UIDevice systemVersion]</code>, which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:</p>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> { Platform } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> {Platform} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> majorVersionIOS = <span class="hljs-built_in">parseInt</span>(Platform.Version, <span class="hljs-number">10</span>);
|
||||
<span class="hljs-keyword">if</span> (majorVersionIOS <= <span class="hljs-number">9</span>) {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Work around a change in behavior'</span>);
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Work around a change in behavior'</span>);
|
||||
}
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" name="platform-specific-extensions"></a><a href="#platform-specific-extensions" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Platform-specific extensions</h2>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>ProgressBarAndroid · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="ProgressBarAndroid · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="React component that wraps the Android-only `ProgressBar`. This component is used to indicate"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/progressbarandroid.md" target="_blank">Edit</a><h1>ProgressBarAndroid</h1></header><article><div><span><p>React component that wraps the Android-only <code>ProgressBar</code>. This component is used to indicate
|
||||
that the app is loading or there is some activity in the app.</p>
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>ProgressBarAndroid · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="ProgressBarAndroid · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="React component that wraps the Android-only `ProgressBar`. This component is used to indicate that the app is loading or there is some activity in the app."/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/progressbarandroid.md" target="_blank">Edit</a><h1>ProgressBarAndroid</h1></header><article><div><span><p>React component that wraps the Android-only <code>ProgressBar</code>. This component is used to indicate that the app is loading or there is some activity in the app.</p>
|
||||
<p>Example:</p>
|
||||
<pre><code class="hljs">render: function() {
|
||||
var progressBar =
|
||||
@@ -52,8 +51,7 @@ that the app is loading or there is some activity in the app.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="indeterminate"></a><a href="#indeterminate" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>indeterminate</code></h3>
|
||||
<p>If the progress bar will show indeterminate progress. Note that this
|
||||
can only be false if styleAttr is Horizontal.</p>
|
||||
<p>If the progress bar will show indeterminate progress. Note that this can only be false if styleAttr is Horizontal.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
|
||||
@@ -5,8 +5,7 @@
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</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/props.md" target="_blank">Edit</a><h1>Props</h1></header><article><div><span><p>Most components can be customized when they are created, with different parameters. These creation parameters are called <code>props</code>.</p>
|
||||
<p>For example, one basic React Native component is the <code>Image</code>. When you
|
||||
create an image, you can use a prop named <code>source</code> to control what image it shows.</p>
|
||||
<p>For example, one basic React Native component is the <code>Image</code>. When you create an image, you can use a prop named <code>source</code> to control what image it shows.</p>
|
||||
<div class="web-player"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { AppRegistry, Image } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
@@ -26,9 +25,7 @@ AppRegistry.registerComponent('AwesomeProject', () => Bananas);
|
||||
</span></code></pre><iframe style="margin-top: 4" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Image%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20Bananas%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20let%20pic%20%3D%20%7B%0A%20%20%20%20%20%20uri%3A%20'https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fd%2Fde%2FBananavarieties.jpg'%0A%20%20%20%20%7D%3B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CImage%20source%3D%7Bpic%7D%20style%3D%7B%7Bwidth%3A%20193%2C%20height%3A%20110%7D%7D%2F%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20Bananas)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<p>Notice that <code>{pic}</code> is surrounded by braces, to embed the variable <code>pic</code> into JSX. You can put any JavaScript expression inside braces in JSX.</p>
|
||||
<p>Your own components can also use <code>props</code>. This lets you make a single component
|
||||
that is used in many different places in your app, with slightly different
|
||||
properties in each place. Just refer to <code>this.props</code> in your <code>render</code> function. Here's an example:</p>
|
||||
<p>Your own components can also use <code>props</code>. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Just refer to <code>this.props</code> in your <code>render</code> function. Here's an example:</p>
|
||||
<div class="web-player"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { AppRegistry, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
@@ -57,10 +54,8 @@ AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);
|
||||
</code></pre><iframe style="margin-top: 4" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Greeting%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3EHello%20%7Bthis.props.name%7D!%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20LotsOfGreetings%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7BalignItems%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Rexxar'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Jaina'%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CGreeting%20name%3D'Valeera'%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20LotsOfGreetings)%3B%0A" frame-border="0"></iframe></div>
|
||||
|
||||
<p>Using <code>name</code> as a prop lets us customize the <code>Greeting</code> component, so we can reuse that component for each of our greetings. This example also uses the <code>Greeting</code> component in JSX, just like the built-in components. The power to do this is what makes React so cool - if you find yourself wishing that you had a different set of UI primitives to work with, you just invent new ones.</p>
|
||||
<p>The other new thing going on here is the <a href="/react-native/docs/0.10/view.html"><code>View</code></a> component. A <a href="/react-native/docs/0.10/view.html"><code>View</code></a> is useful
|
||||
as a container for other components, to help control style and layout.</p>
|
||||
<p>With <code>props</code> and the basic <a href="/react-native/docs/0.10/text.html"><code>Text</code></a>, <a href="/react-native/docs/0.10/image.html"><code>Image</code></a>, and <a href="/react-native/docs/0.10/view.html"><code>View</code></a> components, you can
|
||||
build a wide variety of static screens. To learn how to make your app change over time, you need to <a href="/react-native/docs/0.10/state.html">learn about State</a>.</p>
|
||||
<p>The other new thing going on here is the <a href="/react-native/docs/0.10/view.html"><code>View</code></a> component. A <a href="/react-native/docs/0.10/view.html"><code>View</code></a> is useful as a container for other components, to help control style and layout.</p>
|
||||
<p>With <code>props</code> and the basic <a href="/react-native/docs/0.10/text.html"><code>Text</code></a>, <a href="/react-native/docs/0.10/image.html"><code>Image</code></a>, and <a href="/react-native/docs/0.10/view.html"><code>View</code></a> components, you can build a wide variety of static screens. To learn how to make your app change over time, you need to <a href="/react-native/docs/0.10/state.html">learn about State</a>.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="tutorial.html">← Learn the Basics</a><a class="docs-next button" href="state.html">State →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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),
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,6 +1,4 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>RefreshControl · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="RefreshControl · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="This component is used inside a ScrollView or ListView to add pull to refresh"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/refreshcontrol.md" target="_blank">Edit</a><h1>RefreshControl</h1></header><article><div><span><p>This component is used inside a ScrollView or ListView to add pull to refresh
|
||||
functionality. When the ScrollView is at <code>scrollY: 0</code>, swiping down
|
||||
triggers an <code>onRefresh</code> event.</p>
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>RefreshControl · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="RefreshControl · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event."/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/refreshcontrol.md" target="_blank">Edit</a><h1>RefreshControl</h1></header><article><div><span><p>This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at <code>scrollY: 0</code>, swiping down triggers an <code>onRefresh</code> event.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="usage-example"></a><a href="#usage-example" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Usage example</h3>
|
||||
<pre><code class="hljs css js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">RefreshableList</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
||||
<span class="hljs-keyword">constructor</span>(props) {
|
||||
@@ -35,8 +33,7 @@ triggers an <code>onRefresh</code> event.</p>
|
||||
...
|
||||
}
|
||||
</span></code></pre>
|
||||
<p><strong>Note:</strong> <code>refreshing</code> is a controlled prop, this is why it needs to be set to true
|
||||
in the <code>onRefresh</code> function otherwise the refresh indicator will stop immediately.</p>
|
||||
<p><strong>Note:</strong> <code>refreshing</code> is a controlled prop, this is why it needs to be set to true in the <code>onRefresh</code> function otherwise the refresh indicator will stop immediately.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="props"></a><a href="#props" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.10/view.html#props">View props...</a></li>
|
||||
|
||||
+31
-93
File diff suppressed because one or more lines are too long
+11
-23
@@ -11,8 +11,7 @@
|
||||
<li>Pull to Refresh.</li>
|
||||
<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.10/flatlist.html"><code><FlatList></code></a>.</p>
|
||||
<p>If you don't need section support and want a simpler interface, use <a href="/react-native/docs/0.10/flatlist.html"><code><FlatList></code></a>.</p>
|
||||
<p>Simple Examples:</p>
|
||||
<pre><code class="hljs css javascript"><SectionList
|
||||
renderItem={({item}) => <ListItem title={item} />}
|
||||
@@ -32,9 +31,7 @@
|
||||
]}
|
||||
/>
|
||||
</code></pre>
|
||||
<p>This is a convenience wrapper around <a href="/react-native/docs/0.10/virtualizedlist.html"><code>VirtualizedList</code></a>,
|
||||
and thus inherits its props (as well as those of <code>ScrollView</code>) that aren't explicitly listed
|
||||
here, along with the following caveats:</p>
|
||||
<p>This is a convenience wrapper around <a href="/react-native/docs/0.10/virtualizedlist.html"><code>VirtualizedList</code></a>, and thus inherits its props (as well as those of <code>ScrollView</code>) that aren't explicitly listed here, along with the following caveats:</p>
|
||||
<ul>
|
||||
<li>Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.</li>
|
||||
<li>This is a <code>PureComponent</code> which means that it will not re-render if <code>props</code> remain shallow- equal. Make sure that everything your <code>renderItem</code> function depends on is passed as a prop (e.g. <code>extraData</code>) that is not <code>===</code> after updates, otherwise your UI may not update on changes. This includes the <code>data</code> prop and parent component state.</li>
|
||||
@@ -49,8 +46,7 @@ here, along with the following caveats:</p>
|
||||
<li><a href="/react-native/docs/0.10/virtualizedlist.html#renderitem"><code>renderItem</code></a></li>
|
||||
<li><a href="/react-native/docs/0.10/virtualizedlist.html#itemseparatorcomponent"><code>ItemSeparatorComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/0.10/virtualizedlist.html#listemptycomponent"><code>ListEmptyComponent</code></a></li>
|
||||
<li><a href="/react-native/docs/0.10/virtualizedlist.html#listfootercomponent"><code>ListFooterComponent</code></a>
|
||||
SectionSeparatorComponent</li>
|
||||
<li><a href="/react-native/docs/0.10/virtualizedlist.html#listfootercomponent"><code>ListFooterComponent</code></a> SectionSeparatorComponent</li>
|
||||
<li><a href="/react-native/docs/0.10/virtualizedlist.html#extradata"><code>extradata</code></a></li>
|
||||
<li><a href="/react-native/docs/0.10/virtualizedlist.html#initialnumtorender"><code>initialNumToRender</code></a></li>
|
||||
<li><a href="/react-native/docs/0.10/virtualizedlist.html#inverted"><code>inverted</code></a></li>
|
||||
@@ -201,7 +197,7 @@ SectionSeparatorComponent</li>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="keyextractor"></a><a href="#keyextractor" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>keyExtractor</code></h3>
|
||||
<pre><code class="hljs css javascript">(item: object, <span class="hljs-attr">index</span>: number) => string
|
||||
<pre><code class="hljs css javascript">(item: object, <span class="hljs-attr">index</span>: number) => string;
|
||||
</code></pre>
|
||||
<p>Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks item.key, then falls back to using the index, like react does. Note that this sets keys for each item, but each overall section still needs its own key.</p>
|
||||
<table>
|
||||
@@ -280,8 +276,7 @@ SectionSeparatorComponent</li>
|
||||
<h3><a class="anchor" aria-hidden="true" name="removeclippedsubviews"></a><a href="#removeclippedsubviews" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>removeClippedSubviews</code></h3>
|
||||
<p>This may improve scroll performance for large lists.</p>
|
||||
<blockquote>
|
||||
<p>Note:
|
||||
May have bugs (missing content) in some circumstances - use at your own risk.</p>
|
||||
<p>Note: May have bugs (missing content) in some circumstances - use at your own risk.</p>
|
||||
</blockquote>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -330,25 +325,18 @@ May have bugs (missing content) in some circumstances - use at your own risk.</p
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="scrolltolocation"></a><a href="#scrolltolocation" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>scrollToLocation()</code></h3>
|
||||
<pre><code class="hljs css javascript">scrollToLocation(params: object)
|
||||
<pre><code class="hljs css javascript">scrollToLocation((params: object));
|
||||
</code></pre>
|
||||
<p>Scrolls to the item at the specified <code>sectionIndex</code> and <code>itemIndex</code> (within the section)
|
||||
positioned in the viewable area such that <code>viewPosition</code> 0 places it at the top (and may be
|
||||
covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle. <code>viewOffset</code> is a
|
||||
fixed number of pixels to offset the final target position, e.g. to compensate for sticky
|
||||
headers.</p>
|
||||
<p>Note: cannot scroll to locations outside the render window without specifying the
|
||||
<code>getItemLayout</code> prop.</p>
|
||||
<p>Scrolls to the item at the specified <code>sectionIndex</code> and <code>itemIndex</code> (within the section) positioned in the viewable area such that <code>viewPosition</code> 0 places it at the top (and may be covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle. <code>viewOffset</code> is a fixed number of pixels to offset the final target position, e.g. to compensate for sticky headers.</p>
|
||||
<p>Note: cannot scroll to locations outside the render window without specifying the <code>getItemLayout</code> prop.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="recordinteraction"></a><a href="#recordinteraction" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>recordInteraction()</code></h3>
|
||||
<pre><code class="hljs css javascript">recordInteraction()
|
||||
<pre><code class="hljs css javascript">recordInteraction();
|
||||
</code></pre>
|
||||
<p>Tells the list an interaction has occured, which should trigger viewability calculations, e.g.
|
||||
if <code>waitForInteractions</code> is true and the user has not scrolled. This is typically called by
|
||||
taps on items or by navigation actions.</p>
|
||||
<p>Tells the list an interaction has occured, which should trigger viewability calculations, e.g. if <code>waitForInteractions</code> is true and the user has not scrolled. This is typically called by taps on items or by navigation actions.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="flashscrollindicators"></a><a href="#flashscrollindicators" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>flashScrollIndicators()</code></h3>
|
||||
<pre><code class="hljs css javascript">flashScrollIndicators()
|
||||
<pre><code class="hljs css javascript">flashScrollIndicators();
|
||||
</code></pre>
|
||||
<p>Displays the scroll indicators momentarily.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="type-definitions"></a><a href="#type-definitions" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Type Definitions</h2>
|
||||
|
||||
@@ -19,8 +19,7 @@
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="props"></a><a href="#props" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="enabled"></a><a href="#enabled" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>enabled</code></h3>
|
||||
<p>If false the user won't be able to interact with the control.
|
||||
Default value is true.</p>
|
||||
<p>If false the user won't be able to interact with the control. Default value is true.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -31,8 +30,7 @@ Default value is true.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="momentary"></a><a href="#momentary" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>momentary</code></h3>
|
||||
<p>If true, then selecting a segment won't persist visually.
|
||||
The <code>onValueChange</code> callback will still work as expected.</p>
|
||||
<p>If true, then selecting a segment won't persist visually. The <code>onValueChange</code> callback will still work as expected.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -43,8 +41,7 @@ The <code>onValueChange</code> callback will still work as expected.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="onchange"></a><a href="#onchange" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>onChange</code></h3>
|
||||
<p>Callback that is called when the user taps a segment;
|
||||
passes the event as an argument</p>
|
||||
<p>Callback that is called when the user taps a segment; passes the event as an argument</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -55,8 +52,7 @@ passes the event as an argument</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="onvaluechange"></a><a href="#onvaluechange" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>onValueChange</code></h3>
|
||||
<p>Callback that is called when the user taps a segment;
|
||||
passes the segment's value as an argument</p>
|
||||
<p>Callback that is called when the user taps a segment; passes the segment's value as an argument</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="share"></a><a href="#share" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>share()</code></h3>
|
||||
<pre><code class="hljs css javascript">Share.share(content, options)
|
||||
<pre><code class="hljs css javascript">Share.share(content, options);
|
||||
</code></pre>
|
||||
<p>Open a dialog to share text content.</p>
|
||||
<p>In iOS, Returns a Promise which will be invoked an object containing <code>action</code>, <code>activityType</code>. If the user dismissed the dialog, the Promise will still be resolved with action being <code>Share.dismissedAction</code> and all the other keys being undefined.</p>
|
||||
@@ -36,12 +36,12 @@
|
||||
</ul>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="sharedaction"></a><a href="#sharedaction" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>sharedAction()</code></h3>
|
||||
<pre><code class="hljs css javascript">Share.sharedAction()
|
||||
<pre><code class="hljs css javascript">Share.sharedAction();
|
||||
</code></pre>
|
||||
<p>The content was successfully shared.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="dismissedaction"></a><a href="#dismissedaction" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>dismissedAction()</code></h3>
|
||||
<pre><code class="hljs css javascript">Share.dismissedAction()
|
||||
<pre><code class="hljs css javascript">Share.dismissedAction();
|
||||
</code></pre>
|
||||
<p>The dialog has been dismissed.</p>
|
||||
<table>
|
||||
|
||||
+20
-34
@@ -1,30 +1,27 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Slider · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Slider · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="A component used to select a single value from a range of values."/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/slider.md" target="_blank">Edit</a><h1>Slider</h1></header><article><div><span><p>A component used to select a single value from a range of values.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="usage"></a><a href="#usage" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Usage</h3>
|
||||
<p>The example below shows how to use <code>Slider</code> to change a value used by <code>Text</code>.
|
||||
The value is stored using the state of the root component (<code>App</code>). The same
|
||||
component subscribes to the <code>onValueChange</code> of <code>Slider</code> and changes the value
|
||||
using <code>setState</code>.</p>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> { StyleSheet, Text, View, Slider } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
<p>The example below shows how to use <code>Slider</code> to change a value used by <code>Text</code>. The value is stored using the state of the root component (<code>App</code>). The same component subscribes to the <code>onValueChange</code> of <code>Slider</code> and changes the value using <code>setState</code>.</p>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> {StyleSheet, Text, View, Slider} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
|
||||
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
|
||||
<span class="hljs-keyword">constructor</span>(props) {
|
||||
<span class="hljs-keyword">super</span>(props);
|
||||
<span class="hljs-keyword">this</span>.state = {
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-number">50</span>
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-number">50</span>,
|
||||
};
|
||||
}
|
||||
|
||||
change(value) {
|
||||
<span class="hljs-keyword">this</span>.setState(<span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> {
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-built_in">parseFloat</span>(value)
|
||||
<span class="hljs-attr">value</span>: <span class="hljs-built_in">parseFloat</span>(value),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
<span class="hljs-keyword">const</span> { value } = <span class="hljs-keyword">this</span>.state;
|
||||
<span class="hljs-keyword">const</span> {value} = <span class="hljs-keyword">this</span>.state;
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.text}</span>></span>{String(value)}<span class="hljs-tag"></<span class="hljs-name">Text</span>></span>
|
||||
@@ -42,13 +39,13 @@ using <code>setState</code>.</p>
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
flexDirection: "column",
|
||||
justifyContent: "center"
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
text: {
|
||||
fontSize: 50,
|
||||
textAlign: "center"
|
||||
}
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
</span></code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" name="props"></a><a href="#props" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>
|
||||
@@ -75,8 +72,7 @@ const styles = StyleSheet.create({
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="props"></a><a href="#props" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="style"></a><a href="#style" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>style</code></h3>
|
||||
<p>Used to style and layout the <code>Slider</code>. See <code>StyleSheet.js</code> and
|
||||
<code>ViewStylePropTypes.js</code> for more info.</p>
|
||||
<p>Used to style and layout the <code>Slider</code>. See <code>StyleSheet.js</code> and <code>ViewStylePropTypes.js</code> for more info.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -109,8 +105,7 @@ const styles = StyleSheet.create({
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="minimumtracktintcolor"></a><a href="#minimumtracktintcolor" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>minimumTrackTintColor</code></h3>
|
||||
<p>The color used for the track to the left of the button. Overrides the default
|
||||
blue gradient image on iOS.</p>
|
||||
<p>The color used for the track to the left of the button. Overrides the default blue gradient image on iOS.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -132,9 +127,7 @@ blue gradient image on iOS.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="onslidingcomplete"></a><a href="#onslidingcomplete" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>onSlidingComplete</code></h3>
|
||||
<p>Callback that is called when the user releases the slider, regardless if the
|
||||
value has changed. The current value is passed as an argument to the callback
|
||||
handler.</p>
|
||||
<p>Callback that is called when the user releases the slider, regardless if the value has changed. The current value is passed as an argument to the callback handler.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -156,8 +149,7 @@ handler.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="step"></a><a href="#step" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>step</code></h3>
|
||||
<p>Step value of the slider. The value should be between 0 and (maximumValue -
|
||||
minimumValue). Default value is 0.</p>
|
||||
<p>Step value of the slider. The value should be between 0 and (maximumValue - minimumValue). Default value is 0.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -168,8 +160,7 @@ minimumValue). Default value is 0.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="maximumtracktintcolor"></a><a href="#maximumtracktintcolor" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>maximumTrackTintColor</code></h3>
|
||||
<p>The color used for the track to the right of the button. Overrides the default
|
||||
blue gradient image on iOS.</p>
|
||||
<p>The color used for the track to the right of the button. Overrides the default blue gradient image on iOS.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -191,10 +182,8 @@ blue gradient image on iOS.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="value"></a><a href="#value" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>value</code></h3>
|
||||
<p>Initial value of the slider. The value should be between minimumValue and
|
||||
maximumValue, which default to 0 and 1 respectively. Default value is 0.</p>
|
||||
<p><em>This is not a controlled component</em>, you don't need to update the value during
|
||||
dragging.</p>
|
||||
<p>Initial value of the slider. The value should be between minimumValue and maximumValue, which default to 0 and 1 respectively. Default value is 0.</p>
|
||||
<p><em>This is not a controlled component</em>, you don't need to update the value during dragging.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -216,8 +205,7 @@ dragging.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="maximumtrackimage"></a><a href="#maximumtrackimage" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>maximumTrackImage</code></h3>
|
||||
<p>Assigns a maximum track image. Only static images are supported. The leftmost
|
||||
pixel of the image will be stretched to fill the track.</p>
|
||||
<p>Assigns a maximum track image. Only static images are supported. The leftmost pixel of the image will be stretched to fill the track.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
@@ -228,8 +216,7 @@ pixel of the image will be stretched to fill the track.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="minimumtrackimage"></a><a href="#minimumtrackimage" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>minimumTrackImage</code></h3>
|
||||
<p>Assigns a minimum track image. Only static images are supported. The rightmost
|
||||
pixel of the image will be stretched to fill the track.</p>
|
||||
<p>Assigns a minimum track image. Only static images are supported. The rightmost pixel of the image will be stretched to fill the track.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
@@ -251,8 +238,7 @@ pixel of the image will be stretched to fill the track.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="trackimage"></a><a href="#trackimage" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>trackImage</code></h3>
|
||||
<p>Assigns a single image for the track. Only static images are supported. The
|
||||
center pixel of the image will be stretched to fill the track.</p>
|
||||
<p>Assigns a single image for the track. Only static images are supported. The center pixel of the image will be stretched to fill the track.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
|
||||
+7
-25
File diff suppressed because one or more lines are too long
+10
-16
@@ -1,8 +1,6 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>StatusBar · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="StatusBar · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Component to control the app status bar."/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/statusbar.md" target="_blank">Edit</a><h1>StatusBar</h1></header><article><div><span><p>Component to control the app status bar.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="usage-with-navigator"></a><a href="#usage-with-navigator" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Usage with Navigator</h3>
|
||||
<p>It is possible to have multiple <code>StatusBar</code> components mounted at the same
|
||||
time. The props will be merged in the order the <code>StatusBar</code> components were
|
||||
mounted. One use case is to specify status bar styles per route using <code>Navigator</code>.</p>
|
||||
<p>It is possible to have multiple <code>StatusBar</code> components mounted at the same time. The props will be merged in the order the <code>StatusBar</code> components were mounted. One use case is to specify status bar styles per route using <code>Navigator</code>.</p>
|
||||
<pre><code class="hljs"> <span class="hljs-tag"><<span class="hljs-name">View</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">StatusBar</span>
|
||||
<span class="hljs-attr">backgroundColor</span>=<span class="hljs-string">"blue"</span>
|
||||
@@ -50,8 +48,7 @@ mounted. One use case is to specify status bar styles per route using <code>Navi
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="props"></a><a href="#props" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="animated"></a><a href="#animated" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>animated</code></h3>
|
||||
<p>If the transition between status bar property changes should be animated.
|
||||
Supported for backgroundColor, barStyle and hidden.</p>
|
||||
<p>If the transition between status bar property changes should be animated. Supported for backgroundColor, barStyle and hidden.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -95,9 +92,7 @@ Supported for backgroundColor, barStyle and hidden.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="translucent"></a><a href="#translucent" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>translucent</code></h3>
|
||||
<p>If the status bar is translucent.
|
||||
When translucent is set to true, the app will draw under the status bar.
|
||||
This is useful when using a semi transparent status bar color.</p>
|
||||
<p>If the status bar is translucent. When translucent is set to true, the app will draw under the status bar. This is useful when using a semi transparent status bar color.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
@@ -119,8 +114,7 @@ This is useful when using a semi transparent status bar color.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="showhidetransition"></a><a href="#showhidetransition" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>showHideTransition</code></h3>
|
||||
<p>The transition effect when showing and hiding the status bar using the <code>hidden</code>
|
||||
prop. Defaults to 'fade'.</p>
|
||||
<p>The transition effect when showing and hiding the status bar using the <code>hidden</code> prop. Defaults to 'fade'.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
@@ -131,7 +125,7 @@ prop. Defaults to 'fade'.</p>
|
||||
</table>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="sethidden"></a><a href="#sethidden" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>setHidden()</code></h3>
|
||||
<pre><code class="hljs css javascript">StatusBar.setHidden(hidden: boolean, [animation]: StatusBarAnimation)
|
||||
<pre><code class="hljs css javascript">StatusBar.setHidden((hidden: boolean), ([animation]: StatusBarAnimation));
|
||||
</code></pre>
|
||||
<p>Show or hide the status bar.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -141,12 +135,12 @@ prop. Defaults to 'fade'.</p>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>hidden</td><td>boolean</td><td>Yes</td><td>Hide the status bar.</td></tr>
|
||||
<tr><td>animation</td><td><a href="/react-native/docs/0.10/statusbar.html#statusbaranimation">StatusBarAnimation</a></td><td>No</td><td>Optional animation when changing the status bar hidden property.</td></tr>
|
||||
<tr><td>animation</td><td><a href="/react-native/docs/0.10/statusbar.html#statusbaranimation">StatusBarAnimation</a></td><td>No</td><td>Optional animation when changing the status bar hidden property.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="setbarstyle"></a><a href="#setbarstyle" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>setBarStyle()</code></h3>
|
||||
<pre><code class="hljs css javascript">StatusBar.setBarStyle(style: StatusBarStyle, [animated]: boolean)
|
||||
<pre><code class="hljs css javascript">StatusBar.setBarStyle((style: StatusBarStyle), ([animated]: boolean));
|
||||
</code></pre>
|
||||
<p>Set the status bar style.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -161,7 +155,7 @@ prop. Defaults to 'fade'.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="setnetworkactivityindicatorvisible"></a><a href="#setnetworkactivityindicatorvisible" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>setNetworkActivityIndicatorVisible()</code></h3>
|
||||
<pre><code class="hljs css javascript">StatusBar.setNetworkActivityIndicatorVisible(visible: boolean)
|
||||
<pre><code class="hljs css javascript">StatusBar.setNetworkActivityIndicatorVisible((visible: boolean));
|
||||
</code></pre>
|
||||
<p>Control the visibility of the network activity indicator.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -175,7 +169,7 @@ prop. Defaults to 'fade'.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="setbackgroundcolor"></a><a href="#setbackgroundcolor" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>setBackgroundColor()</code></h3>
|
||||
<pre><code class="hljs css javascript">StatusBar.setBackgroundColor(color: string, [animated]: boolean)
|
||||
<pre><code class="hljs css javascript">StatusBar.setBackgroundColor((color: string), ([animated]: boolean));
|
||||
</code></pre>
|
||||
<p>Set the background color for the status bar.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
@@ -190,7 +184,7 @@ prop. Defaults to 'fade'.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="settranslucent"></a><a href="#settranslucent" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>setTranslucent()</code></h3>
|
||||
<pre><code class="hljs css javascript">StatusBar.setTranslucent(translucent: boolean)
|
||||
<pre><code class="hljs css javascript">StatusBar.setTranslucent((translucent: boolean));
|
||||
</code></pre>
|
||||
<p>Control the translucency of the status bar.</p>
|
||||
<p><strong>Parameters:</strong></p>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -28,17 +28,13 @@
|
||||
</code></pre>
|
||||
<p>Code quality:</p>
|
||||
<ul>
|
||||
<li>By moving styles away from the render function, you're making the code
|
||||
easier to understand.</li>
|
||||
<li>Naming the styles is a good way to add meaning to the low level components
|
||||
in the render function.</li>
|
||||
<li>By moving styles away from the render function, you're making the code easier to understand.</li>
|
||||
<li>Naming the styles is a good way to add meaning to the low level components in the render function.</li>
|
||||
</ul>
|
||||
<p>Performance:</p>
|
||||
<ul>
|
||||
<li>Making a stylesheet from a style object makes it possible to refer to it
|
||||
by ID instead of creating a new style object every time.</li>
|
||||
<li>It also allows to send the style only once through the bridge. All
|
||||
subsequent uses are going to refer an id (not implemented yet).</li>
|
||||
<li>Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time.</li>
|
||||
<li>It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet).</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Switch · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Switch · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="Renders a boolean input."/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/switch.md" target="_blank">Edit</a><h1>Switch</h1></header><article><div><span><p>Renders a boolean input.</p>
|
||||
<p>This is a controlled component that requires an <code>onValueChange</code> callback that updates the <code>value</code> prop in order for the component to reflect user actions. If the <code>value</code> prop is not updated, the component will continue to render the supplied <code>value</code> prop instead of the expected result of any user actions.</p>
|
||||
<p>@keyword checkbox
|
||||
@keyword toggle</p>
|
||||
<p>@keyword checkbox @keyword toggle</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="props"></a><a href="#props" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.10/view.html#props">View props...</a></li>
|
||||
@@ -17,8 +16,7 @@
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="props"></a><a href="#props" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="disabled"></a><a href="#disabled" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>disabled</code></h3>
|
||||
<p>If true the user won't be able to toggle the switch.
|
||||
Default value is false.</p>
|
||||
<p>If true the user won't be able to toggle the switch. Default value is false.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -84,8 +82,7 @@ Default value is false.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="value"></a><a href="#value" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>value</code></h3>
|
||||
<p>The value of the switch. If true the switch will be turned on.
|
||||
Default value is false.</p>
|
||||
<p>The value of the switch. If true the switch will be turned on. Default value is false.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
|
||||
@@ -40,9 +40,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" name="beginasyncevent"></a><a href="#beginasyncevent" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>beginAsyncEvent()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> beginAsyncEvent(profileName?)
|
||||
</code></pre>
|
||||
<p>beginAsyncEvent/endAsyncEvent for starting and then ending a profile where the end can either
|
||||
occur on another thread or out of the current stack frame, eg await
|
||||
the returned cookie variable should be used as input into the endAsyncEvent call to end the profile</p>
|
||||
<p>beginAsyncEvent/endAsyncEvent for starting and then ending a profile where the end can either occur on another thread or out of the current stack frame, eg await the returned cookie variable should be used as input into the endAsyncEvent call to end the profile</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="endasyncevent"></a><a href="#endasyncevent" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>endAsyncEvent()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> endAsyncEvent(profileName?, cookie?)
|
||||
@@ -56,14 +54,12 @@ the returned cookie variable should be used as input into the endAsyncEvent call
|
||||
<h3><a class="anchor" aria-hidden="true" name="attachtorelayprofiler"></a><a href="#attachtorelayprofiler" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>attachToRelayProfiler()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> attachToRelayProfiler(relayProfiler)
|
||||
</code></pre>
|
||||
<p>Relay profiles use await calls, so likely occur out of current stack frame
|
||||
therefore async variant of profiling is used</p>
|
||||
<p>Relay profiles use await calls, so likely occur out of current stack frame therefore async variant of profiling is used</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="swizzlejson"></a><a href="#swizzlejson" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>swizzleJSON()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> swizzleJSON()
|
||||
</code></pre>
|
||||
<p>This is not called by default due to perf overhead but it's useful
|
||||
if you want to find traces which spend too much time in JSON.</p>
|
||||
<p>This is not called by default due to perf overhead but it's useful if you want to find traces which spend too much time in JSON.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="measuremethods"></a><a href="#measuremethods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>measureMethods()</code></h3>
|
||||
<pre><code class="hljs css javascript"><span class="hljs-keyword">static</span> measureMethods(object, objectName, methodNames)
|
||||
|
||||
@@ -41,8 +41,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="onpress"></a><a href="#onpress" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>onPress</code></h3>
|
||||
<p>Callback when this tab is being selected, you should change the state of your
|
||||
component to set selected={true}.</p>
|
||||
<p>Callback when this tab is being selected, you should change the state of your component to set selected={true}.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -53,8 +52,7 @@ component to set selected={true}.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="selected"></a><a href="#selected" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>selected</code></h3>
|
||||
<p>It specifies whether the children are visible or not. If you see a
|
||||
blank content, you probably forgot to add a selected one.</p>
|
||||
<p>It specifies whether the children are visible or not. If you see a blank content, you probably forgot to add a selected one.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -65,8 +63,7 @@ blank content, you probably forgot to add a selected one.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="selectedicon"></a><a href="#selectedicon" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>selectedIcon</code></h3>
|
||||
<p>A custom icon when the tab is selected. It is ignored when a system
|
||||
icon is defined. If left empty, the icon will be tinted in blue.</p>
|
||||
<p>A custom icon when the tab is selected. It is ignored when a system icon is defined. If left empty, the icon will be tinted in blue.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -88,9 +85,7 @@ icon is defined. If left empty, the icon will be tinted in blue.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="systemicon"></a><a href="#systemicon" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>systemIcon</code></h3>
|
||||
<p>Items comes with a few predefined system icons. Note that if you are
|
||||
using them, the title and selectedIcon will be overriden with the
|
||||
system ones.</p>
|
||||
<p>Items comes with a few predefined system icons. Note that if you are using them, the title and selectedIcon will be overriden with the system ones.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -101,8 +96,7 @@ system ones.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="title"></a><a href="#title" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>title</code></h3>
|
||||
<p>Text that appears under the icon. It is ignored when a system icon
|
||||
is defined.</p>
|
||||
<p>Text that appears under the icon. It is ignored when a system icon is defined.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
$ npm test
|
||||
</code></pre>
|
||||
<p>It's a good idea to add a Jest test when you are working on a change that only modifies JavaScript code.</p>
|
||||
<p>The tests themselves live in the <code>__tests__</code> directories of the files they test. See <a href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/__tests__/TouchableHighlight-test.js"><code>TouchableHighlight-test.js</code></a> for a basic example.</p>
|
||||
<p>The tests themselves live in the <code>__tests__</code> directories of the files they test. See <a href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/__tests__/TouchableHighlight-test.js"><code>TouchableHighlight-test.js</code></a> for a basic example.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" name="flow"></a><a href="#flow" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Flow</h3>
|
||||
<p>You should also make sure your code passes <a href="https://flowtype.org/">Flow</a> tests. These can be run using:</p>
|
||||
<pre><code class="hljs">$ cd react-native
|
||||
@@ -57,8 +57,8 @@ $ ./scripts/run-android-local-integration-tests.sh
|
||||
<p>It's a good idea to add an Android integration test whenever you are working on code that needs both JavaScript and Java to be tested in conjunction. The Android integration tests live under <a href="https://github.com/facebook/react-native/tree/master/ReactAndroid/src/androidTest/java/com/facebook/react/tests"><code>ReactAndroid/src/androidTest</code></a>, so you can browse through that directory for good examples of tests.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="ios"></a><a href="#ios" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>iOS</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="integration-tests"></a><a href="#integration-tests" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Integration Tests</h3>
|
||||
<p>React Native provides facilities to make it easier to test integrated components that require both native and JS components to communicate across the bridge. The two main components are <code>RCTTestRunner</code> and <code>RCTTestModule</code>. <code>RCTTestRunner</code> sets up the ReactNative environment and provides facilities to run the tests as <code>XCTestCase</code>s in Xcode (<code>runTest:module</code> is the simplest method). <code>RCTTestModule</code> is exported to JS as <code>NativeModules.TestModule</code>.</p>
|
||||
<p>The tests themselves are written in JS, and must call <code>TestModule.markTestCompleted()</code> when they are done, otherwise the test will timeout and fail. Test failures are primarily indicated by throwing a JS exception. It is also possible to test error conditions with <code>runTest:module:initialProps:expectErrorRegex:</code> or <code>runTest:module:initialProps:expectErrorBlock:</code> which will expect an error to be thrown and verify the error matches the provided criteria.</p>
|
||||
<p>React Native provides facilities to make it easier to test integrated components that require both native and JS components to communicate across the bridge. The two main components are <code>RCTTestRunner</code> and <code>RCTTestModule</code>. <code>RCTTestRunner</code> sets up the ReactNative environment and provides facilities to run the tests as <code>XCTestCase</code>s in Xcode (<code>runTest:module</code> is the simplest method). <code>RCTTestModule</code> is exported to JS as <code>NativeModules.TestModule</code>.</p>
|
||||
<p>The tests themselves are written in JS, and must call <code>TestModule.markTestCompleted()</code> when they are done, otherwise the test will timeout and fail. Test failures are primarily indicated by throwing a JS exception. It is also possible to test error conditions with <code>runTest:module:initialProps:expectErrorRegex:</code> or <code>runTest:module:initialProps:expectErrorBlock:</code> which will expect an error to be thrown and verify the error matches the provided criteria.</p>
|
||||
<p>See the following for example usage and integration points:</p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestHarnessTest.js"><code>IntegrationTestHarnessTest.js</code></a></li>
|
||||
@@ -73,10 +73,10 @@ $ ./scripts/objc-test-ios.sh
|
||||
<p>Your Xcode install will come with a variety of Simulators running the latest OS. You may need to manually create a new Simulator to match what the <code>XCODE_DESTINATION</code> param in the test script.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" name="screenshot-snapshot-tests"></a><a href="#screenshot-snapshot-tests" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Screenshot/Snapshot Tests</h3>
|
||||
<p>A common type of integration test is the snapshot test. These tests render a component, and verify snapshots of the screen against reference images using <code>TestModule.verifySnapshot()</code>, using the <a href="https://github.com/facebook/ios-snapshot-test-case"><code>FBSnapshotTestCase</code></a> library behind the scenes. Reference images are recorded by setting <code>recordMode = YES</code> on the <code>RCTTestRunner</code>, then running the tests. Snapshots will differ slightly between 32 and 64 bit, and various OS versions, so it's recommended that you enforce tests are run with the correct configuration. It's also highly recommended that all network data be mocked out, along with other potentially troublesome dependencies. See <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/SimpleSnapshotTest.js"><code>SimpleSnapshotTest</code></a> for a basic example.</p>
|
||||
<p>If you make a change that affects a snapshot test in a PR, such as adding a new example case to one of the examples that is snapshotted, you'll need to re-record the snapshot reference image. To do this, simply change to <code>_runner.recordMode = YES;</code> in <a href="https://github.com/facebook/react-native/blob/master/RNTester/RNTesterIntegrationTests/RNTesterSnapshotTests.m#L42">RNTester/RNTesterSnapshotTests.m</a>, re-run the failing tests, then flip record back to <code>NO</code> and submit/update your PR and wait to see if the Circle build passes.</p>
|
||||
<p>A common type of integration test is the snapshot test. These tests render a component, and verify snapshots of the screen against reference images using <code>TestModule.verifySnapshot()</code>, using the <a href="https://github.com/facebook/ios-snapshot-test-case"><code>FBSnapshotTestCase</code></a> library behind the scenes. Reference images are recorded by setting <code>recordMode = YES</code> on the <code>RCTTestRunner</code>, then running the tests. Snapshots will differ slightly between 32 and 64 bit, and various OS versions, so it's recommended that you enforce tests are run with the correct configuration. It's also highly recommended that all network data be mocked out, along with other potentially troublesome dependencies. See <a href="https://github.com/facebook/react-native/blob/master/IntegrationTests/SimpleSnapshotTest.js"><code>SimpleSnapshotTest</code></a> for a basic example.</p>
|
||||
<p>If you make a change that affects a snapshot test in a PR, such as adding a new example case to one of the examples that is snapshotted, you'll need to re-record the snapshot reference image. To do this, simply change to <code>_runner.recordMode = YES;</code> in <a href="https://github.com/facebook/react-native/blob/master/RNTester/RNTesterIntegrationTests/RNTesterSnapshotTests.m#L42">RNTester/RNTesterSnapshotTests.m</a>, re-run the failing tests, then flip record back to <code>NO</code> and submit/update your PR and wait to see if the Circle build passes.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" name="apple-tv"></a><a href="#apple-tv" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Apple TV</h2>
|
||||
<p>The same tests discussed above for iOS will also run on tvOS. In the RNTester Xcode project, select the RNTester-tvOS target, and you can follow the same steps above to run the tests in Xcode.</p>
|
||||
<p>The same tests discussed above for iOS will also run on tvOS. In the RNTester Xcode project, select the RNTester-tvOS target, and you can follow the same steps above to run the tests in Xcode.</p>
|
||||
<p>You can run Apple TV unit and integration tests locally by running the following in the command line on macOS:</p>
|
||||
<pre><code class="hljs">$ cd react-native
|
||||
$ ./scripts/objc-test-tvos.sh (make sure the line `TEST="test"` is uncommented)
|
||||
|
||||
@@ -64,9 +64,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="fontweight"></a><a href="#fontweight" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>fontWeight</code></h3>
|
||||
<p>Specifies font weight. The values 'normal' and 'bold' are supported for
|
||||
most fonts. Not all fonts have a variant for each of the numeric values,
|
||||
in that case the closest one is chosen.</p>
|
||||
<p>Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
|
||||
+11
-20
File diff suppressed because one or more lines are too long
+17
-45
File diff suppressed because one or more lines are too long
@@ -23,16 +23,14 @@
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="open"></a><a href="#open" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>open()</code></h3>
|
||||
<pre><code class="hljs css javascript">TimePickerAndroid.open(options)
|
||||
<pre><code class="hljs css javascript">TimePickerAndroid.open(options);
|
||||
</code></pre>
|
||||
<p>Opens the standard Android time picker dialog.</p>
|
||||
<p>The available keys for the <code>options</code> object are:</p>
|
||||
<ul>
|
||||
<li><code>hour</code> (0-23) - the hour to show, defaults to the current time</li>
|
||||
<li><code>minute</code> (0-59) - the minute to show, defaults to the current time</li>
|
||||
<li><code>is24Hour</code> (boolean) - If <code>true</code>, the picker uses the 24-hour format. If <code>false</code>,
|
||||
the picker shows an AM/PM chooser. If undefined, the default for the current locale
|
||||
is used.</li>
|
||||
<li><code>is24Hour</code> (boolean) - If <code>true</code>, the picker uses the 24-hour format. If <code>false</code>, the picker shows an AM/PM chooser. If undefined, the default for the current locale is used.</li>
|
||||
<li><code>mode</code> (<code>enum('clock', 'spinner', 'default')</code>) - set the time picker mode
|
||||
<ul>
|
||||
<li>'clock': Show a time picker in clock mode.</li>
|
||||
@@ -40,18 +38,15 @@ is used.</li>
|
||||
<li>'default': Show a default time picker based on Android versions.</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
<p>Returns a Promise which will be invoked an object containing <code>action</code>, <code>hour</code> (0-23),
|
||||
<code>minute</code> (0-59) if the user picked a time. If the user dismissed the dialog, the Promise will
|
||||
still be resolved with action being <code>TimePickerAndroid.dismissedAction</code> and all the other keys
|
||||
being undefined. <strong>Always</strong> check whether the <code>action</code> before reading the values.</p>
|
||||
<p>Returns a Promise which will be invoked an object containing <code>action</code>, <code>hour</code> (0-23), <code>minute</code> (0-59) if the user picked a time. If the user dismissed the dialog, the Promise will still be resolved with action being <code>TimePickerAndroid.dismissedAction</code> and all the other keys being undefined. <strong>Always</strong> check whether the <code>action</code> before reading the values.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="timesetaction"></a><a href="#timesetaction" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>timeSetAction()</code></h3>
|
||||
<pre><code class="hljs css javascript">TimePickerAndroid.timeSetAction()
|
||||
<pre><code class="hljs css javascript">TimePickerAndroid.timeSetAction();
|
||||
</code></pre>
|
||||
<p>A time has been selected.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="dismissedaction"></a><a href="#dismissedaction" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>dismissedAction()</code></h3>
|
||||
<pre><code class="hljs css javascript">TimePickerAndroid.dismissedAction()
|
||||
<pre><code class="hljs css javascript">TimePickerAndroid.dismissedAction();
|
||||
</code></pre>
|
||||
<p>The dialog has been dismissed.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<p>One reason why well-built native apps feel so smooth is by avoiding expensive operations during interactions and animations. In React Native, we currently have a limitation that there is only a single JS execution thread, but you can use <code>InteractionManager</code> to make sure long-running work is scheduled to start after any interactions/animations have completed.</p>
|
||||
<p>Applications can schedule tasks to run after interactions with the following:</p>
|
||||
<pre><code class="hljs css javascript">InteractionManager.runAfterInteractions(<span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-comment">// ...long-running synchronous task...</span>
|
||||
<span class="hljs-comment">// ...long-running synchronous task...</span>
|
||||
});
|
||||
</code></pre>
|
||||
<p>Compare this to other scheduling alternatives:</p>
|
||||
@@ -44,11 +44,10 @@ InteractionManager.clearInteractionHandle(handle);
|
||||
<span class="hljs-keyword">var</span> Component = createReactClass({
|
||||
<span class="hljs-attr">mixins</span>: [TimerMixin],
|
||||
<span class="hljs-attr">componentDidMount</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
|
||||
<span class="hljs-keyword">this</span>.setTimeout(
|
||||
<span class="hljs-function"><span class="hljs-params">()</span> =></span> { <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'I do not leak!'</span>); },
|
||||
<span class="hljs-number">500</span>
|
||||
);
|
||||
}
|
||||
<span class="hljs-keyword">this</span>.setTimeout(<span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'I do not leak!'</span>);
|
||||
}, <span class="hljs-number">500</span>);
|
||||
},
|
||||
});
|
||||
</code></pre>
|
||||
<p>This will eliminate a lot of hard work tracking down bugs, such as crashes caused by timeouts firing after a component has been unmounted.</p>
|
||||
|
||||
+24
-11
@@ -1,17 +1,24 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>ToastAndroid · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="ToastAndroid · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="This exposes the native ToastAndroid module as a JS module. This has a function 'show'"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/toastandroid.md" target="_blank">Edit</a><h1>ToastAndroid</h1></header><article><div><span><p>This exposes the native ToastAndroid module as a JS module. This has a function 'show'
|
||||
which takes the following parameters:</p>
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>ToastAndroid · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="ToastAndroid · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="This exposes the native ToastAndroid module as a JS module. This has a function 'show' which takes the following parameters:"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/toastandroid.md" target="_blank">Edit</a><h1>ToastAndroid</h1></header><article><div><span><p>This exposes the native ToastAndroid module as a JS module. This has a function 'show' which takes the following parameters:</p>
|
||||
<ol>
|
||||
<li>String message: A string with the text to toast</li>
|
||||
<li>int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG</li>
|
||||
</ol>
|
||||
<p>There is also a function <code>showWithGravity</code> to specify the layout gravity. May be
|
||||
ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER.</p>
|
||||
<p>The 'showWithGravityAndOffset' function adds on the ability to specify offset
|
||||
These offset values will translate to pixels.</p>
|
||||
<p>There is also a function <code>showWithGravity</code> to specify the layout gravity. May be ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER.</p>
|
||||
<p>The 'showWithGravityAndOffset' function adds on the ability to specify offset These offset values will translate to pixels.</p>
|
||||
<p>Basic usage:</p>
|
||||
<pre><code class="hljs css javascript">ToastAndroid.show(<span class="hljs-string">'A pikachu appeared nearby !'</span>, ToastAndroid.SHORT);
|
||||
ToastAndroid.showWithGravity(<span class="hljs-string">'All Your Base Are Belong To Us'</span>, ToastAndroid.SHORT, ToastAndroid.CENTER);
|
||||
ToastAndroid.showWithGravityAndOffset(<span class="hljs-string">'A wild toast appeared!'</span>, ToastAndroid.LONG, ToastAndroid.BOTTOM, <span class="hljs-number">25</span>, <span class="hljs-number">50</span>);
|
||||
ToastAndroid.showWithGravity(
|
||||
<span class="hljs-string">'All Your Base Are Belong To Us'</span>,
|
||||
ToastAndroid.SHORT,
|
||||
ToastAndroid.CENTER
|
||||
);
|
||||
ToastAndroid.showWithGravityAndOffset(
|
||||
<span class="hljs-string">'A wild toast appeared!'</span>,
|
||||
ToastAndroid.LONG,
|
||||
ToastAndroid.BOTTOM,
|
||||
<span class="hljs-number">25</span>,
|
||||
<span class="hljs-number">50</span>
|
||||
);
|
||||
</code></pre>
|
||||
<h3><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
@@ -31,15 +38,21 @@ ToastAndroid.showWithGravityAndOffset(<span class="hljs-string">'A wild toast ap
|
||||
<h1><a class="anchor" aria-hidden="true" name="reference"></a><a href="#reference" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" name="methods"></a><a href="#methods" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="show"></a><a href="#show" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>show()</code></h3>
|
||||
<pre><code class="hljs css javascript">ToastAndroid.show(message, duration)
|
||||
<pre><code class="hljs css javascript">ToastAndroid.show(message, duration);
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="showwithgravity"></a><a href="#showwithgravity" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>showWithGravity()</code></h3>
|
||||
<pre><code class="hljs css javascript">ToastAndroid.showWithGravity(message, duration, gravity)
|
||||
<pre><code class="hljs css javascript">ToastAndroid.showWithGravity(message, duration, gravity);
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="showwithgravityandoffset"></a><a href="#showwithgravityandoffset" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>showWithGravityAndOffset()</code></h3>
|
||||
<pre><code class="hljs css javascript">ToastAndroid.showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)
|
||||
<pre><code class="hljs css javascript">ToastAndroid.showWithGravityAndOffset(
|
||||
message,
|
||||
duration,
|
||||
gravity,
|
||||
xOffset,
|
||||
yOffset
|
||||
);
|
||||
</code></pre>
|
||||
<h2><a class="anchor" aria-hidden="true" name="properties"></a><a href="#properties" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Properties</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" name="short"></a><a href="#short" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>SHORT</code></h3>
|
||||
|
||||
@@ -1,13 +1,6 @@
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>ToolbarAndroid · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="ToolbarAndroid · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo,"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/toolbarandroid.md" target="_blank">Edit</a><h1>ToolbarAndroid</h1></header><article><div><span><p>React component that wraps the Android-only <a href="https://developer.android.com/reference/android/support/v7/widget/Toolbar.html"><code>Toolbar</code> widget</a>. A Toolbar can display a logo,
|
||||
navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and
|
||||
subtitle are expanded so the logo and navigation icons are displayed on the left, title and
|
||||
subtitle in the middle and the actions on the right.</p>
|
||||
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>ToolbarAndroid · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="ToolbarAndroid · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right."/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.10</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/0.10/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/toolbarandroid.md" target="_blank">Edit</a><h1>ToolbarAndroid</h1></header><article><div><span><p>React component that wraps the Android-only <a href="https://developer.android.com/reference/android/support/v7/widget/Toolbar.html"><code>Toolbar</code> widget</a>. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.</p>
|
||||
<p>If the toolbar has an only child, it will be displayed between the title and actions.</p>
|
||||
<p>Although the Toolbar supports remote images for the logo, navigation and action icons, this
|
||||
should only be used in DEV mode where <code>require('./some_icon.png')</code> translates into a packager
|
||||
URL. In release mode you should always use a drawable resource for these icons. Using
|
||||
<code>require('./some_icon.png')</code> will do this automatically for you, so as long as you don't
|
||||
explicitly use e.g. <code>{uri: 'http://...'}</code>, you will be good.</p>
|
||||
<p>Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where <code>require('./some_icon.png')</code> translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using <code>require('./some_icon.png')</code> will do this automatically for you, so as long as you don't explicitly use e.g. <code>{uri: 'http://...'}</code>, you will be good.</p>
|
||||
<p>Example:</p>
|
||||
<pre><code class="hljs">render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
@@ -57,15 +50,12 @@ onActionSelected: <span class="hljs-function"><span class="hljs-keyword">functio
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="actions"></a><a href="#actions" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>actions</code></h3>
|
||||
<p>Sets possible actions on the toolbar as part of the action menu. These are displayed as icons
|
||||
or text on the right side of the widget. If they don't fit they are placed in an 'overflow'
|
||||
menu.</p>
|
||||
<p>Sets possible actions on the toolbar as part of the action menu. These are displayed as icons or text on the right side of the widget. If they don't fit they are placed in an 'overflow' menu.</p>
|
||||
<p>This property takes an array of objects, where each object has the following keys:</p>
|
||||
<ul>
|
||||
<li><code>title</code>: <strong>required</strong>, the title of this action</li>
|
||||
<li><code>icon</code>: the icon for this action, e.g. <code>require('./some_icon.png')</code></li>
|
||||
<li><code>show</code>: when to show this action as an icon or hide it in the overflow menu: <code>always</code>,
|
||||
<code>ifRoom</code> or <code>never</code></li>
|
||||
<li><code>show</code>: when to show this action as an icon or hide it in the overflow menu: <code>always</code>, <code>ifRoom</code> or <code>never</code></li>
|
||||
<li><code>showWithText</code>: boolean, whether to show text alongside the icon or not</li>
|
||||
</ul>
|
||||
<table>
|
||||
@@ -79,10 +69,7 @@ menu.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="contentinsetstart"></a><a href="#contentinsetstart" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>contentInsetStart</code></h3>
|
||||
<p>Sets the content inset for the toolbar starting edge.</p>
|
||||
<p>The content inset affects the valid area for Toolbar content other than
|
||||
the navigation button and menu. Insets define the minimum margin for
|
||||
these components and can be used to effectively align Toolbar content
|
||||
along well-known gridlines.</p>
|
||||
<p>The content inset affects the valid area for Toolbar content other than the navigation button and menu. Insets define the minimum margin for these components and can be used to effectively align Toolbar content along well-known gridlines.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -115,8 +102,7 @@ along well-known gridlines.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="onactionselected"></a><a href="#onactionselected" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>onActionSelected</code></h3>
|
||||
<p>Callback that is called when an action is selected. The only argument that is passed to the
|
||||
callback is the position of the action in the actions array.</p>
|
||||
<p>Callback that is called when an action is selected. The only argument that is passed to the callback is the position of the action in the actions array.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -139,10 +125,7 @@ callback is the position of the action in the actions array.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="contentinsetend"></a><a href="#contentinsetend" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>contentInsetEnd</code></h3>
|
||||
<p>Sets the content inset for the toolbar ending edge.</p>
|
||||
<p>The content inset affects the valid area for Toolbar content other than
|
||||
the navigation button and menu. Insets define the minimum margin for
|
||||
these components and can be used to effectively align Toolbar content
|
||||
along well-known gridlines.</p>
|
||||
<p>The content inset affects the valid area for Toolbar content other than the navigation button and menu. Insets define the minimum margin for these components and can be used to effectively align Toolbar content along well-known gridlines.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -153,12 +136,9 @@ along well-known gridlines.</p>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" name="rtl"></a><a href="#rtl" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 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>rtl</code></h3>
|
||||
<p>Used to set the toolbar direction to RTL.
|
||||
In addition to this property you need to add</p>
|
||||
<p>Used to set the toolbar direction to RTL. In addition to this property you need to add</p>
|
||||
<p>android:supportsRtl="true"</p>
|
||||
<p>to your application AndroidManifest.xml and then call
|
||||
<code>setLayoutDirection(LayoutDirection.RTL)</code> in your MainActivity
|
||||
<code>onCreate</code> method.</p>
|
||||
<p>to your application AndroidManifest.xml and then call <code>setLayoutDirection(LayoutDirection.RTL)</code> in your MainActivity <code>onCreate</code> method.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user