mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Deploy website
Deploy website version based on 22f9a70435b3d05da5a204111c09c147feb13496
This commit is contained in:
Website Deployment Script
+1
-1
File diff suppressed because one or more lines are too long
@@ -84,16 +84,14 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> { ActivityIndicator, StyleSheet, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> App = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<View style={[styles.container, styles.horizontal]}>
|
||||
<ActivityIndicator size="large" color="#0000ff" />
|
||||
<ActivityIndicator size="small" color="#00ff00" />
|
||||
<ActivityIndicator size="large" color="#0000ff" />
|
||||
<ActivityIndicator size="small" color="#00ff00" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
<span class="hljs-keyword">const</span> App = <span class="hljs-function"><span class="hljs-params">()</span> =></span> (
|
||||
<View style={[styles.container, styles.horizontal]}>
|
||||
<ActivityIndicator />
|
||||
<ActivityIndicator size="large" />
|
||||
<ActivityIndicator size="small" color="#0000ff" />
|
||||
<ActivityIndicator size="large" color="#00ff00" />
|
||||
</View>
|
||||
);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
@@ -111,7 +109,7 @@ export default App;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="ActivityIndicator Function Component Example"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20%22react%22%3B%0Aimport%20%7B%20ActivityIndicator%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%5Bstyles.container%2C%20styles.horizontal%5D%7D%3E%0A%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22large%22%20color%3D%22%230000ff%22%20%2F%3E%0A%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22small%22%20color%3D%22%2300ff00%22%20%2F%3E%0A%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22large%22%20color%3D%22%230000ff%22%20%2F%3E%0A%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22small%22%20color%3D%22%2300ff00%22%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%0A%20%20%7D%2C%0A%20%20horizontal%3A%20%7B%0A%20%20%20%20flexDirection%3A%20%22row%22%2C%0A%20%20%20%20justifyContent%3A%20%22space-around%22%2C%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-code="import%20React%20from%20%22react%22%3B%0Aimport%20%7B%20ActivityIndicator%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20(%0A%20%20%3CView%20style%3D%7B%5Bstyles.container%2C%20styles.horizontal%5D%7D%3E%0A%20%20%20%20%3CActivityIndicator%20%2F%3E%0A%20%20%20%20%3CActivityIndicator%20size%3D%22large%22%20%2F%3E%0A%20%20%20%20%3CActivityIndicator%20size%3D%22small%22%20color%3D%22%230000ff%22%20%2F%3E%0A%20%20%20%20%3CActivityIndicator%20size%3D%22large%22%20color%3D%22%2300ff00%22%20%2F%3E%0A%20%20%3C%2FView%3E%0A)%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%0A%20%20%7D%2C%0A%20%20horizontal%3A%20%7B%0A%20%20%20%20flexDirection%3A%20%22row%22%2C%0A%20%20%20%20justifyContent%3A%20%22space-around%22%2C%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -131,10 +129,10 @@ export default App;
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<View style={[styles.container, styles.horizontal]}>
|
||||
<ActivityIndicator size="large" color="#0000ff" />
|
||||
<ActivityIndicator size="small" color="#00ff00" />
|
||||
<ActivityIndicator size="large" color="#0000ff" />
|
||||
<ActivityIndicator size="small" color="#00ff00" />
|
||||
<ActivityIndicator />
|
||||
<ActivityIndicator size="large" />
|
||||
<ActivityIndicator size="small" color="#0000ff" />
|
||||
<ActivityIndicator size="large" color="#00ff00" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -156,7 +154,7 @@ export default App;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="ActivityIndicator Class Component Example"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20ActivityIndicator%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aclass%20App%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%5Bstyles.container%2C%20styles.horizontal%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22large%22%20color%3D%22%230000ff%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22small%22%20color%3D%22%2300ff00%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22large%22%20color%3D%22%230000ff%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22small%22%20color%3D%22%2300ff00%22%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%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%0A%20%20%7D%2C%0A%20%20horizontal%3A%20%7B%0A%20%20%20%20flexDirection%3A%20%22row%22%2C%0A%20%20%20%20justifyContent%3A%20%22space-around%22%2C%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20ActivityIndicator%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aclass%20App%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%5Bstyles.container%2C%20styles.horizontal%5D%7D%3E%0A%20%20%20%20%20%20%3CActivityIndicator%20%2F%3E%0A%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22large%22%20%2F%3E%0A%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22small%22%20color%3D%22%230000ff%22%20%2F%3E%0A%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22large%22%20color%3D%22%2300ff00%22%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%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%0A%20%20%7D%2C%0A%20%20horizontal%3A%20%7B%0A%20%20%20%20flexDirection%3A%20%22row%22%2C%0A%20%20%20%20justifyContent%3A%20%22space-around%22%2C%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -172,50 +170,51 @@ export default App;
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h2>
|
||||
<p>Inherits <a href="view#props">View Props</a>.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="animating"></a><a href="#animating" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>animating</code></h3>
|
||||
<p>Whether to show the indicator (true, the default) or hide it (false).</p>
|
||||
<p>Whether to show the indicator (<code>true</code>) or hide it (<code>false</code>).</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td></tr>
|
||||
<tr><td>bool</td><td>No</td><td><code>true</code></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="color"></a><a href="#color" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>color</code></h3>
|
||||
<p>The foreground color of the spinner (default is gray on iOS and dark cyan on Android).</p>
|
||||
<p>The foreground color of the spinner.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="colors">color</a></td><td>No</td></tr>
|
||||
<tr><td><a href="colors">color</a></td><td>No</td><td><code>null</code> (system accent default color)<div class="label android">Android</div><hr/><ins style="background: #999" class="color-box"></ins><code>'#999999'</code> <div class="label ios">iOS</div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="hideswhenstopped"></a><a href="#hideswhenstopped" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>hidesWhenStopped</code></h3>
|
||||
<p>Whether the indicator should hide when not animating (true by default).</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="hideswhenstopped-div-classlabel-iosiosdiv"></a><a href="#hideswhenstopped-div-classlabel-iosiosdiv" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>hidesWhenStopped</code> <div class="label ios">iOS</div></h3>
|
||||
<p>Whether the indicator should hide when not animating.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td><td>iOS</td></tr>
|
||||
<tr><td>bool</td><td>No</td><td><code>true</code></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="size"></a><a href="#size" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>size</code></h3>
|
||||
<p>Size of the indicator (default is 'small'). Passing a number to the size prop is only supported on Android.</p>
|
||||
<p>Size of the indicator.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>enum('small', 'large'), number</td><td>No</td></tr>
|
||||
<tr><td>enum(<code>'small'</code>, <code>'large'</code>)<hr/>number <div class="label android">Android</div></td><td>No</td><td><code>'small'</code></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/components-and-apis"><span class="arrow-prev">← </span><span>Core Components and APIs</span></a><a class="docs-next button" href="/docs/next/button"><span>Button</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#animating"><code>animating</code></a></li><li><a href="#color"><code>color</code></a></li><li><a href="#hideswhenstopped"><code>hidesWhenStopped</code></a></li><li><a href="#size"><code>size</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/components-and-apis"><span class="arrow-prev">← </span><span>Core Components and APIs</span></a><a class="docs-next button" href="/docs/next/button"><span>Button</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#animating"><code>animating</code></a></li><li><a href="#color"><code>color</code></a></li><li><a href="#hideswhenstopped-div-classlabel-iosiosdiv"><code>hidesWhenStopped</code> <div class="label ios">iOS</div></a></li><li><a href="#size"><code>size</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
@@ -84,16 +84,14 @@
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
|
||||
<span class="hljs-keyword">import</span> { ActivityIndicator, StyleSheet, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-native"</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> App = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<View style={[styles.container, styles.horizontal]}>
|
||||
<ActivityIndicator size="large" color="#0000ff" />
|
||||
<ActivityIndicator size="small" color="#00ff00" />
|
||||
<ActivityIndicator size="large" color="#0000ff" />
|
||||
<ActivityIndicator size="small" color="#00ff00" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
<span class="hljs-keyword">const</span> App = <span class="hljs-function"><span class="hljs-params">()</span> =></span> (
|
||||
<View style={[styles.container, styles.horizontal]}>
|
||||
<ActivityIndicator />
|
||||
<ActivityIndicator size="large" />
|
||||
<ActivityIndicator size="small" color="#0000ff" />
|
||||
<ActivityIndicator size="large" color="#00ff00" />
|
||||
</View>
|
||||
);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
@@ -111,7 +109,7 @@ export default App;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="ActivityIndicator Function Component Example"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20%22react%22%3B%0Aimport%20%7B%20ActivityIndicator%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%5Bstyles.container%2C%20styles.horizontal%5D%7D%3E%0A%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22large%22%20color%3D%22%230000ff%22%20%2F%3E%0A%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22small%22%20color%3D%22%2300ff00%22%20%2F%3E%0A%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22large%22%20color%3D%22%230000ff%22%20%2F%3E%0A%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22small%22%20color%3D%22%2300ff00%22%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%0A%20%20%7D%2C%0A%20%20horizontal%3A%20%7B%0A%20%20%20%20flexDirection%3A%20%22row%22%2C%0A%20%20%20%20justifyContent%3A%20%22space-around%22%2C%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-code="import%20React%20from%20%22react%22%3B%0Aimport%20%7B%20ActivityIndicator%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20(%0A%20%20%3CView%20style%3D%7B%5Bstyles.container%2C%20styles.horizontal%5D%7D%3E%0A%20%20%20%20%3CActivityIndicator%20%2F%3E%0A%20%20%20%20%3CActivityIndicator%20size%3D%22large%22%20%2F%3E%0A%20%20%20%20%3CActivityIndicator%20size%3D%22small%22%20color%3D%22%230000ff%22%20%2F%3E%0A%20%20%20%20%3CActivityIndicator%20size%3D%22large%22%20color%3D%22%2300ff00%22%20%2F%3E%0A%20%20%3C%2FView%3E%0A)%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%0A%20%20%7D%2C%0A%20%20horizontal%3A%20%7B%0A%20%20%20%20flexDirection%3A%20%22row%22%2C%0A%20%20%20%20justifyContent%3A%20%22space-around%22%2C%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -131,10 +129,10 @@ export default App;
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<View style={[styles.container, styles.horizontal]}>
|
||||
<ActivityIndicator size="large" color="#0000ff" />
|
||||
<ActivityIndicator size="small" color="#00ff00" />
|
||||
<ActivityIndicator size="large" color="#0000ff" />
|
||||
<ActivityIndicator size="small" color="#00ff00" />
|
||||
<ActivityIndicator />
|
||||
<ActivityIndicator size="large" />
|
||||
<ActivityIndicator size="small" color="#0000ff" />
|
||||
<ActivityIndicator size="large" color="#00ff00" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -156,7 +154,7 @@ export default App;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="ActivityIndicator Class Component Example"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20ActivityIndicator%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aclass%20App%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%5Bstyles.container%2C%20styles.horizontal%5D%7D%3E%0A%20%20%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22large%22%20color%3D%22%230000ff%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22small%22%20color%3D%22%2300ff00%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22large%22%20color%3D%22%230000ff%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22small%22%20color%3D%22%2300ff00%22%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%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%0A%20%20%7D%2C%0A%20%20horizontal%3A%20%7B%0A%20%20%20%20flexDirection%3A%20%22row%22%2C%0A%20%20%20%20justifyContent%3A%20%22space-around%22%2C%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20ActivityIndicator%2C%20StyleSheet%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aclass%20App%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%5Bstyles.container%2C%20styles.horizontal%5D%7D%3E%0A%20%20%20%20%20%20%3CActivityIndicator%20%2F%3E%0A%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22large%22%20%2F%3E%0A%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22small%22%20color%3D%22%230000ff%22%20%2F%3E%0A%20%20%20%20%20%20%3CActivityIndicator%20size%3D%22large%22%20color%3D%22%2300ff00%22%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%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%0A%20%20%7D%2C%0A%20%20horizontal%3A%20%7B%0A%20%20%20%20flexDirection%3A%20%22row%22%2C%0A%20%20%20%20justifyContent%3A%20%22space-around%22%2C%0A%20%20%20%20padding%3A%2010%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -172,50 +170,51 @@ export default App;
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h2>
|
||||
<p>Inherits <a href="view#props">View Props</a>.</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="animating"></a><a href="#animating" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>animating</code></h3>
|
||||
<p>Whether to show the indicator (true, the default) or hide it (false).</p>
|
||||
<p>Whether to show the indicator (<code>true</code>) or hide it (<code>false</code>).</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td></tr>
|
||||
<tr><td>bool</td><td>No</td><td><code>true</code></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="color"></a><a href="#color" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>color</code></h3>
|
||||
<p>The foreground color of the spinner (default is gray on iOS and dark cyan on Android).</p>
|
||||
<p>The foreground color of the spinner.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="colors">color</a></td><td>No</td></tr>
|
||||
<tr><td><a href="colors">color</a></td><td>No</td><td><code>null</code> (system accent default color)<div class="label android">Android</div><hr/><ins style="background: #999" class="color-box"></ins><code>'#999999'</code> <div class="label ios">iOS</div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="hideswhenstopped"></a><a href="#hideswhenstopped" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>hidesWhenStopped</code></h3>
|
||||
<p>Whether the indicator should hide when not animating (true by default).</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="hideswhenstopped-div-classlabel-iosiosdiv"></a><a href="#hideswhenstopped-div-classlabel-iosiosdiv" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>hidesWhenStopped</code> <div class="label ios">iOS</div></h3>
|
||||
<p>Whether the indicator should hide when not animating.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td><td>iOS</td></tr>
|
||||
<tr><td>bool</td><td>No</td><td><code>true</code></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="size"></a><a href="#size" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>size</code></h3>
|
||||
<p>Size of the indicator (default is 'small'). Passing a number to the size prop is only supported on Android.</p>
|
||||
<p>Size of the indicator.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>enum('small', 'large'), number</td><td>No</td></tr>
|
||||
<tr><td>enum(<code>'small'</code>, <code>'large'</code>)<hr/>number <div class="label android">Android</div></td><td>No</td><td><code>'small'</code></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/components-and-apis"><span class="arrow-prev">← </span><span>Core Components and APIs</span></a><a class="docs-next button" href="/docs/next/button"><span>Button</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#animating"><code>animating</code></a></li><li><a href="#color"><code>color</code></a></li><li><a href="#hideswhenstopped"><code>hidesWhenStopped</code></a></li><li><a href="#size"><code>size</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/components-and-apis"><span class="arrow-prev">← </span><span>Core Components and APIs</span></a><a class="docs-next button" href="/docs/next/button"><span>Button</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#animating"><code>animating</code></a></li><li><a href="#color"><code>color</code></a></li><li><a href="#hideswhenstopped-div-classlabel-iosiosdiv"><code>hidesWhenStopped</code> <div class="label ios">iOS</div></a></li><li><a href="#size"><code>size</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+132
-137
@@ -80,73 +80,67 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { StyleSheet, Button, View, SafeAreaView, Text, Alert } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
<span class="hljs-keyword">import</span> Constants <span class="hljs-keyword">from</span> <span class="hljs-string">'expo-constants'</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> Separator = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> <View style={styles.separator} />;
|
||||
}
|
||||
<span class="hljs-keyword">const</span> Separator = <span class="hljs-function"><span class="hljs-params">()</span> =></span> (
|
||||
<View style={styles.separator} />
|
||||
);
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<View>
|
||||
<Text style={styles.title}>
|
||||
The title and onPress handler are required. It is recommended to set
|
||||
accessibilityLabel to help make your app usable by everyone.
|
||||
</Text>
|
||||
const App = () => (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<View>
|
||||
<Text style={styles.title}>
|
||||
The title and onPress handler are required. It is recommended to set accessibilityLabel to help make your app usable by everyone.
|
||||
</Text>
|
||||
<Button
|
||||
title="Press me"
|
||||
onPress={() => Alert.alert('Simple Button pressed')}
|
||||
/>
|
||||
</View>
|
||||
<Separator />
|
||||
<View>
|
||||
<Text style={styles.title}>
|
||||
Adjust the color in a way that looks standard on each platform. On iOS, the color prop controls the color of the text. On Android, the color adjusts the background color of the button.
|
||||
</Text>
|
||||
<Button
|
||||
title="Press me"
|
||||
color="#f194ff"
|
||||
onPress={() => Alert.alert('Button with adjusted color pressed')}
|
||||
/>
|
||||
</View>
|
||||
<Separator />
|
||||
<View>
|
||||
<Text style={styles.title}>
|
||||
All interaction for the component are disabled.
|
||||
</Text>
|
||||
<Button
|
||||
title="Press me"
|
||||
disabled
|
||||
onPress={() => Alert.alert('Cannot press this one')}
|
||||
/>
|
||||
</View>
|
||||
<Separator />
|
||||
<View>
|
||||
<Text style={styles.title}>
|
||||
This layout strategy lets the title define the width of the button.
|
||||
</Text>
|
||||
<View style={styles.fixToText}>
|
||||
<Button
|
||||
title="Press me"
|
||||
onPress={() => Alert.alert('Simple Button pressed')}
|
||||
title="Left button"
|
||||
onPress={() => Alert.alert('Left button pressed')}
|
||||
/>
|
||||
<Button
|
||||
title="Right button"
|
||||
onPress={() => Alert.alert('Right button pressed')}
|
||||
/>
|
||||
</View>
|
||||
<Separator />
|
||||
<View>
|
||||
<Text style={styles.title}>
|
||||
Adjust the color in a way that looks standard on each platform. On
|
||||
iOS, the color prop controls the color of the text. On Android, the
|
||||
color adjusts the background color of the button.
|
||||
</Text>
|
||||
<Button
|
||||
title="Press me"
|
||||
color="#f194ff"
|
||||
onPress={() => Alert.alert('Button with adjusted color pressed')}
|
||||
/>
|
||||
</View>
|
||||
<Separator />
|
||||
<View>
|
||||
<Text style={styles.title}>
|
||||
All interaction for the component are disabled.
|
||||
</Text>
|
||||
<Button
|
||||
title="Press me"
|
||||
disabled
|
||||
onPress={() => Alert.alert('Cannot press this one')}
|
||||
/>
|
||||
</View>
|
||||
<Separator />
|
||||
<View>
|
||||
<Text style={styles.title}>
|
||||
This layout strategy lets the title define the width of the button.
|
||||
</Text>
|
||||
<View style={styles.fixToText}>
|
||||
<Button
|
||||
title="Left button"
|
||||
onPress={() => Alert.alert('Left button pressed')}
|
||||
/>
|
||||
<Button
|
||||
title="Right button"
|
||||
onPress={() => Alert.alert('Right button pressed')}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
marginTop: Constants.statusBarHeight,
|
||||
justifyContent: 'center',
|
||||
marginHorizontal: 16,
|
||||
},
|
||||
title: {
|
||||
@@ -166,9 +160,9 @@ const styles = StyleSheet.create({
|
||||
|
||||
export default App;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Buttons"
|
||||
data-snack-name="Button Example"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20StyleSheet%2C%20Button%2C%20View%2C%20SafeAreaView%2C%20Text%2C%20Alert%20%7D%20from%20'react-native'%3B%0Aimport%20Constants%20from%20'expo-constants'%3B%0A%0Aconst%20Separator%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20%3CView%20style%3D%7Bstyles.separator%7D%20%2F%3E%3B%0A%7D%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%0A%20%20%20%20%20%20%20%20%20%20The%20title%20and%20onPress%20handler%20are%20required.%20It%20is%20recommended%20to%20set%0A%20%20%20%20%20%20%20%20%20%20accessibilityLabel%20to%20help%20make%20your%20app%20usable%20by%20everyone.%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20title%3D%22Press%20me%22%0A%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20Alert.alert('Simple%20Button%20pressed')%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CSeparator%20%2F%3E%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%0A%20%20%20%20%20%20%20%20%20%20Adjust%20the%20color%20in%20a%20way%20that%20looks%20standard%20on%20each%20platform.%20On%0A%20%20%20%20%20%20%20%20%20%20iOS%2C%20the%20color%20prop%20controls%20the%20color%20of%20the%20text.%20On%20Android%2C%20the%0A%20%20%20%20%20%20%20%20%20%20color%20adjusts%20the%20background%20color%20of%20the%20button.%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20title%3D%22Press%20me%22%0A%20%20%20%20%20%20%20%20%20%20color%3D%22%23f194ff%22%0A%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20Alert.alert('Button%20with%20adjusted%20color%20pressed')%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CSeparator%20%2F%3E%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%0A%20%20%20%20%20%20%20%20%20%20All%20interaction%20for%20the%20component%20are%20disabled.%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20title%3D%22Press%20me%22%0A%20%20%20%20%20%20%20%20%20%20disabled%0A%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20Alert.alert('Cannot%20press%20this%20one')%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CSeparator%20%2F%3E%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%0A%20%20%20%20%20%20%20%20%20%20This%20layout%20strategy%20lets%20the%20title%20define%20the%20width%20of%20the%20button.%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.fixToText%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20%20%20title%3D%22Left%20button%22%0A%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20Alert.alert('Left%20button%20pressed')%7D%0A%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20%20%20title%3D%22Right%20button%22%0A%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20Alert.alert('Right%20button%20pressed')%7D%0A%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20marginTop%3A%20Constants.statusBarHeight%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%7D%2C%0A%20%20title%3A%20%7B%0A%20%20%20%20textAlign%3A%20'center'%2C%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%7D%2C%0A%20%20fixToText%3A%20%7B%0A%20%20%20%20flexDirection%3A%20'row'%2C%0A%20%20%20%20justifyContent%3A%20'space-between'%2C%0A%20%20%7D%2C%0A%20%20separator%3A%20%7B%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%20%20borderBottomColor%3A%20'%23737373'%2C%0A%20%20%20%20borderBottomWidth%3A%20StyleSheet.hairlineWidth%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20StyleSheet%2C%20Button%2C%20View%2C%20SafeAreaView%2C%20Text%2C%20Alert%20%7D%20from%20'react-native'%3B%0A%0Aconst%20Separator%20%3D%20()%20%3D%3E%20(%0A%20%20%3CView%20style%3D%7Bstyles.separator%7D%20%2F%3E%0A)%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20(%0A%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%0A%20%20%20%20%20%20%20%20The%20title%20and%20onPress%20handler%20are%20required.%20It%20is%20recommended%20to%20set%20accessibilityLabel%20to%20help%20make%20your%20app%20usable%20by%20everyone.%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20title%3D%22Press%20me%22%0A%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20Alert.alert('Simple%20Button%20pressed')%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%3CSeparator%20%2F%3E%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%0A%20%20%20%20%20%20%20%20Adjust%20the%20color%20in%20a%20way%20that%20looks%20standard%20on%20each%20platform.%20On%20%20iOS%2C%20the%20color%20prop%20controls%20the%20color%20of%20the%20text.%20On%20Android%2C%20the%20color%20adjusts%20the%20background%20color%20of%20the%20button.%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20title%3D%22Press%20me%22%0A%20%20%20%20%20%20%20%20color%3D%22%23f194ff%22%0A%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20Alert.alert('Button%20with%20adjusted%20color%20pressed')%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%3CSeparator%20%2F%3E%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%0A%20%20%20%20%20%20%20%20All%20interaction%20for%20the%20component%20are%20disabled.%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20title%3D%22Press%20me%22%0A%20%20%20%20%20%20%20%20disabled%0A%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20Alert.alert('Cannot%20press%20this%20one')%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%3CSeparator%20%2F%3E%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%0A%20%20%20%20%20%20%20%20This%20layout%20strategy%20lets%20the%20title%20define%20the%20width%20of%20the%20button.%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.fixToText%7D%3E%0A%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20title%3D%22Left%20button%22%0A%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20Alert.alert('Left%20button%20pressed')%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20title%3D%22Right%20button%22%0A%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20Alert.alert('Right%20button%20pressed')%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%3C%2FSafeAreaView%3E%0A)%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20'center'%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%7D%2C%0A%20%20title%3A%20%7B%0A%20%20%20%20textAlign%3A%20'center'%2C%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%7D%2C%0A%20%20fixToText%3A%20%7B%0A%20%20%20%20flexDirection%3A%20'row'%2C%0A%20%20%20%20justifyContent%3A%20'space-between'%2C%0A%20%20%7D%2C%0A%20%20separator%3A%20%7B%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%20%20borderBottomColor%3A%20'%23737373'%2C%0A%20%20%20%20borderBottomWidth%3A%20StyleSheet.hairlineWidth%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -183,7 +177,7 @@ export default App;
|
||||
></div></div></div><hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onpress"></a><a href="#onpress" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onPress</code></h3>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onpress"></a><a href="#onpress" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><strong><code>onPress</code></strong></h3>
|
||||
<p>Handler to be called when the user taps the button. The first function argument is an event in form of <a href="pressevent">PressEvent</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -194,8 +188,8 @@ export default App;
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="title"></a><a href="#title" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>title</code></h3>
|
||||
<p>Text to display inside the button.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="title"></a><a href="#title" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><strong><code>title</code></strong></h3>
|
||||
<p>Text to display inside the button. On Android the given title will be converted to the uppercased form.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -220,21 +214,87 @@ export default App;
|
||||
<p>Color of the text (iOS), or background color of the button (Android).</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="colors">color</a></td><td>No</td></tr>
|
||||
<tr><td><a href="colors">color</a></td><td>No</td><td><ins style="background: #2196F3" class="color-box"></ins><code>'#2196F3'</code> <div class="label android">Android</div><hr/><ins style="background: #007AFF" class="color-box"></ins><code>'#007AFF'</code> <div class="label ios">iOS</div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="disabled"></a><a href="#disabled" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>disabled</code></h3>
|
||||
<p>If true, disable all interactions for this component.</p>
|
||||
<p>If <code>true</code>, disable all interactions for this component.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td><td><code>false</code></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="hastvpreferredfocus-div-classlabel-tvtvdiv"></a><a href="#hastvpreferredfocus-div-classlabel-tvtvdiv" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>hasTVPreferredFocus</code> <div class="label tv">TV</div></h3>
|
||||
<p>TV preferred focus.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td><td><code>false</code></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="nextfocusdown-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv"></a><a href="#nextfocusdown-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>nextFocusDown</code> <div class="label android">Android</div><div class="label tv">TV</div></h3>
|
||||
<p>Designates the next view to receive focus when the user navigates down. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown">Android documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td></tr>
|
||||
<tr><td>number</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="nextfocusforward-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv"></a><a href="#nextfocusforward-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>nextFocusForward</code> <div class="label android">Android</div><div class="label tv">TV</div></h3>
|
||||
<p>Designates the next view to receive focus when the user navigates forward. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward">Android documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="nextfocusleft-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv"></a><a href="#nextfocusleft-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>nextFocusLeft</code> <div class="label android">Android</div><div class="label tv">TV</div></h3>
|
||||
<p>Designates the next view to receive focus when the user navigates left. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft">Android documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="nextfocusright-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv"></a><a href="#nextfocusright-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>nextFocusRight</code> <div class="label android">Android</div><div class="label tv">TV</div></h3>
|
||||
<p>Designates the next view to receive focus when the user navigates right. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight">Android documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="nextfocusup-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv"></a><a href="#nextfocusup-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>nextFocusUp</code> <div class="label android">Android</div><div class="label tv">TV</div></h3>
|
||||
<p>Designates the next view to receive focus when the user navigates up. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp">Android documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -249,82 +309,17 @@ export default App;
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="hastvpreferredfocus"></a><a href="#hastvpreferredfocus" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>hasTVPreferredFocus</code></h3>
|
||||
<p><em>(Apple TV only)</em> TV preferred focus (see documentation for the View component).</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="touchsounddisabled-div-classlabel-androidandroiddiv"></a><a href="#touchsounddisabled-div-classlabel-androidandroiddiv" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>touchSoundDisabled</code> <div class="label android">Android</div></h3>
|
||||
<p>If <code>true</code>, doesn't play system sound on touch.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td><td>iOS</td></tr>
|
||||
<tr><td>boolean</td><td>No</td><td><code>false</code></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3><a class="anchor" aria-hidden="true" id="nextfocusdown"></a><a href="#nextfocusdown" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>nextFocusDown</code></h3>
|
||||
<p>Designates the next view to receive focus when the user navigates down. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown">Android documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="nextfocusforward"></a><a href="#nextfocusforward" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>nextFocusForward</code></h3>
|
||||
<p>Designates the next view to receive focus when the user navigates forward. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward">Android documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="nextfocusleft"></a><a href="#nextfocusleft" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>nextFocusLeft</code></h3>
|
||||
<p>Designates the next view to receive focus when the user navigates left. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft">Android documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="nextfocusright"></a><a href="#nextfocusright" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>nextFocusRight</code></h3>
|
||||
<p>Designates the next view to receive focus when the user navigates right. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight">Android documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="nextfocusup"></a><a href="#nextfocusup" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>nextFocusUp</code></h3>
|
||||
<p>Designates the next view to receive focus when the user navigates up. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp">Android documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="touchsounddisabled"></a><a href="#touchsounddisabled" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>touchSoundDisabled</code></h3>
|
||||
<p>If true, doesn't play system sound on touch.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>boolean</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/activityindicator"><span class="arrow-prev">← </span><span class="function-name-prevnext">ActivityIndicator</span></a><a class="docs-next button" href="/docs/next/flatlist"><span class="function-name-prevnext">FlatList</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#onpress"><code>onPress</code></a></li><li><a href="#title"><code>title</code></a></li><li><a href="#accessibilitylabel"><code>accessibilityLabel</code></a></li><li><a href="#color"><code>color</code></a></li><li><a href="#disabled"><code>disabled</code></a></li><li><a href="#testid"><code>testID</code></a></li><li><a href="#hastvpreferredfocus"><code>hasTVPreferredFocus</code></a></li><li><a href="#nextfocusdown"><code>nextFocusDown</code></a></li><li><a href="#nextfocusforward"><code>nextFocusForward</code></a></li><li><a href="#nextfocusleft"><code>nextFocusLeft</code></a></li><li><a href="#nextfocusright"><code>nextFocusRight</code></a></li><li><a href="#nextfocusup"><code>nextFocusUp</code></a></li><li><a href="#touchsounddisabled"><code>touchSoundDisabled</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/activityindicator"><span class="arrow-prev">← </span><span class="function-name-prevnext">ActivityIndicator</span></a><a class="docs-next button" href="/docs/next/flatlist"><span class="function-name-prevnext">FlatList</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#onpress"><strong><code>onPress</code></strong></a></li><li><a href="#title"><strong><code>title</code></strong></a></li><li><a href="#accessibilitylabel"><code>accessibilityLabel</code></a></li><li><a href="#color"><code>color</code></a></li><li><a href="#disabled"><code>disabled</code></a></li><li><a href="#hastvpreferredfocus-div-classlabel-tvtvdiv"><code>hasTVPreferredFocus</code> <div class="label tv">TV</div></a></li><li><a href="#nextfocusdown-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv"><code>nextFocusDown</code> <div class="label android">Android</div><div class="label tv">TV</div></a></li><li><a href="#nextfocusforward-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv"><code>nextFocusForward</code> <div class="label android">Android</div><div class="label tv">TV</div></a></li><li><a href="#nextfocusleft-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv"><code>nextFocusLeft</code> <div class="label android">Android</div><div class="label tv">TV</div></a></li><li><a href="#nextfocusright-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv"><code>nextFocusRight</code> <div class="label android">Android</div><div class="label tv">TV</div></a></li><li><a href="#nextfocusup-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv"><code>nextFocusUp</code> <div class="label android">Android</div><div class="label tv">TV</div></a></li><li><a href="#testid"><code>testID</code></a></li><li><a href="#touchsounddisabled-div-classlabel-androidandroiddiv"><code>touchSoundDisabled</code> <div class="label android">Android</div></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
+132
-137
@@ -80,73 +80,67 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h2>
|
||||
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
||||
<span class="hljs-keyword">import</span> { StyleSheet, Button, View, SafeAreaView, Text, Alert } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
||||
<span class="hljs-keyword">import</span> Constants <span class="hljs-keyword">from</span> <span class="hljs-string">'expo-constants'</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> Separator = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
||||
<span class="hljs-keyword">return</span> <View style={styles.separator} />;
|
||||
}
|
||||
<span class="hljs-keyword">const</span> Separator = <span class="hljs-function"><span class="hljs-params">()</span> =></span> (
|
||||
<View style={styles.separator} />
|
||||
);
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<View>
|
||||
<Text style={styles.title}>
|
||||
The title and onPress handler are required. It is recommended to set
|
||||
accessibilityLabel to help make your app usable by everyone.
|
||||
</Text>
|
||||
const App = () => (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<View>
|
||||
<Text style={styles.title}>
|
||||
The title and onPress handler are required. It is recommended to set accessibilityLabel to help make your app usable by everyone.
|
||||
</Text>
|
||||
<Button
|
||||
title="Press me"
|
||||
onPress={() => Alert.alert('Simple Button pressed')}
|
||||
/>
|
||||
</View>
|
||||
<Separator />
|
||||
<View>
|
||||
<Text style={styles.title}>
|
||||
Adjust the color in a way that looks standard on each platform. On iOS, the color prop controls the color of the text. On Android, the color adjusts the background color of the button.
|
||||
</Text>
|
||||
<Button
|
||||
title="Press me"
|
||||
color="#f194ff"
|
||||
onPress={() => Alert.alert('Button with adjusted color pressed')}
|
||||
/>
|
||||
</View>
|
||||
<Separator />
|
||||
<View>
|
||||
<Text style={styles.title}>
|
||||
All interaction for the component are disabled.
|
||||
</Text>
|
||||
<Button
|
||||
title="Press me"
|
||||
disabled
|
||||
onPress={() => Alert.alert('Cannot press this one')}
|
||||
/>
|
||||
</View>
|
||||
<Separator />
|
||||
<View>
|
||||
<Text style={styles.title}>
|
||||
This layout strategy lets the title define the width of the button.
|
||||
</Text>
|
||||
<View style={styles.fixToText}>
|
||||
<Button
|
||||
title="Press me"
|
||||
onPress={() => Alert.alert('Simple Button pressed')}
|
||||
title="Left button"
|
||||
onPress={() => Alert.alert('Left button pressed')}
|
||||
/>
|
||||
<Button
|
||||
title="Right button"
|
||||
onPress={() => Alert.alert('Right button pressed')}
|
||||
/>
|
||||
</View>
|
||||
<Separator />
|
||||
<View>
|
||||
<Text style={styles.title}>
|
||||
Adjust the color in a way that looks standard on each platform. On
|
||||
iOS, the color prop controls the color of the text. On Android, the
|
||||
color adjusts the background color of the button.
|
||||
</Text>
|
||||
<Button
|
||||
title="Press me"
|
||||
color="#f194ff"
|
||||
onPress={() => Alert.alert('Button with adjusted color pressed')}
|
||||
/>
|
||||
</View>
|
||||
<Separator />
|
||||
<View>
|
||||
<Text style={styles.title}>
|
||||
All interaction for the component are disabled.
|
||||
</Text>
|
||||
<Button
|
||||
title="Press me"
|
||||
disabled
|
||||
onPress={() => Alert.alert('Cannot press this one')}
|
||||
/>
|
||||
</View>
|
||||
<Separator />
|
||||
<View>
|
||||
<Text style={styles.title}>
|
||||
This layout strategy lets the title define the width of the button.
|
||||
</Text>
|
||||
<View style={styles.fixToText}>
|
||||
<Button
|
||||
title="Left button"
|
||||
onPress={() => Alert.alert('Left button pressed')}
|
||||
/>
|
||||
<Button
|
||||
title="Right button"
|
||||
onPress={() => Alert.alert('Right button pressed')}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
marginTop: Constants.statusBarHeight,
|
||||
justifyContent: 'center',
|
||||
marginHorizontal: 16,
|
||||
},
|
||||
title: {
|
||||
@@ -166,9 +160,9 @@ const styles = StyleSheet.create({
|
||||
|
||||
export default App;
|
||||
</code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
||||
data-snack-name="Buttons"
|
||||
data-snack-name="Button Example"
|
||||
data-snack-description="Example usage"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20StyleSheet%2C%20Button%2C%20View%2C%20SafeAreaView%2C%20Text%2C%20Alert%20%7D%20from%20'react-native'%3B%0Aimport%20Constants%20from%20'expo-constants'%3B%0A%0Aconst%20Separator%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20%3CView%20style%3D%7Bstyles.separator%7D%20%2F%3E%3B%0A%7D%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%0A%20%20%20%20%20%20%20%20%20%20The%20title%20and%20onPress%20handler%20are%20required.%20It%20is%20recommended%20to%20set%0A%20%20%20%20%20%20%20%20%20%20accessibilityLabel%20to%20help%20make%20your%20app%20usable%20by%20everyone.%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20title%3D%22Press%20me%22%0A%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20Alert.alert('Simple%20Button%20pressed')%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CSeparator%20%2F%3E%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%0A%20%20%20%20%20%20%20%20%20%20Adjust%20the%20color%20in%20a%20way%20that%20looks%20standard%20on%20each%20platform.%20On%0A%20%20%20%20%20%20%20%20%20%20iOS%2C%20the%20color%20prop%20controls%20the%20color%20of%20the%20text.%20On%20Android%2C%20the%0A%20%20%20%20%20%20%20%20%20%20color%20adjusts%20the%20background%20color%20of%20the%20button.%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20title%3D%22Press%20me%22%0A%20%20%20%20%20%20%20%20%20%20color%3D%22%23f194ff%22%0A%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20Alert.alert('Button%20with%20adjusted%20color%20pressed')%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CSeparator%20%2F%3E%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%0A%20%20%20%20%20%20%20%20%20%20All%20interaction%20for%20the%20component%20are%20disabled.%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20title%3D%22Press%20me%22%0A%20%20%20%20%20%20%20%20%20%20disabled%0A%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20Alert.alert('Cannot%20press%20this%20one')%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3CSeparator%20%2F%3E%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%0A%20%20%20%20%20%20%20%20%20%20This%20layout%20strategy%20lets%20the%20title%20define%20the%20width%20of%20the%20button.%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.fixToText%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20%20%20title%3D%22Left%20button%22%0A%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20Alert.alert('Left%20button%20pressed')%7D%0A%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20%20%20title%3D%22Right%20button%22%0A%20%20%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20Alert.alert('Right%20button%20pressed')%7D%0A%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%3C%2FSafeAreaView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20marginTop%3A%20Constants.statusBarHeight%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%7D%2C%0A%20%20title%3A%20%7B%0A%20%20%20%20textAlign%3A%20'center'%2C%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%7D%2C%0A%20%20fixToText%3A%20%7B%0A%20%20%20%20flexDirection%3A%20'row'%2C%0A%20%20%20%20justifyContent%3A%20'space-between'%2C%0A%20%20%7D%2C%0A%20%20separator%3A%20%7B%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%20%20borderBottomColor%3A%20'%23737373'%2C%0A%20%20%20%20borderBottomWidth%3A%20StyleSheet.hairlineWidth%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20StyleSheet%2C%20Button%2C%20View%2C%20SafeAreaView%2C%20Text%2C%20Alert%20%7D%20from%20'react-native'%3B%0A%0Aconst%20Separator%20%3D%20()%20%3D%3E%20(%0A%20%20%3CView%20style%3D%7Bstyles.separator%7D%20%2F%3E%0A)%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20(%0A%20%20%3CSafeAreaView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%0A%20%20%20%20%20%20%20%20The%20title%20and%20onPress%20handler%20are%20required.%20It%20is%20recommended%20to%20set%20accessibilityLabel%20to%20help%20make%20your%20app%20usable%20by%20everyone.%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20title%3D%22Press%20me%22%0A%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20Alert.alert('Simple%20Button%20pressed')%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%3CSeparator%20%2F%3E%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%0A%20%20%20%20%20%20%20%20Adjust%20the%20color%20in%20a%20way%20that%20looks%20standard%20on%20each%20platform.%20On%20%20iOS%2C%20the%20color%20prop%20controls%20the%20color%20of%20the%20text.%20On%20Android%2C%20the%20color%20adjusts%20the%20background%20color%20of%20the%20button.%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20title%3D%22Press%20me%22%0A%20%20%20%20%20%20%20%20color%3D%22%23f194ff%22%0A%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20Alert.alert('Button%20with%20adjusted%20color%20pressed')%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%3CSeparator%20%2F%3E%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%0A%20%20%20%20%20%20%20%20All%20interaction%20for%20the%20component%20are%20disabled.%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20title%3D%22Press%20me%22%0A%20%20%20%20%20%20%20%20disabled%0A%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20Alert.alert('Cannot%20press%20this%20one')%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%3CSeparator%20%2F%3E%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.title%7D%3E%0A%20%20%20%20%20%20%20%20This%20layout%20strategy%20lets%20the%20title%20define%20the%20width%20of%20the%20button.%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.fixToText%7D%3E%0A%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20title%3D%22Left%20button%22%0A%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20Alert.alert('Left%20button%20pressed')%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20title%3D%22Right%20button%22%0A%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20Alert.alert('Right%20button%20pressed')%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20%3C%2FSafeAreaView%3E%0A)%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20'center'%2C%0A%20%20%20%20marginHorizontal%3A%2016%2C%0A%20%20%7D%2C%0A%20%20title%3A%20%7B%0A%20%20%20%20textAlign%3A%20'center'%2C%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%7D%2C%0A%20%20fixToText%3A%20%7B%0A%20%20%20%20flexDirection%3A%20'row'%2C%0A%20%20%20%20justifyContent%3A%20'space-between'%2C%0A%20%20%7D%2C%0A%20%20separator%3A%20%7B%0A%20%20%20%20marginVertical%3A%208%2C%0A%20%20%20%20borderBottomColor%3A%20'%23737373'%2C%0A%20%20%20%20borderBottomWidth%3A%20StyleSheet.hairlineWidth%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
||||
data-snack-platform="web"
|
||||
data-snack-supported-platforms=ios,android,web
|
||||
data-snack-preview="true"
|
||||
@@ -183,7 +177,7 @@ export default App;
|
||||
></div></div></div><hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h2>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onpress"></a><a href="#onpress" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onPress</code></h3>
|
||||
<h3><a class="anchor" aria-hidden="true" id="onpress"></a><a href="#onpress" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><strong><code>onPress</code></strong></h3>
|
||||
<p>Handler to be called when the user taps the button. The first function argument is an event in form of <a href="pressevent">PressEvent</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
@@ -194,8 +188,8 @@ export default App;
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="title"></a><a href="#title" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>title</code></h3>
|
||||
<p>Text to display inside the button.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="title"></a><a href="#title" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><strong><code>title</code></strong></h3>
|
||||
<p>Text to display inside the button. On Android the given title will be converted to the uppercased form.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -220,21 +214,87 @@ export default App;
|
||||
<p>Color of the text (iOS), or background color of the button (Android).</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><a href="colors">color</a></td><td>No</td></tr>
|
||||
<tr><td><a href="colors">color</a></td><td>No</td><td><ins style="background: #2196F3" class="color-box"></ins><code>'#2196F3'</code> <div class="label android">Android</div><hr/><ins style="background: #007AFF" class="color-box"></ins><code>'#007AFF'</code> <div class="label ios">iOS</div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="disabled"></a><a href="#disabled" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>disabled</code></h3>
|
||||
<p>If true, disable all interactions for this component.</p>
|
||||
<p>If <code>true</code>, disable all interactions for this component.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td><td><code>false</code></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="hastvpreferredfocus-div-classlabel-tvtvdiv"></a><a href="#hastvpreferredfocus-div-classlabel-tvtvdiv" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>hasTVPreferredFocus</code> <div class="label tv">TV</div></h3>
|
||||
<p>TV preferred focus.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td><td><code>false</code></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="nextfocusdown-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv"></a><a href="#nextfocusdown-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>nextFocusDown</code> <div class="label android">Android</div><div class="label tv">TV</div></h3>
|
||||
<p>Designates the next view to receive focus when the user navigates down. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown">Android documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td></tr>
|
||||
<tr><td>number</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="nextfocusforward-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv"></a><a href="#nextfocusforward-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>nextFocusForward</code> <div class="label android">Android</div><div class="label tv">TV</div></h3>
|
||||
<p>Designates the next view to receive focus when the user navigates forward. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward">Android documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="nextfocusleft-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv"></a><a href="#nextfocusleft-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>nextFocusLeft</code> <div class="label android">Android</div><div class="label tv">TV</div></h3>
|
||||
<p>Designates the next view to receive focus when the user navigates left. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft">Android documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="nextfocusright-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv"></a><a href="#nextfocusright-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>nextFocusRight</code> <div class="label android">Android</div><div class="label tv">TV</div></h3>
|
||||
<p>Designates the next view to receive focus when the user navigates right. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight">Android documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="nextfocusup-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv"></a><a href="#nextfocusup-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>nextFocusUp</code> <div class="label android">Android</div><div class="label tv">TV</div></h3>
|
||||
<p>Designates the next view to receive focus when the user navigates up. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp">Android documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
@@ -249,82 +309,17 @@ export default App;
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="hastvpreferredfocus"></a><a href="#hastvpreferredfocus" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>hasTVPreferredFocus</code></h3>
|
||||
<p><em>(Apple TV only)</em> TV preferred focus (see documentation for the View component).</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="touchsounddisabled-div-classlabel-androidandroiddiv"></a><a href="#touchsounddisabled-div-classlabel-androidandroiddiv" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>touchSoundDisabled</code> <div class="label android">Android</div></h3>
|
||||
<p>If <code>true</code>, doesn't play system sound on touch.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
<tr><th>Type</th><th>Required</th><th>Default</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>bool</td><td>No</td><td>iOS</td></tr>
|
||||
<tr><td>boolean</td><td>No</td><td><code>false</code></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3><a class="anchor" aria-hidden="true" id="nextfocusdown"></a><a href="#nextfocusdown" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>nextFocusDown</code></h3>
|
||||
<p>Designates the next view to receive focus when the user navigates down. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown">Android documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="nextfocusforward"></a><a href="#nextfocusforward" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>nextFocusForward</code></h3>
|
||||
<p>Designates the next view to receive focus when the user navigates forward. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward">Android documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="nextfocusleft"></a><a href="#nextfocusleft" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>nextFocusLeft</code></h3>
|
||||
<p>Designates the next view to receive focus when the user navigates left. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft">Android documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="nextfocusright"></a><a href="#nextfocusright" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>nextFocusRight</code></h3>
|
||||
<p>Designates the next view to receive focus when the user navigates right. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight">Android documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="nextfocusup"></a><a href="#nextfocusup" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>nextFocusUp</code></h3>
|
||||
<p>Designates the next view to receive focus when the user navigates up. See the <a href="https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp">Android documentation</a>.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>number</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="touchsounddisabled"></a><a href="#touchsounddisabled" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>touchSoundDisabled</code></h3>
|
||||
<p>If true, doesn't play system sound on touch.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th><th>Platform</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>boolean</td><td>No</td><td>Android</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/activityindicator"><span class="arrow-prev">← </span><span class="function-name-prevnext">ActivityIndicator</span></a><a class="docs-next button" href="/docs/next/flatlist"><span class="function-name-prevnext">FlatList</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#onpress"><code>onPress</code></a></li><li><a href="#title"><code>title</code></a></li><li><a href="#accessibilitylabel"><code>accessibilityLabel</code></a></li><li><a href="#color"><code>color</code></a></li><li><a href="#disabled"><code>disabled</code></a></li><li><a href="#testid"><code>testID</code></a></li><li><a href="#hastvpreferredfocus"><code>hasTVPreferredFocus</code></a></li><li><a href="#nextfocusdown"><code>nextFocusDown</code></a></li><li><a href="#nextfocusforward"><code>nextFocusForward</code></a></li><li><a href="#nextfocusleft"><code>nextFocusLeft</code></a></li><li><a href="#nextfocusright"><code>nextFocusRight</code></a></li><li><a href="#nextfocusup"><code>nextFocusUp</code></a></li><li><a href="#touchsounddisabled"><code>touchSoundDisabled</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/activityindicator"><span class="arrow-prev">← </span><span class="function-name-prevnext">ActivityIndicator</span></a><a class="docs-next button" href="/docs/next/flatlist"><span class="function-name-prevnext">FlatList</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#onpress"><strong><code>onPress</code></strong></a></li><li><a href="#title"><strong><code>title</code></strong></a></li><li><a href="#accessibilitylabel"><code>accessibilityLabel</code></a></li><li><a href="#color"><code>color</code></a></li><li><a href="#disabled"><code>disabled</code></a></li><li><a href="#hastvpreferredfocus-div-classlabel-tvtvdiv"><code>hasTVPreferredFocus</code> <div class="label tv">TV</div></a></li><li><a href="#nextfocusdown-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv"><code>nextFocusDown</code> <div class="label android">Android</div><div class="label tv">TV</div></a></li><li><a href="#nextfocusforward-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv"><code>nextFocusForward</code> <div class="label android">Android</div><div class="label tv">TV</div></a></li><li><a href="#nextfocusleft-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv"><code>nextFocusLeft</code> <div class="label android">Android</div><div class="label tv">TV</div></a></li><li><a href="#nextfocusright-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv"><code>nextFocusRight</code> <div class="label android">Android</div><div class="label tv">TV</div></a></li><li><a href="#nextfocusup-div-classlabel-androidandroiddivdiv-classlabel-tvtvdiv"><code>nextFocusUp</code> <div class="label android">Android</div><div class="label tv">TV</div></a></li><li><a href="#testid"><code>testID</code></a></li><li><a href="#touchsounddisabled-div-classlabel-androidandroiddiv"><code>touchSoundDisabled</code> <div class="label android">Android</div></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
if (e.target !== document.body) {
|
||||
|
||||
Reference in New Issue
Block a user