mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for next
This commit is contained in:
1 parent
c5f6570e39
commit
76c362e562
6 files changed
+62
-55
No files matched your search
@@ -1,14 +1,16 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Image – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Image – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:0;" class="" href="docs/basics-components.html">Components</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-text.html">Text</a></li><li><a style="margin-left:0;" class="active" href="docs/basics-component-image.html">Image</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-view.html">View</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-textinput.html">TextInput</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-scrollview.html">ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-listview.html">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-dimensions.html">Dimensions</a></li><li><a style="margin-left:0;" class="" href="docs/basics-layout.html">Layout</a></li><li><a style="margin-left:0;" class="" href="docs/network.html">Network</a></li><li><a style="margin-left:0;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html">Colors</a></li><li><a style="margin-left:0;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:0;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/timers.html">Timers</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html">Debugging</a></li><li><a style="margin-left:0;" class="" href="docs/testing.html">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.html">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li>Line truncated
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Image – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Image – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:0;" class="" href="docs/basics-components.html">Components</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-text.html">Text</a></li><li><a style="margin-left:0;" class="active" href="docs/basics-component-image.html">Image</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-view.html">View</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-textinput.html">TextInput</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-scrollview.html">ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-listview.html">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-dimensions.html">Dimensions</a></li><li><a style="margin-left:0;" class="" href="docs/basics-layout.html">Layout</a></li><li><a style="margin-left:0;" class="" href="docs/network.html">Network</a></li><li><a style="margin-left:0;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html">Colors</a></li><li><a style="margin-left:0;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:0;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/timers.html">Timers</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html">Debugging</a></li><li><a style="margin-left:0;" class="" href="docs/testing.html">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.html">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li>Line truncated
|
||||
import <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> Image <span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
const AwesomeProject <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
class <span class="token class-name">ImageBasics</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token comment" spellcheck="true">
|
||||
// App registration and rendering
|
||||
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'AwesomeProject'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> AwesomeProject<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/v0.1.2/index.html#code=import%20React%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Image%20%7D%20from%20'react-native'%3B%0A%0Aconst%20AwesomeProject%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20)%3B%0A%7D%0A%0A%2F%2F%20App%20registration%20and%20rendering%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20AwesomeProject)%3B&runApp=AwesomeProject" frameborder="0"></iframe></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/basics-component-view.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'AwesomeProject'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> ImageBasics<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/v0.1.2/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Image%20%7D%20from%20'react-native'%3B%0A%0Aclass%20ImageBasics%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20App%20registration%20and%20rendering%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20ImageBasics)%3B&runApp=AwesomeProject" frameborder="0"></iframe></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/basics-component-view.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -1,17 +1,18 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>ListView – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="ListView – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:0;" class="" href="docs/basics-components.html">Components</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-text.html">Text</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-image.html">Image</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-view.html">View</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-textinput.html">TextInput</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-scrollview.html">ScrollView</a></li><li><a style="margin-left:0;" class="active" href="docs/basics-component-listview.html">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-dimensions.html">Dimensions</a></li><li><a style="margin-left:0;" class="" href="docs/basics-layout.html">Layout</a></li><li><a style="margin-left:0;" class="" href="docs/network.html">Network</a></li><li><a style="margin-left:0;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html">Colors</a></li><li><a style="margin-left:0;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:0;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/timers.html">Timers</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html">Debugging</a></li><li><a style="margin-left:0;" class="" href="docs/testing.html">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.html">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><uLine truncated
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>ListView – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="ListView – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:0;" class="" href="docs/basics-components.html">Components</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-text.html">Text</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-image.html">Image</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-view.html">View</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-textinput.html">TextInput</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-scrollview.html">ScrollView</a></li><li><a style="margin-left:0;" class="active" href="docs/basics-component-listview.html">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-dimensions.html">Dimensions</a></li><li><a style="margin-left:0;" class="" href="docs/basics-layout.html">Layout</a></li><li><a style="margin-left:0;" class="" href="docs/network.html">Network</a></li><li><a style="margin-left:0;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html">Colors</a></li><li><a style="margin-left:0;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:0;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/timers.html">Timers</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html">Debugging</a></li><li><a style="margin-left:0;" class="" href="docs/testing.html">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.html">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><uLine truncated
|
||||
import <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> ListView<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View <span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> AwesomeList <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
class <span class="token class-name">ListViewBasics</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment" spellcheck="true"> // Initialize the hardcoded data
|
||||
</span> getInitialState<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">var</span> ds <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ListView<span class="token punctuation">.</span>DataSource</span><span class="token punctuation">(</span><span class="token punctuation">{</span>rowHasChanged<span class="token punctuation">:</span> <span class="token punctuation">(</span>r1<span class="token punctuation">,</span> r2<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> r1 <span class="token operator">!</span><span class="token operator">==</span> r2<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
</span> <span class="token function">constructor<span class="token punctuation">(</span></span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">super<span class="token punctuation">(</span></span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
const ds <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ListView<span class="token punctuation">.</span>DataSource</span><span class="token punctuation">(</span><span class="token punctuation">{</span>rowHasChanged<span class="token punctuation">:</span> <span class="token punctuation">(</span>r1<span class="token punctuation">,</span> r2<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> r1 <span class="token operator">!</span><span class="token operator">==</span> r2<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
dataSource<span class="token punctuation">:</span> ds<span class="token punctuation">.</span><span class="token function">cloneWithRows<span class="token punctuation">(</span></span><span class="token punctuation">[</span>
|
||||
<span class="token string">'John'</span><span class="token punctuation">,</span> <span class="token string">'Joel'</span><span class="token punctuation">,</span> <span class="token string">'James'</span><span class="token punctuation">,</span> <span class="token string">'Jimmy'</span><span class="token punctuation">,</span> <span class="token string">'Jackson'</span><span class="token punctuation">,</span> <span class="token string">'Jillian'</span><span class="token punctuation">,</span> <span class="token string">'Julie'</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||||
<span class="token string">'John'</span><span class="token punctuation">,</span> <span class="token string">'Joel'</span><span class="token punctuation">,</span> <span class="token string">'James'</span><span class="token punctuation">,</span> <span class="token string">'Jimmy'</span><span class="token punctuation">,</span> <span class="token string">'Jackson'</span><span class="token punctuation">,</span> <span class="token string">'Jillian'</span><span class="token punctuation">,</span> <span class="token string">'Julie'</span><span class="token punctuation">,</span> <span class="token string">'Devin'</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>paddingTop<span class="token punctuation">:</span> <span class="token number">22</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<ListView
|
||||
@@ -21,10 +22,10 @@ import <span class="token punctuation">{</span> AppRegistry<span class="token pu
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token comment" spellcheck="true">
|
||||
// App registration and rendering
|
||||
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'AwesomeProject'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> AwesomeList<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/basics-dimensions.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'AwesomeProject'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> ListViewBasics<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/basics-dimensions.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>ScrollView – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="ScrollView – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:0;" class="" href="docs/basics-components.html">Components</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-text.html">Text</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-image.html">Image</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-view.html">View</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-textinput.html">TextInput</a></li><li><a style="margin-left:0;" class="active" href="docs/basics-component-scrollview.html">ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-listview.html">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-dimensions.html">Dimensions</a></li><li><a style="margin-left:0;" class="" href="docs/basics-layout.html">Layout</a></li><li><a style="margin-left:0;" class="" href="docs/network.html">Network</a></li><li><a style="margin-left:0;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html">Colors</a></li><li><a style="margin-left:0;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:0;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/timers.html">Timers</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html">Debugging</a></li><li><a style="margin-left:0;" class="" href="docs/testing.html">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.html">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</hLine truncated
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>ScrollView – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="ScrollView – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:0;" class="" href="docs/basics-components.html">Components</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-text.html">Text</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-image.html">Image</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-view.html">View</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-textinput.html">TextInput</a></li><li><a style="margin-left:0;" class="active" href="docs/basics-component-scrollview.html">ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-listview.html">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-dimensions.html">Dimensions</a></li><li><a style="margin-left:0;" class="" href="docs/basics-layout.html">Layout</a></li><li><a style="margin-left:0;" class="" href="docs/network.html">Network</a></li><li><a style="margin-left:0;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html">Colors</a></li><li><a style="margin-left:0;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:0;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/timers.html">Timers</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html">Debugging</a></li><li><a style="margin-left:0;" class="" href="docs/testing.html">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.html">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</hLine truncated
|
||||
import<span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> ScrollView<span class="token punctuation">,</span> Image<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View <span class="token punctuation">}</span> from <span class="token string">'react-native'</span>
|
||||
|
||||
<span class="token keyword">var</span> SimpleScrollView <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||||
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||||
class <span class="token class-name">ScrollViewBasics</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span><span class="token punctuation">(</span>
|
||||
<ScrollView horizontal<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<View<span class="token operator">></span>
|
||||
@@ -43,10 +44,10 @@
|
||||
<<span class="token operator">/</span>ScrollView<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'AwesomeProject'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> SimpleScrollView<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/v0.1.2/index.html#code=import%20React%2C%20%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%2C%20View%20%7D%20from%20'react-native'%0A%0Avar%20SimpleScrollView%20%3D%20React.createClass(%7B%0A%20%20render()%7B%0A%20%20%20%20%20%20return(%0A%20%20%20%20%20%20%20%20%3CScrollView%20horizontal%3D%7Btrue%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EText1%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EText2%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EText3%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EText4%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EText5%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EText6%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D)%3B%0A%0A%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20SimpleScrollView)%3B&runApp=AwesomeProject" frameborder="0"></iframe></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/basics-component-listview.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'AwesomeProject'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> ScrollViewBasics<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/v0.1.2/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%7B%20AppRegistry%2C%20ScrollView%2C%20Image%2C%20Text%2C%20View%20%7D%20from%20'react-native'%0A%0Aclass%20ScrollViewBasics%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20%20%20return(%0A%20%20%20%20%20%20%20%20%3CScrollView%20horizontal%3D%7Btrue%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EText1%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EText2%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EText3%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EText4%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CImage%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EText5%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A96%7D%7D%3EText6%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%20%20%20%20%3C%2FScrollView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20ScrollViewBasics)%3B&runApp=AwesomeProject" frameborder="0"></iframe></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/basics-component-listview.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -1,25 +1,27 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>TextInput – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="TextInput – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:0;" class="" href="docs/basics-components.html">Components</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-text.html">Text</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-image.html">Image</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-view.html">View</a></li><li><a style="margin-left:0;" class="active" href="docs/basics-component-textinput.html">TextInput</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-scrollview.html">ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-listview.html">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-dimensions.html">Dimensions</a></li><li><a style="margin-left:0;" class="" href="docs/basics-layout.html">Layout</a></li><li><a style="margin-left:0;" class="" href="docs/network.html">Network</a></li><li><a style="margin-left:0;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html">Colors</a></li><li><a style="margin-left:0;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:0;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/timers.html">Timers</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html">Debugging</a></li><li><a style="margin-left:0;" class="" href="docs/testing.html">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.html">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3>Line truncated
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>TextInput – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="TextInput – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:0;" class="" href="docs/basics-components.html">Components</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-text.html">Text</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-image.html">Image</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-view.html">View</a></li><li><a style="margin-left:0;" class="active" href="docs/basics-component-textinput.html">TextInput</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-scrollview.html">ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-listview.html">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-dimensions.html">Dimensions</a></li><li><a style="margin-left:0;" class="" href="docs/basics-layout.html">Layout</a></li><li><a style="margin-left:0;" class="" href="docs/network.html">Network</a></li><li><a style="margin-left:0;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html">Colors</a></li><li><a style="margin-left:0;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:0;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/timers.html">Timers</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html">Debugging</a></li><li><a style="margin-left:0;" class="" href="docs/testing.html">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.html">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3>Line truncated
|
||||
import <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> TextInput<span class="token punctuation">,</span> View <span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
const AwesomeProject <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>paddingTop<span class="token punctuation">:</span> <span class="token number">22</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<TextInput
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
height<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span>
|
||||
margin<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
|
||||
paddingLeft<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
|
||||
borderColor<span class="token punctuation">:</span> <span class="token string">'black'</span><span class="token punctuation">,</span>
|
||||
borderWidth<span class="token punctuation">:</span> <span class="token number">1</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
placeholder<span class="token operator">=</span><span class="token string">"Type something here"</span>
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
class <span class="token class-name">TextInputBasics</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>paddingTop<span class="token punctuation">:</span> <span class="token number">22</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<TextInput
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
height<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span>
|
||||
margin<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
|
||||
paddingLeft<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
|
||||
borderColor<span class="token punctuation">:</span> <span class="token string">'black'</span><span class="token punctuation">,</span>
|
||||
borderWidth<span class="token punctuation">:</span> <span class="token number">1</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
placeholder<span class="token operator">=</span><span class="token string">"Type something here"</span>
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token comment" spellcheck="true">
|
||||
// App registration and rendering
|
||||
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'AwesomeProject'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> AwesomeProject<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/v0.1.2/index.html#code=import%20React%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20AwesomeProject%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7BpaddingTop%3A%2022%7D%7D%3E%0A%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20height%3A%2040%2C%0A%20%20%20%20%20%20%20%20%20%20margin%3A%205%2C%0A%20%20%20%20%20%20%20%20%20%20paddingLeft%3A%2010%2C%0A%20%20%20%20%20%20%20%20%20%20borderColor%3A%20'black'%2C%0A%20%20%20%20%20%20%20%20%20%20borderWidth%3A%201%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20placeholder%3D%22Type%20something%20here%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0A%2F%2F%20App%20registration%20and%20rendering%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20AwesomeProject)%3B&runApp=AwesomeProject" frameborder="0"></iframe></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/basics-component-scrollview.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'AwesomeProject'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> TextInputBasics<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/v0.1.2/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20TextInputBasics%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%7BpaddingTop%3A%2022%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%2040%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%205%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20paddingLeft%3A%2010%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20borderColor%3A%20'black'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20borderWidth%3A%201%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20placeholder%3D%22Type%20something%20here%22%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)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20App%20registration%20and%20rendering%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20TextInputBasics)%3B&runApp=AwesomeProject" frameborder="0"></iframe></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/basics-component-scrollview.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>View – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="View – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:0;" class="" href="docs/basics-components.html">Components</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-text.html">Text</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-image.html">Image</a></li><li><a style="margin-left:0;" class="active" href="docs/basics-component-view.html">View</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-textinput.html">TextInput</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-scrollview.html">ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-listview.html">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-dimensions.html">Dimensions</a></li><li><a style="margin-left:0;" class="" href="docs/basics-layout.html">Layout</a></li><li><a style="margin-left:0;" class="" href="docs/network.html">Network</a></li><li><a style="margin-left:0;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html">Colors</a></li><li><a style="margin-left:0;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:0;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/timers.html">Timers</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html">Debugging</a></li><li><a style="margin-left:0;" class="" href="docs/testing.html">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.html">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><aLine truncated
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>View – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="View – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:0;" class="" href="docs/basics-components.html">Components</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-text.html">Text</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-image.html">Image</a></li><li><a style="margin-left:0;" class="active" href="docs/basics-component-view.html">View</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-textinput.html">TextInput</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-scrollview.html">ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-component-listview.html">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/basics-dimensions.html">Dimensions</a></li><li><a style="margin-left:0;" class="" href="docs/basics-layout.html">Layout</a></li><li><a style="margin-left:0;" class="" href="docs/network.html">Network</a></li><li><a style="margin-left:0;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html">Colors</a></li><li><a style="margin-left:0;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:0;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/timers.html">Timers</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html">Debugging</a></li><li><a style="margin-left:0;" class="" href="docs/testing.html">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.html">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><aLine truncated
|
||||
import <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View <span class="token punctuation">}</span> from <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
const AwesomeProject <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginTop<span class="token punctuation">:</span> <span class="token number">22</span><span class="token punctuation">,</span> alignItems<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>Hello<span class="token operator">!</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
class <span class="token class-name">ViewBasics</span> extends <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
<View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginTop<span class="token punctuation">:</span> <span class="token number">22</span><span class="token punctuation">,</span> alignItems<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<Text<span class="token operator">></span>Hello<span class="token operator">!</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token comment" spellcheck="true">
|
||||
// App registration and rendering
|
||||
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'AwesomeProject'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> AwesomeProject<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/v0.1.2/index.html#code=import%20React%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20AwesomeProject%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7B%7BmarginTop%3A%2022%2C%20alignItems%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%3CText%3EHello!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0A%2F%2F%20App%20registration%20and%20rendering%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20AwesomeProject)%3B&runApp=AwesomeProject" frameborder="0"></iframe></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/basics-component-textinput.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'AwesomeProject'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> ViewBasics<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/v0.1.2/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20ViewBasics%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%7BmarginTop%3A%2022%2C%20alignItems%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%3EHello!%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20App%20registration%20and%20rendering%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20ViewBasics)%3B&runApp=AwesomeProject" frameborder="0"></iframe></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/basics-component-textinput.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
@@ -18,7 +18,7 @@ padding.</p><div class="prism language-javascript">class <span class="token clas
|
||||
and performance, although inline styles are also supported.</p></blockquote><h3><a class="anchor" name="synthetic-touch-events"></a>Synthetic Touch Events <a class="hash-link" href="docs/view.html#synthetic-touch-events">#</a></h3><p>For <code>View</code> repsonder props (e.g., <code>onResponderMove</code>), the synthetic touch event passed to them
|
||||
are of the following form:</p><ul><li><code>nativeEvent</code><ul><li><code>changedTouches</code> - Array of all touch events that have changed since the last event.</li><li><code>identifier</code> - The ID of the touch.</li><li><code>locationX</code> - The X position of the touch, relative to the element.</li><li><code>locationY</code> - The Y position of the touch, relative to the element.</li><li><code>pageX</code> - The X position of the touch, relative to the root element.</li><li><code>pageY</code> - The Y position of the touch, relative to the root element.</li><li><code>target</code> - The node id of the element receiving the touch event.</li><li><code>timestamp</code> - A time identifier for the touch, useful for velocity calculation.</li><li><code>touches</code> - Array of all current touches on the screen.</li></ul></li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/view.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a>accessibilityLabel <span class="propType">string</span> <a class="hash-link" href="docs/view.html#accessibilitylabel">#</a></h4><div><p>Overrides the text that's read by the screen reader when the user interacts
|
||||
with the element. By default, the label is constructed by traversing all the
|
||||
children and accumulating all the Text nodes separated by space.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a>accessible <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#accessible">#</a></h4><div><p>When true, indicates that the view is an accessibility element. By default,
|
||||
children and accumulating all the <code>Text</code> nodes separated by space.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a>accessible <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#accessible">#</a></h4><div><p>When <code>true</code>, indicates that the view is an accessibility element. By default,
|
||||
all the touchable elements are accessible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hitslop"></a>hitSlop <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/view.html#hitslop">#</a></h4><div><p>This defines how far a touch event can start away from the view.
|
||||
Typical interface guidelines recommend touch targets that are at least
|
||||
30 - 40 points/density-independent pixels.</p><p>For example, if a touchable view has a height of 20 the touchable height can be extended to
|
||||
@@ -27,7 +27,7 @@ of sibling views always takes precedence if a touch hits two overlapping
|
||||
views.</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onaccessibilitytap"></a>onAccessibilityTap <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onaccessibilitytap">#</a></h4><div><p>When <code>accessible</code> is true, the system will try to invoke this function
|
||||
when the user performs accessibility tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with:</p><p><code>{nativeEvent: { layout: {x, y, width, height}}}</code></p><p>This event is fired immediately once the layout has been calculated, but
|
||||
the new layout may not yet be reflected on the screen at the time the
|
||||
event is received, especially if a layout animation is in progress.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmagictap"></a>onMagicTap <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onmagictap">#</a></h4><div><p>When <code>accessible</code> is true, the system will invoke this function when the
|
||||
event is received, especially if a layout animation is in progress.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmagictap"></a>onMagicTap <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onmagictap">#</a></h4><div><p>When <code>accessible</code> is <code>true</code>, the system will invoke this function when the
|
||||
user performs the magic tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmoveshouldsetresponder"></a>onMoveShouldSetResponder <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onmoveshouldsetresponder">#</a></h4><div><p>Does this view want to "claim" touch responsiveness? This is called for every touch move on
|
||||
the <code>View</code> when it is not the responder.</p><p><code>View.props.onMoveShouldSetResponder: (event) => [true | false]</code>, where <code>event</code> is a
|
||||
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmoveshouldsetrespondercapture"></a>onMoveShouldSetResponderCapture <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onmoveshouldsetrespondercapture">#</a></h4><div><p>If a parent <code>View</code> wants to prevent a child <code>View</code> from becoming responder on a move,
|
||||
@@ -35,9 +35,9 @@ it should have this handler which returns <code>true</code>.</p><p><code>View.pr
|
||||
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondergrant"></a>onResponderGrant <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onrespondergrant">#</a></h4><div><p>The View is now responding for touch events. This is the time to highlight and show the user
|
||||
what is happening.</p><p><code>View.props.onResponderGrant: (event) => {}</code>, where <code>event</code> is a synthetic touch event as
|
||||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondermove"></a>onResponderMove <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onrespondermove">#</a></h4><div><p>The user is moving their finger.</p><p><code>View.props.onResponderMove: (event) => {}</code>, where <code>event</code> is a synthetic touch event as
|
||||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderreject"></a>onResponderReject <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderreject">#</a></h4><div><p>Another responser is already active and will not release it to that <code>View</code> asking to be
|
||||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderreject"></a>onResponderReject <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderreject">#</a></h4><div><p>Another responder is already active and will not release it to that <code>View</code> asking to be
|
||||
the responder.</p><p><code>View.props.onResponderReject: (event) => {}</code>, where <code>event</code> is a synthetic touch event as
|
||||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderrelease"></a>onResponderRelease <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderrelease">#</a></h4><div><p>Fired at the end of the touch.</p><p><code>View.props.onResponderRelease</code>: (event) => {}<code>, where</code>event` is a synthetic touch event as
|
||||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderrelease"></a>onResponderRelease <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderrelease">#</a></h4><div><p>Fired at the end of the touch.</p><p><code>View.props.onResponderRelease: (event) => {}</code>, where <code>event</code> is a synthetic touch event as
|
||||
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminate"></a>onResponderTerminate <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderterminate">#</a></h4><div><p>The responder has been taken from the <code>View</code>. Might be taken by other views after a call to
|
||||
<code>onResponderTerminationRequest</code>, or might be taken by the OS without asking (e.g., happens
|
||||
with control center/ notification center on iOS)</p><p><code>View.props.onResponderTerminate: (event) => {}</code>, where <code>event</code> is a synthetic touch event as
|
||||
@@ -46,7 +46,7 @@ responder. Returning <code>true</code> allows its release.</p><p><code>View.prop
|
||||
event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetresponder"></a>onStartShouldSetResponder <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onstartshouldsetresponder">#</a></h4><div><p>Does this view want to become responder on the start of a touch?</p><p><code>View.props.onStartShouldSetResponder: (event) => [true | false]</code>, where <code>event</code> is a
|
||||
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetrespondercapture"></a>onStartShouldSetResponderCapture <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onstartshouldsetrespondercapture">#</a></h4><div><p>If a parent <code>View</code> wants to prevent a child <code>View</code> from becoming responder on a touch start,
|
||||
it should have this handler which returns <code>true</code>.</p><p><code>View.props.onStartShouldSetResponderCapture: (event) => [true | false]</code>, where <code>event</code> is a
|
||||
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pointerevents"></a>pointerEvents <span class="propType">enum('box-none', 'none', 'box-only', 'auto')</span> <a class="hash-link" href="docs/view.html#pointerevents">#</a></h4><div><p>Controls whether the View can be the target of touch events.</p><ul><li><code>'auto'</code>: The View can be the target of touch events.</li><li><code>'none'</code>: The View is never the target of touch events.</li><li><code>'box-none'</code>: The View is never the target of touch events but it's
|
||||
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pointerevents"></a>pointerEvents <span class="propType">enum('box-none', 'none', 'box-only', 'auto')</span> <a class="hash-link" href="docs/view.html#pointerevents">#</a></h4><div><p>Controls whether the <code>View</code> can be the target of touch events.</p><ul><li><code>'auto'</code>: The View can be the target of touch events.</li><li><code>'none'</code>: The View is never the target of touch events.</li><li><code>'box-none'</code>: The View is never the target of touch events but it's
|
||||
subviews can be. It behaves like if the view had the following classes
|
||||
in CSS:<div class="prism language-javascript"><span class="token punctuation">.</span>box<span class="token operator">-</span>none <span class="token punctuation">{</span>
|
||||
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||||
@@ -68,12 +68,11 @@ implementation detail of the platform.</p></blockquote></li></ul></div></div><di
|
||||
for scrolling content when there are many subviews, most of which are
|
||||
offscreen. For this property to be effective, it must be applied to a
|
||||
view that contains many subviews that extend outside its bound. The
|
||||
subviews must also have overflow: hidden, as should the containing view
|
||||
subviews must also have <code>overflow: hidden</code>, as should the containing view
|
||||
(or one of its superviews).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType">style</span> <a class="hash-link" href="docs/view.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/flexbox.html#proptypes">Flexbox...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/shadowproptypesios.html#style">ShadowPropTypesIOS#style...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/transforms.html#proptypes">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">enum('visible', 'hidden')</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRightWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderStyle <span class="propType">enum('solid', 'dotted', 'dashed')</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum('visible', 'hidden')</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>elevation <span class="propType">number</span> <div><p>(Android-only) Sets the elevation of a view, using Android's underlying
|
||||
<a href="https://developer.android.com/training/material/shadows-clipping.html#Elevation" target="_blank">elevation API</a>.
|
||||
This adds a drop shadow to the item and affects z-order for overlapping views.
|
||||
Only supported on Android 5.0+, has no effect on earlier versions.</p></div></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="docs/view.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests. NB: disables the 'layout-only
|
||||
view removal' optimization for this view!</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitycomponenttype"></a><span class="platform">android</span>accessibilityComponentType <span class="propType">AccessibilityComponentType</span> <a class="hash-link" href="docs/view.html#accessibilitycomponenttype">#</a></h4><div><p>Indicates to accessibility services to treat UI component like a
|
||||
Only supported on Android 5.0+, has no effect on earlier versions.</p></div></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID <span class="propType">string</span> <a class="hash-link" href="docs/view.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p><blockquote><p>This disables the 'layout-only view removal' optimization for this view!</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitycomponenttype"></a><span class="platform">android</span>accessibilityComponentType <span class="propType">AccessibilityComponentType</span> <a class="hash-link" href="docs/view.html#accessibilitycomponenttype">#</a></h4><div><p>Indicates to accessibility services to treat UI component like a
|
||||
native one. Works for Android only.</p><p>Possible values are one of:</p><ul><li><code>'none'</code></li><li><code>'button'</code></li><li><code>'radiobutton_checked'</code></li><li><code>'radiobutton_unchecked'</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilityliveregion"></a><span class="platform">android</span>accessibilityLiveRegion <span class="propType">enum('none', 'polite', 'assertive')</span> <a class="hash-link" href="docs/view.html#accessibilityliveregion">#</a></h4><div><p>Indicates to accessibility services whether the user should be notified
|
||||
when this view changes. Works for Android API >= 19 only.
|
||||
Possible values:</p><ul><li><code>'none'</code> - Accessibility services should not announce changes to this view.</li><li><code>'polite'</code>- Accessibility services should announce changes to this view.</li><li><code>'assertive'</code> - Accessibility services should interrupt ongoing speech to immediately announce changes to this view.</li></ul><p>See the <a href="http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion" target="_blank">Android <code>View</code> docs</a>
|
||||
|
||||
Reference in new issue
Block a user